P5.JS: Interactive Clock

Hi there 👋! In this post I want to share an old project of mine that I have archived on GitHub and decided to re-do it again: Fleeing Points Clock!

An interactive clock made of little squares that are actually steering vehicles, that is, entities that experiment a certain desire to go to a certain place, and as a consequence to that desire the vehicle experiments a force that drags it towards its target. It's a very interesting concept that I learned while watching Daniel Shiffman's Coding Challenge: Steering Behaviors.

This is how the clock looks like, it was built using P5.js:

As you can see, passing your mouse over the numbers produces an opposite force that repels the vehicles but, as soon as the cursor leaves, the squares rearrange themselves.

You can also change the colors of the squares by pressing "ENTER":

If you want to try it yourself, you can visit the page here.

Thanks for reading! And if you are curious about the code, please check out the repo (and leave a star if you wish):