DEV Community

loading...
Cover image for P5.JS: Interactive Clock

P5.JS: Interactive Clock

devtony101 profile image Miguel Manjarres Updated on ・1 min read

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:

Gif_1

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

Gif_2

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.

Discussion

pic
Editor guide
Collapse
jaagrav profile image
Jaagrav

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

Collapse
devtony101 profile image
Miguel Manjarres Author

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. 👏🏻

Collapse
baenencalin profile image
Calin Baenen

Good job, looks super neat!

Collapse
devtony101 profile image