CONCEPT
While I was looking up tutorials and creative coding examples, I found a YouTube tutorial by Professor Chris. I used his tutorial for building the basic grid as my starting point. I used nested for loops to generate a grid of rows and columns, then added an interactive “spotlight” effect that measures the distance between the moving light and each shape (you can see it clearly through the trail it leaves behind). As the spotlight gets closer, I use the map() function to make the shapes grow, so the grid responds more dynamically, similar to the tutorial that I watched.
I added more by testing different values and adding my own features. I brought in what we did from our Week 2 exercise by making the spotlight move on its own and bounce when it hits the edges of the canvas. To make the motion feel smoother and more interesting, I adjusted the background opacity, which left a ghost trail effect, and I also experimented with other values to see how they changed the overall look. This effect helps create a smoother motion and makes the spotlight’s path more visible as it moves around.
HIGHLIGHT
One thing I accidentally did in my code was adding two values to background(), and I was surprised when it created a ghosting effect that followed my circle everywhere. But when I saw it happening, I decided to keep it because it honestly looked better and more interesting than my previous version.
//background & ghost effect
function draw() {
background(255, 8);
REFLECTION
Overall, even though I didn’t have a specific concept at first and I was mostly just playing around with it, I really loved how it turned out. I honestly didn’t expect the final result, so I’m proud of it. It surprised me how something that started as random experimenting ended up looking intentional and visually satisfying. At the same time, this project also took me a while because I kept testing and adjusting things until it felt right. Sometimes when I experiment with different values, my code ends up breaking, so I use ChatGPT to help me figure out why what I changed isn’t working. While I enjoyed the process, I learned that it would probably be easier if I had at least a simple concept or direction in mind first so I don’t get too lost while experimenting. One improvement I still want to try is adding more color, like a gradient trail, because I feel like it would make the piece look even more alive and add more personality to the piece. I tried thinking of ways to do it, but it felt a bit complicated for me this time, especially while I was still figuring out the main logic of the animation. Maybe next time, once I’m more confident with the code, I’ll push it further and make my work more colorful and expressive.
Sources: https://p5js.org/reference/ and https://youtu.be/MzD7W6Vt6LA?si=EnNemvdZ7Goaw21a