# 2d screen / world transformations for buttons (p5 2d Scene Graph?)
**URL:** https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222
**Category:** Coding Questions
**Created:** [September 13, 2021, 5:28am UTC](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222 "2021-09-13T05:28:12Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@DCsan](https://discourse.processing.org/u/DCsan)
#### Post date: [September 13, 2021, 5:28am UTC](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222/1 "2021-09-13T05:28:12Z")
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](https://runemadsen.github.io/rune.js/documentation.html#runegroup) project.
```auto
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()
}
```
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [September 13, 2021, 5:11pm UTC](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222/2 "2021-09-13T17:11:11Z")
I guess you can get the [matrix](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform) through [drawingContext](https://p5js.org/reference/#/p5/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.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 18, 2021, 4:43pm UTC](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222/3 "2021-09-18T16:43:23Z")
> [@DCsan](#):
>
> how people deal with nested transforms and trying to detect what a user clicked on
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…