Concept
For this assignment I wanted to create something to do with text and the first thing that came to my mind was how we ask our friends to Bump! our posts on our Facebook RoR group (Room of Requirement, a group in Facebook for NYU Abu Dhabi students). So then I decided why not create something to do with this legendary word Bump?
When I think of that word, multiplication comes to my mind because the more times you write it, the more audience sees your post. So that lead me to an idea that when you press the word, it spawns another Bump!, with a random color and its own bouncing behavior.
Creation
I created a Bump class that stores position, speed, color, and the text itself. Each bump moves across the canvas and bounces when it hits the edges. When the user clicks on a bump, a new one is created in a random position with a random color, and it moves independently. I also added a restart option so that pressing the key C or c clears the screen and brings back just one bump in the center.
Difficulties
The most challenging part for me was figuring out how to detect if the mouse actually clicked on the text. Since text doesn’t have a simple rectangle in p5.js, I had to calculate the approximate bounding box using textWidth and the text size. After that, I also had to make sure the bumps bounced correctly on the edges, which meant checking both horizontal and vertical boundaries.
Favorite Part
My favorite part of the code is definitely the spawning of new bumps. I love how every click brings a surprise because the new text gets a random color and a random speed. It gives the sketch a playful and unpredictable feeling, which matches the energy of the word Bump! itself.
function mousePressed() {
// check each bump to see if mouse is inside it
for (let b of bumps) {
if (b.clicked(mouseX, mouseY)) {
// if clicked, create a new bump at random position
bumps.push(new Bump(random(width), random(height)));
break; // only add one new bump per click
}
}
Future Improvements
In the future, I would like to add a few more playful features. For example, making the bumps grow or shrink over time, adding sound effects when they collide with the walls, or even keeping track of how many bumps were created. Another fun idea would be to make the bumps interact with each other—like bouncing off one another instead of just overlapping.
So here’s my end result, and if you see my post on RoR, please bump it :))
Press bump! to multiply it, and press C to reset