p5.js and matter.js wheel of fortune detect which element is at the top

Question

Hello i'm making a wheel of fortune. I have the animation working but trying to figure out how to detect the position of each ellipse so I can detect when it is at 90 degrees and the pointer is pointing at it. The data i'm using to build the wheel is a series of hex colours. Here is the codpen

Here is the function that builds the wheel

function prizes(revolve,xPosition,yPosition,data,radius,size){ 
var j = 0;
// translate(x,y);
  push()
  rotate(revolve)

for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length)
{
  let x = radius * cos(i);
  let y = radius * sin(i);

  fill(data[j])
  textSize(32);
  ellipse(x,y,size)
  j++;
  }

  pop() 
}

Thanks in advance

Answer 1

The problem is that you're relying on the revolve argument to set a rotation, which in turn modifies the position of the ellipses. This makes it harder to figure out the actual position of the ellipses after rotation.

You might be able to figure it out by un-rotating the point and checking it, but imho that sounds pretty complicated. Instead, if I were you I would stop using the revolve function to rotate the whole canvas, and instead I'd use it to calculate the position of each ellipse.

Once you have the actual position of each ellipse, then you can figure out which one is at the top. Or you could use the dist() function to figure out which one's closest to the pointer.