Hit detection on 2D Shapes

[Matoseb]

Increasing access

Useful for mouse interaction (mousehover, mouseclick, etc.) on 2DShapes (rect, ellipse, beginShape, ...)

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [X] Events
• [ ] Image
• [ ] IO
• [X] Math
• [ ] Typography
• [X] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

Feature request details

Using CanvasRenderingContext2D: isPointInPath() and isPointInStroke() this could be doable.

Here are two sketches showing how it would work, the shape is drawn two times, the first one for hit detection (drawn as transparent), and the second for styling (fill, stroke, ...)

• hit detection (simple)
• hit detection (multiple overlapping shapes)

Example

const hit = hitTest(mouseX, mouseY, () => {
  rect(0, 0, 500, 500)
})

fill('black')
stroke('white')
cursor(ARROW)

if (hit.hasHit) cursor(HAND)

if (hit.inStroke) stroke('red')
else if (hit.inFill) fill('red')

hit.draw()

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!