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):
Top comments (4)
Great job! One suggestion, upload the code on CodePen and embed it here, so that people can interact with it right from here
Thanks! I did want to do it but didn't because the code is splitted in different files and I'm not very proficient in codepen, but I'll try. 👏🏻
Good job, looks super neat!
Thanks! 👏🏻