Search code examples
javascriptmathp5.jspolar-coordinates

Finding the coordinates (x,y,z) of vertices of a square plane rotated about its center point in P5 js

I am recreating conic sections in P5.js and need to find the equation of a square plane.

I know the size of the square plane, and the rotation in each axis in degrees from its center point (as dictated by the P5 sliders).

I want to calculate the coordinates (x, y, z) of the four vertices of this square plane, given known values for rotation.

This is my P5 sketch.

https://editor.p5js.org/inglog/sketches/HsMUb8UPA

I want to use these coordinates to create an equation for the plane, in the form ax+by+cz+d=0

Once I have the vertices of the square, I will use this calculator to get the equation of the plane: https://keisan.casio.com/exec/system/1223596129)

Any advice on how to calculate the coordinates of the vertices of the plane, given a known rotation about its center point?

Is this related to conversion between Cylindrical and Cartesian Coordinates? I also wonder if this answer is connected to the solution (Rotating vertices about point)

Thank you in advance for reading through.

Solution

  • Since there is a unique plane that goes through a given set of 3 (noncollinear) points, you don't need the vertices of the square in order to find an equation for the plane. You just need 3 random points on the plane.

    Answer:

    A = (0, slider.value(), 0)
B = (1, slider.value(), 0)
C = (0, slider.value() - sin(slider2.value()), cos(slider2.value()))

    From here, you can get the plane equation as they describe on the site you gave:

    AB = (1, 0, 0)
AC = (0, -sin, cos)
AB x AC = (0, -cos, -sin)

    Equation:

    0x - cos(slider2.value())*y - sin(slider2.value())*z + cos(slider2.value())*slider.value() = 0

    simplifies to

    cos(slider2.value())*(y - slider.value()) + sin(slider2.value())*z = 0

    or

    z = (slider.value() - y)/tan(slider2.value())

    I'm about 99.9% sure this is the right equation. I used it to overlay points on the plane in your program, and it looked right.

    How I got the three points:

    We know that there will be one point at the center, which is on the y-axis. At this point, x=z=0 and y=slider.value(). So that is point A: (0, slider.value(), 0).

    We also know that the plane intersects the xy-plane in the line defined by y=slider.value(). So point B can be any point on this line, let's arbitrarily pick (1, slider.value(), 0).

    The third point is the hardest, since we can't have z=0, and we have to consider the angle. Starting at the center, let's walk one unit along the plane, keeping x=0 and moving in the positive z direction. It's hard to convey that point over text, but this is a classic unit circle problem: x=0, and y, z are on a unit circle centered at point A: C = (0, slider.value() - sin(slider2.value()), cos(slider2.value())).