# Do Skew + perspective transform on a rectangle and then check if a mouse cursor is on it **URL:** \ **Category:** How to?\ **Created:** [December 26, 2024, 7:51am UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723 "2024-12-26T07:51:41Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![ajitid](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/ajitid/32/785_2.png) [@ajitid](https://openrndr.discourse.group/u/ajitid)\ **Post date:** [December 26, 2024, 7:51am UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/1 "2024-12-26T07:51:41Z")
_New to creative coding but familiar to programming here. I’m talking wrt 2D context in this post._ I’m unable to figure out how I would be able to identify if my mouse cursor is on a skewed rectangle with a perspective transform applied. A good example of a rectangle transformed like this is any album art that appears tilted in a coverflow: ![image](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/2acc89605ab8e856c9ecc1f306ae4bff712f930d.jpeg) * * * Things I know: - `rect.contains(mousePosition)` can help me identify if my mouse cursor is on that rectangle. However I don’t think I can be able to identify if my mouse is on a skewed+persp. transform applied rectangle given that these two operations are probably performed by the `drawer` and not by `rect`. Things I tried: - I couldn’t find ‘skew’ [here](https://guide.openrndr.org/drawing/transformations.html) or when searching in [GitHub repo](https://github.com/openrndr/openrndr/) - I felt `drawer.perspective()` is only for 3D ([I read this](http://learnwebgl.brown37.net/08_projections/projections_perspective.html)). I tried ` drawer.perspective(90.0, width*1.0 / height, 0.1, 100.0)` which I thought is the default and won’t affect what I’m seeing but it did affected my 2D drawing. ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [December 26, 2024, 10:05am UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/2 "2024-12-26T10:05:38Z")
Hi! 🙂 It would help me suggest something if I knew what you are trying to build. As far as I can see, your example image above is in 3D (perspective): parts which are farther away look smaller. BTW one can do 3D in perspective, but also in [isometric](https://en.wikipedia.org/wiki/Isometric_projection) (where distance does not affect size). One way to detect what object is under the mouse is to render everything twice: once for the user, and another time to detect identify which object is under the mouse. In this second rendering pass, you render (but do not show to the user) objects with unique flat colors using a `renderTarget`. This `renderTarget` has an associated `colorBuffer`. After rendering you download the `colorBuffer` from the GPU to the CPU using its [shadow](https://guide.openrndr.org/drawing/colorbuffers.html#color-buffer-shadows). Then you can query what color is at the mouse position, which tells you which object is there. If there is no skew transformation, could you draw a quad contour from 4 points? ---
**Author:** ![ajitid](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/ajitid/32/785_2.png) [@ajitid](https://openrndr.discourse.group/u/ajitid)\ **Post date:** [December 26, 2024, 11:14am UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/3 "2024-12-26T11:14:08Z")
> [@abe](#): > > one can do 3D in perspective, but also in [isometric](https://en.wikipedia.org/wiki/Isometric_projection) (where distance does not affect size). This is exactly what I want to achieve. > [@abe](#): > > It would help me suggest something if I knew what you are trying to build. I’m taking a stab at making the same coverflow that you’re seeing in the picture, with actual album art images (and not rectangles). ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [December 26, 2024, 12:22pm UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/4 "2024-12-26T12:22:38Z")
> [@Mouse picking 3D objects](https://openrndr.discourse.group/t/mouse-picking-3d-objects/724): > > Inspired by [this post](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/3), find here a program to detect which 3D object is under the mouse cursor. The idea is to do two render passes. One of them is what the user sees. The other render pass is used internally. It contains the same geometry, but the shapes have been rendered with flat and known colors. Later, we sample the pixel color under the mouse position and use that color to identify the shape under the mouse. In this simple example I’m using the red component of the pixel. Since we use t… ---
**Author:** ![ajitid](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/ajitid/32/785_2.png) [@ajitid](https://openrndr.discourse.group/u/ajitid)\ **Post date:** [December 26, 2024, 2:06pm UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/5 "2024-12-26T14:06:15Z")
Thanks for that mouse picking post! re: If there is no skew transformation, could you draw a quad contour from 4 points? While I might be able to do that for a rectangle, could you provide a pointer on how I would tilt an image? ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [December 26, 2024, 6:09pm UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/6 "2024-12-26T18:09:06Z")
Drawing a closed contour with 4 points is easy (`ShapeContour.fromPoints()`), but that’s meant for 2D shapes without textures. For mapping textures to a shape I think you need a vertexBuffer. The simplest approach is to use [planeMesh](https://github.com/openrndr/orx/tree/master/orx-mesh-generators). Instead of skewing the vertices, wouldn’t it be simpler to use 3D transformations to displace planes? ---
**Author:** ![ajitid](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/ajitid/32/785_2.png) [@ajitid](https://openrndr.discourse.group/u/ajitid)\ **Post date:** [January 7, 2025, 4:41am UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/7 "2025-01-07T04:41:49Z")
Hi Abe. Happy new year! I have a quick question: Is [Slack channel](https://openrndr.org/community/) only available to exclusive members? I’m unable to access it. ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [January 7, 2025, 3:18pm UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/8 "2025-01-07T15:18:38Z")
Hiii 🙂 Happy 2025 🥳 I see this [link](https://join.slack.com/t/openrndr/shared_invite/zt-avkbk0as-AZEsN7kb4UNIpfmYfbAemw) in [openrndr.org](http://openrndr.org). Does it work? (you need to create an account to log in) ---
**Author:** ![ajitid](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/ajitid/32/785_2.png) [@ajitid](https://openrndr.discourse.group/u/ajitid)\ **Post date:** [January 7, 2025, 4:43pm UTC](https://openrndr.discourse.group/t/do-skew-perspective-transform-on-a-rectangle-and-then-check-if-a-mouse-cursor-is-on-it/723/9 "2025-01-07T16:43:04Z")
Interesting. Earlier it was asking if I had an email under `@openrndr` domain. This works, thanks!