Code sketch #6

This one was a throwback to an animated background headers inspiration post I made for Codrops just under 10(!!!) years ago. The first demo (dots connected by lines) sparked a minor trend, and many website headers with this effect were shipped for the next year or so.

The effect is achieved by:

1. placing dots on random positions on the canvas and giving them a random velocity in a random direction.
2. on each animation frame: calculate the distance between each dot. If it is below a certain threshold, draw a line between the dots.

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

I don’t know why, but I still just find this effect so satisfying!

It just needed some colour.

I wanted to have the dots and lines change colour depending on how many connections they have. To do this I had to add some code to keep track of which dots are connected to each other. Finally I lowered the opacity on the lines to make them more subtle.

I’m pretty happy with how it turned out. Here’s the final Pen:

See the Pen code sketch #6 p5.js by Rachel Smith (@rachsmith) on CodePen.

---

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