2d screen / world transformations for buttons (p5 2d Scene Graph?)

p5.js Coding Questions
1

wondering how people deal with nested transforms and trying to detect what a user clicked on. I have something like the below with nested elements that all do their own push/transform/pop
and the nested elements need to detect clicks. i’m mostly doing my own hotspot calculations with x,y,w,h boundary. but it gets a bit complex to have to unwind everything based on the graphics transformations.

Is there a scene graph or similar project for p5?
I guess that was one of the motivations for the Rune project.

    draw(buf: p5.Graphics) {

        buf.push()
        buf.translate(this.pos)
        // draw some stuff
        
        // this has its own translations and rotations
        this.innerBox.draw(buf)

        buf.pop()

    }
2

I guess you can get the matrix through drawingContext (or maybe there’s a better way for “mouse picking”).

It may not be what you are looking for, but depending on the application, it may be easier to use a DOM element. Make an element clickable and apply transformation through CSS. Then you don’t have to worry anything about mouse picking.

1 Like
3

One way is to paint an offscreen graphics buffer with a flat, id-colored copy of each primitive / shape / silhouette. Then check pixel color of your buffer on mouse click. That way you don’t have to unwind all the matrix transformations.

This is sometimes called the “picking” algorithm – there is a Processing library implementation in the library Picking; I’m not sure if there is a p5.js library, but it isn’t too difficult to implement. A limitation is that a simple implementation only detects the topmost object per pixel – no transparency / multi-detect.

Or, as you said, you could use Rune.js, which has a scene graph built-in…

1 Like