Code sketch #5

I started this one with a grid of squares. I imagined an invisible circle growing from the centre of the grid, and the squares changing size depending on their closeness to the circle.

First I drew the grid, and also the circle just so I could visualise its placement.

See the Pen 5.1 by Rachel Smith (@rachsmith) on CodePen.

Then I needed to adjust the size of the squares depending on how close they were to the circle. There might be a more sophisticated way to do this, but I figured I could just calculate the angle of each square from the centre of the circle, use that angle to calculate the position on the circle (at the same angle), and then get the distance between the square and that position.

// calculate angle from center of circle
const angle = atan2(this.centre.y - Circle.y, this.centre.x - Circle.x);
// extend the line to the edge of the circle
const x = Circle.x + Circle.radius * cos(angle);
const y = Circle.y + Circle.radius * sin(angle);
// get the distance from the point on the line
const distance = abs(dist(this.centre.x, this.centre.y, x, y));

I then mapped the square size to the distance, so squares closer to the circle edge were larger, and squares farther away were smaller. This was what I had imagined in my head!

See the Pen 5.2 by Rachel Smith (@rachsmith) on CodePen.

Finally, I adjusted the hue over time, so it cycles through the rainbow.

Here’s the finished Pen:

See the Pen 5.2 by Rachel Smith (@rachsmith) on CodePen.

---

This has been post no. 19 for #WeblogPoMo2024 and it is what I was interested in today.