The Tag Cloud

The canvas below displays animation showing the top 10 tag of this website's content. The importance of each word is represented via the size of the font used to display the word. The words move randomly across the canvas and every time they approach the border of the canvas, the word color is changed. Clicking on any word, leads to a page presenting the content related to this tag word.

The p5.js Javascript library was used for this project.
No specific inspiration for this animation but credit must be given to Coding Train Youtube channel for helping getting into creative coding.

The code uses a class called cloudTag that has the following methods

• constructor : the function dedicated to initialize each instance of the class
• show : the function for displaying on screen the tag
• move : the function that is in charge of applying movement on the cloud tags
• accel : the function dedicated to add some acceleration to the instance of the class
• inRect : the function aimed to detect if the tag was clicked or not (based on the coordinates of the mouse click
• resetColor : this function manages the color change applied to the moving tag when it hits the border of the canvas
• avoidLimits : the function that checks that the tag won't exit the canvas