In this assignment, I created an interactive visualization featuring animated letters that swirl, drift, and change colors as they fall across the screen. The letters are selected randomly from a character set of uppercase English letters and numbers. Each letter moves independently with unique properties such as speed, rotation, color cycling, and sinusoidal horizontal drift. The use of transparency in the background creates a subtle trailing effect, enhancing the sense of motion and fluidity. The goal of this project was to create an aesthetically engaging and dynamic animation with a mix of structured randomness and organic movement.
One part of the code that I am particularly proud of is the display() method inside the SwirlingLetter class. This function not only ensures smooth rendering of each letter but also cycles through colors using sinusoidal variations. This approach creates a mesmerizing shifting color effect without requiring predefined color schemes. Another aspect I appreciate is the reset mechanism in update(), which seamlessly resets letters when they fall below the canvas, ensuring a continuous flow of animation. Looking ahead, possible improvements include adding user interactivity, such as allowing the mouse to influence letter movement or introducing gravity variations for more dynamic behavior. Another potential enhancement could involve applying Perlin noise for smoother, more naturalistic drifting patterns, making the animation feel even more organic.
display() { // Calculate color based on colorPhase (sin/cos wave) let r = 127 + 127 * sin(this.colorPhase); let g = 127 + 127 * sin(this.colorPhase + TWO_PI / 3); let b = 127 + 127 * sin(this.colorPhase + (2 * TWO_PI) / 3); push(); translate(this.x, this.y); rotate(this.angle); textSize(this.fontSize); fill(r, g, b); text(this.char, 0, 0); pop(); }
This is implemented well, but what’s your concept and what are you trying to say? Right now it comes across as a text demo because the letters and colours are random. This a real missed opportunity to say something with the content, in terms of choosing the letters and colours. For example you could choose certain words to show based on a topic and have the colour palette also fit with the theme. Your coding skills seem very good – try to push yourself to implement something beyond what’s expected and show some more creativity. You’ve got the basics down!