I decided to explore the opposites of lightness and darkness. The contrast felt direct and dramatic, but also approachable for experimenting with animated variables in p5.js.
My aim was to keep things simple, making sure the animation used just the essentials. I pictured something that could have played on a vintage TV in the 1980s, a central shape gradually filling the screen with colored light.
Setting Up the Canvas I started with a square canvas at 400 by 400 pixels, easy to work with and center shapes.
Animation Variables For movement, I defined a diameter variable to let a circle expand from the center. I linked a brightness variable to the diameter, so the circle would start dark and become brighter as it grew.
Color Decisions I began in grayscale, fading from black to white just using fill(brightness). That created a classic look, but I wanted to push it further. I switched to yellow for a bolder transition, mapping brightness directly to the red and green color components: fill(brightness, brightness, 0). This gave the animation a punchier, more synthetic vibe. The sketch reminded me of old analog visuals, the kind you’d see on retro monitors or music shows.
With each frame, the center circle increases in size (diameter += 3) and brightness. The effect is stark. Instead of spelling out the theme, the animation shows “light” overtaking “dark” with visual energy alone. It’s simple code, but has strong impact in motion.
Reflections
The whole process, deciding on a concept, stripping it to the basics, and then adding a little color changed the mood of the sketch more than I expected. Moving from greyscale to yellow wasn’t just about aesthetics; it helped the animation feel more personal, almost nostalgic.
What's Next?
I’m interested in making transitions smoother, maybe using gradients or dynamic backgrounds. I’d like to experiment with revolving colors in the background as well as on the shapes. 3D also comes to mind.