P5.JS: Polar Mandalas

Hi there 👋! In this unplanned series about P5JS projects I had archived I now present to you: Polar Mandalas!

The code uses the concept of polar coordinates to make beautiful and colorful lines across your page. All the magic happens on the Body class, it has the following attributes:

• radius: It's the distance between a single body and the center of the page (by convention, the cartesian plane for the canvas has its origin in the top-left corner of the page, here I've translated to the center to reduce the complexity of calculations). The variation of the radius it's what makes the drawings. Its initial value it's given as an argument for the constructor.

• velocity: The velocity at which the body moves.

• angle: It's the angle at which the body is respect to the x-axis. It increments proportional to the velocity, that is, the more velocity the body has, the more curved the lines will be. The angle grows indefinitely and its initial value it's given as an argument for the constructor.

• alpha, beta: Constants values defined randomly at construction. It defines the ratio at which the radius varies according to the following function: alpha + cos(beta * angle).

• clr: The color of the body and therefore the color of the trace (the line it draws).

• history: An array of previous points that the code uses to draw the trace itself.

You can interact with the code right here (press enter to create a new set of bodies):

This project was based on a coding challenge made by Daniel Shiffman about Mathematical Rose Patterns.

I hope you liked it! If you have questions or suggestions to make please leave them down below. Thanks 👏!