Concept:
I got the idea for this assignment after seeing the work of our Artist of the Week: Memo Akten, especially his piece on Simple Harmonic Motion. His smooth, rhythmic designs instantly made me think of nature—like the gentle sway of a flower’s petals in the wind. That’s when it clicked! I decided to create my own version, a flower-like pattern with oscillating petals, using p5.js. I wanted to bring the flower to life by making its petals pulse and move in a way that mimicked real-life motion.
Embedded Sketch:
The code creates a dynamic flower-like pattern with oscillating petals using the sin() function to control smooth, rhythmic motion. First, the flower is centered on the canvas using translate(), and the petals are drawn in a loop, with each petal’s size oscillating based on the sine wave. Multiple layers of petals are added for depth, giving the flower a complex appearance. The stem and leaves are then positioned right below the flower, and the leaves gently sway using the same oscillation logic. The time variable drives the continuous animation, making the flower feel alive and constantly moving.
What I’m Proud Of in the Code:
One of the highlights of my project is how the petals grow and shrink over time, giving the flower a breathing effect. Here’s a key part of the code:
let petalOscillation = amplitude + sin(time + angle + l) * 20; ellipse(layerOffset, 0, petalWidth, petalHeight);
This section makes use of the sin() function to create the smooth back-and-forth movement of the petals. By adjusting the size of each petal with a sine wave, the flower seems to come alive, as the petals expand and contract in a rhythmic way. Adding multiple layers of petals helped give the flower more depth, making it look more complex and natural.
Challenges I Faced:
One of the main challenges was figuring out how to position the stem and flower correctly. At first, the stem kept appearing on top of the flower, which looked strange. I had to experiment with the translation (moving the origin point) in p5.js to get the stem to sit underneath the flower, where it belongs.
Reflection:
Looking back, I’m really happy with how the petals move in such a smooth and natural way. Working on this project helped me better understand how to use harmonic motion and how to layer shapes and elements in p5.js. The flower ended up feeling dynamic and alive, which was exactly what I was aiming for.
In the future, I’d like to:
1.Add interactivity: It would be cool if the flower could respond to user input, like mouse movement. For example, maybe the user could change how fast the petals pulse or how big they grow.
2. Try 3D: Moving this concept into 3D would make the flower even more exciting. Imagine the petals not just growing and shrinking, but also rotating and moving in a 3D space.
3.Make the movement more natural: Right now, the movement is smooth, but it could feel even more organic if I added some Perlin noise to the oscillations. This would make the petals and leaves move in a way that’s a little less predictable and more like how things behave in nature.