Hit detection on 2D Shapes

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
• Events
• Image
• IO
• Math
• Typography
• 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()

Start by reviewing the linked hit-detection sketches and the CanvasRenderingContext2D isPointInPath() and isPointInStroke() APIs. Compare the proposed hitTest() behavior for filled, stroked, and overlapping 2D shapes. Done should include a decided API and reliable detection of whether a point is in a shape's fill or stroke.