For this assignment, I wanted to make word bubbles whose size depended upon their count in a text. I ended up chosing the book ‘Science of Being Well’ since I want to explore the relation between field of wellness and text, and picked the text file from Project Gutengberg.

What I learnt along the way:

  1. circle is a nice command to draw a circle, but it gets really tough when you want to move that circle around or detect its collision/overlap with some other circle. Also there is no DOM element for the created circle, so there is no way to attach like a mouseOver() event listener to it.
  2. Need to include background() at the beginning of draw() to make sure previous frames are cleared out
  3. setTimeout() didn’t function well consistently. Similarly mouseOver() doesn’t catch all the mouse movements.

Here’s how it turned out:

Observe how the bubbles grow in size and start to move faster as the text is parsed and the counts of the words present in it are incremented accordingly. Also, you can hover over any bubble so it turns yellow and all the other bubbles stop momentarily so you can clearly see the text.