DEV Community

Cover image for P5.JS: Interactive Clock
Miguel Manjarres
Miguel Manjarres

Posted on • Updated on

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):

GitHub logo DevTony101 / fleeing-points-clock

A clock made of steering vehicles.

Top comments (4)

jaagrav profile image

Great job! One suggestion, upload the code on CodePen and embed it here, so that people can interact with it right from here

devtony101 profile image
Miguel Manjarres

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. πŸ‘πŸ»

baenencalin profile image
Calin Baenen

Good job, looks super neat!

devtony101 profile image
Miguel Manjarres

Thanks! πŸ‘πŸ»