The Concept
For this piece, I wanted to build something that felt more moving, with text that reacts to the viewer instead of just sitting there. One Arabic word appears in the center of the canvas, and when you click it, it “explodes” into two dozen flying copies of itself. Each copy moves in a random direction, shrinks, and fades out until the last one disappears. Then, a new word and background color appear, waiting for the next click. The words I used were سلام (peace), حب (love), أمل (hope), نور (light), فرح (joy), and حلم (dream). I chose these words because they are short, meaningful, and visually strong in Arabic script, which made them a good fit for a generative piece based on repetition and motion. For the font, I copied the P5 GS that we discussed in class, which showed an example of Arabic text. The Arabic font was already included in the file, so I used that part and added my own code to create the interaction and animation.
Highlight: The Code I’m Proud Of
The part of this sketch I’m happiest with is the Word class. Early drafts of this project tracked every flying copy using a pile of separate arrays, one for x position, one for y position, one for speed, one for size, one for transparency and so on and keeping all of them in sync by index got messy fast. Rewriting it as a class cleaned everything up so now each flying copy is a single self-contained object that knows its own position, speed, size and fade level and knows how to move and draw itself.
class Word {
constructor(x, y, speedX, speedY, size, word) {
this.x = x;
this.y = y;
this.speedX = speedX;
this.speedY = speedY;
this.size = size;
this.alpha = 255;
this.word = word;
}
move() {
this.x = this.x + this.speedX;
this.y = this.y + this.speedY;
this.alpha = this.alpha - 2;
}
show() {
textSize(this.size);
fill(255, 255, 255, this.alpha);
text(this.word, this.x, this.y);
}
isFinished() {
return this.alpha <= 0;
}
}
Embedded Sketch
How Was This Made
This sketch combines several things I learned in the first few weeks of class. I used arrays and objects to keep track of the words as they explode, similar to the Ball Class examples we worked on in class. I also made a Word class, using the same object-oriented programming idea from the Ball and Car class examples. I used random() to choose the word, background color, and different speeds and sizes for the copies. The mouseClicked() function makes the explosion happen when the canvas is clicked, and draw() continuously updates the position and fading of each word to create the animation. For the Arabic text, I used the Noto Kufi Arabic font from Google Fonts because Arabic needs to be displayed correctly with its connected letters. I followed the font method we discussed in class which uses HTML and CSS instead of loadFont().
Reflection and Future Ideas
I like how simple the idea is, but I think I could make it more interesting. I would like to add trails behind the words, allow multiple explosions at the same time, and make each word look different based on its meaning. I could also add a sound when the words explode if that works.
