Concept
I drew inspiration from the movie Coraline, where there was a little door that lead to another world through a mysterious tunnel and I wanted to use that tunnel as my loop. So in my sketch, there’s a little door and when clicked, it reveals a mesmerizing tunnel of concentric circles that pulse and animate.
My Final Portrait!
Code that I’m Proud of
let animatedSize = d - t;
if (animatedSize > 0) {
ellipse(0, 0, animatedSize);
}
d -= random(15, 35);
I wanted a “magical tunnel” effect so I used d – t to make all circles pulse inward together and random(15, 35) to give each circle irregular spacing. I think it was successful in capturing the mysterious portal feeling and as if you’re being pulled into another dimension.
How this was made
The draw() function has two states controlled by mouse interaction. When the mouse is not pressed, it shows a door: for the door, I wanted to create something simple yet mysterious, so I just used a rectangle with a small circle on the side as the handle and a plain black background. When the mouse is pressed, it shows a tunnel: for the tunnel effect, I initially tried using a for() loop but switched to a while() loop to get that random, organic effect. I was inspired by a p5.js example that used a while loop to create concentric circles with random spacing. The example code showed how while (d > minSize) could draw circles that decrease by random amounts using d -= random (5, 15), which created this uneven pattern instead of perfectly uniform circles. I thought this technique would be perfect for creating a mysterious tunnel effect and I heavily implemented that in my sketch. I used translate() to move origin point to the center, which made drawing the circles so much easier since I could just use ellipse() instead of calculating positions every time. I was also experimenting with the minSize value to control how much blank space shows in the center and settled with 100. I learned modulo operato % to make the animation loop endlessly.
Reflection and Future Improvements
I used the p5.js reference page for examples of for() and while() loops and The Coding Train’s playlist on YouTube about loops to understand the logic and process of creating a loop. These sources were helpful in making me understand loops better as I missed the class discussion about this. In the future, I’d like to learn adding color gradients for the circles and a spiral motion to add more depth and make it more whimsical-looking.