feat: Add ability to draw 3d circles

[mithi]

Algorithm

1. Start with a 2d circle defined by a radius, centered at the origin, in the xy plane
2. Get 5 points of a circle(r, 0), (-r, 0), (0, r), (0, -r), (0, 0)
3. Transform these 5 points in 3d given the 3 euler angles and the actual center (x, y, z)
4. Convert these points into 2d by projecting it to the canvas, the circle is now and ellipse
5. Get the radiusX and radiusY of the ellipse given the origin and two of the transformed points (compute the distance)
6. Get the angle of this new ellipse by getting the dot product of one of the vectors formed by the origin and one of the points and the x axis
7. We have now defined the ellipse (2d center, radiusX, radiusY, angle) representation

[fuddl]

For anyone interested: You can draw an approximation of a circle using the QuadraticBezier plugin:

const precision = 42;

let circleXYPoints = {
  x: [],
  y: [],
  z: [],
}

for (let i = 0; i <= Math.PI * 2; i = i + (Math.PI / precision)) {
  circleXYPoints.x.push(Math.cos(i) * r);
  circleXYPoints.y.push(Math.sin(i) * r);
  circleXYPoints.z.push(0);
}

points.push({
  id: 'circle',
  type: 'QuadraticBezier',
  color: 'red',
  ...circleXYPoints,
});

[mithi]

Hi @fuddl , thanks your the input, here's the plugin if anyone's interested: https://github.com/fuddl/bare-minimum-quadratic-bezier

it would be nice if it's possible to draw circles that are "angled" in 3d space, circles which are not parallel to the x, y, or z planes. 😄

[fuddl]

I will have to think about it

[mithi]

I think you can use this function

• rotateXYZmatrix

const rotateXYZmatrix = (euler: { x: number; y: number; z: number }): matrix4x4

to pass the angles in degrees on the x y z direction and the multiply that with (x, y, z, 0) point vector.. to get the resulting rotated point of each circle.

when my sched frees up i’ll make a concrete example… thank you! 😊

On Tue, Mar 29, 2022 at 2:49 AM fuddl @.***> wrote:

I will have to think about it

— Reply to this email directly, view it on GitHub https://github.com/mithi/bare-minimum-3d/issues/6#issuecomment-1081015769, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMX2FJDKJ6BEWFSXWT6RLTVCH5LNANCNFSM4QPQAAGA . You are receiving this because you authored the thread.Message ID: @.***>