Do Skew + perspective transform on a rectangle and then check if a mouse cursor is on it

[ajitid]

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:

---

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 or when searching in GitHub repo
• I felt drawer.perspective() is only for 3D (I read this). 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.

[abe]

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 (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. 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?

[ajitid]

@abe

one can do 3D in perspective, but also in isometric (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).

[abe]

Mouse picking 3D objects

Inspired by this post, 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…

[ajitid]

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?

[abe]

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.

Instead of skewing the vertices, wouldn’t it be simpler to use 3D transformations to displace planes?