For my midterm project, I wanted to explore the mesmerizing nature of the Fibonacci spiral through a generative art system. I named the project “Fibonacci Dream” because it combines the beauty of mathematical spirals with dynamic, flowing petals that continuously change over time.
Concept and Artistic Vision:
The Fibonacci sequence and the golden angle have always fascinated me. I love how these mathematical principles appear in nature—from sunflowers to seashells. My goal was to mimic this natural elegance by creating a digital flower that grows and oscillates, combining organic movement with vibrant color palettes.
While researching Fibonacci spirals, I learned how deeply they connect to growth patterns in nature. This connection inspired me to build a visual system that transitions between different moods through rotating petals, oscillating sizes, and shifting color schemes. The final sketch uses a Fibonacci spiral to control the petal arrangement, creating a dynamic, mesmerizing flower with endless possibilities.
I used colors inspired by the natural world, with gradients of pink, yellow, blue, and green to evoke different emotional states. This color-changing feature makes the flower feel alive, as if it’s reacting to its environment.
Embedded Sketch:
https://editor.p5js.org/ha2297/full/Eo2Yntsgr
Coding Logic and Translation:
The logic behind “Fibonacci Dream” revolves around creating a dynamic, generative artwork using a Fibonacci spiral, with petals that oscillate, rotate, and change color over time. Here’s how each part of the code works:
- Fibonacci Spiral Arrangement
The petals follow a Fibonacci spiral pattern, where each petal’s position is determined by an angle (137.5°) and a radius that grows as the square root of the petal index. This ensures that the petals are evenly spaced and spread outward in a natural spiral.
let angle = i * spiralAngle + time * 10; let radius = sqrt(i) * 8; let x = radius * cos(angle); let y = radius * sin(angle);
2.Oscillation and Rotation
To give the petals life, they oscillate in size using the sine function, creating a smooth breathing effect. The petals also rotate in a spiral, and the speed of rotation is controlled by a user-adjustable slider.
let oscillation = map(sin(time + i), -1, 1, 0.8, 1.2); let dynamicPetalLength = petalLength * oscillation; let dynamicPetalWidth = petalWidth * oscillation; rotate(angle + time);
3.Color Palettes
The code includes six color palettes that the user can switch between. Each palette uses gradients like pink to yellow or blue to green, adding variety to the artwork
switch (colorPalette) {
case 0:
colorVal = map(i, 0, numPetals, 255, 100); // Pink to yellow gradient
fill(255, colorVal, 150, 200);
break;
// Other palettes...
}
4.User Interaction
Two sliders let the user control the rotation speed and zoom level, while a button switches between color palettes. These interactive elements make the artwork more engaging and customizable.
rotationSpeedSlider = createSlider(1, 50, 10);
zoomSlider = createSlider(0.5, 2, 1, 0.01);
colorChangeButton = createButton('Switch Color Palette');
colorChangeButton.mousePressed(switchColorPalette);
5. SVG Export
The artwork can be saved as an SVG image by pressing the ‘s’ key, allowing users to export and preserve the visual as a vector graphic.
function keyPressed(){
if(key == "s" || key =="S"){
save("image.svg");
}
}
Code Snippet:
let oscillation = map(sin(time + i), -1, 1, 0.8, 1.2); let dynamicPetalLength = petalLength * oscillation; let dynamicPetalWidth = petalWidth * oscillation;
This code snippet is key to creating a “breathing” effect for the petals by making them grow and shrink over time. It uses the sin() function to generate oscillating values between -1 and 1, which are then mapped to a range between 0.8 and 1.2. This controls the petal size fluctuation, where petals shrink to 80% of their original size and grow to 120%, giving the effect of rhythmic breathing.
The combination of time and petal index (i) ensures that each petal oscillates with a slight variation, making the motion feel more organic. The mapped oscillation value is applied to both petal length and width, making the petals dynamically change in size.
This subtle movement brings the generative art to life. Without this oscillation, the flower would feel static and mechanical. The breathing effect, combined with the spiral pattern and color changes, adds a layer of depth, making the artwork more engaging and lifelike.
Challenges:
One of the biggest challenges was ensuring that the oscillation and rotation worked smoothly together, especially when combined with user input. It took several iterations to get the timing and size oscillation just right without breaking the flow of the petals.
Another challenge was handling the zoom function. Initially, zooming affected the positioning of the sliders and button, but I managed to fix this by anchoring them to the screen while zooming the canvas content independently.
Another issue that took some time to resolve was an error I encountered when trying to save the SVG file. Initially, I was using the following HTML file. However, I kept getting an error when trying to export the SVG. After some debugging, I realized that the issue was with the version of the p5.js SVG library I was using. I switched to an older version of the HTML file.The error occurred because the version of p5.js-svg I was initially using wasn’t compatible with the main p5.js version in my project. By switching to an older, more stable version, I was able to fix the issue and successfully save the SVG files.
Pen Plotting Experience:
For the pen plotting experience, I initially wanted to make the image of the flower more interesting by dividing it into two color layers. I chose to have the inner layer in yellow and the outer layer in pink to create a subtle contrast. When I printed it with the pen plotter, I used light blue for the inner part and dark blue for the outer part.
Unfortunately, the video I recorded didn’t save. So, I decided to reprint the image with the same colors and setup. However, while printing the second layer (the outer part in dark blue), the ink started running out—not completely, but enough to create a faded effect. I thought about pausing the process to replace the pen, but I ended up liking the way it looked with the gradual fading. It gave the piece a more unique, unexpected quality, so I let the print finish as it was. This added an element of spontaneity to the final artwork that I hadn’t initially planned for, but really enjoyed.
First Version:
Second Version:
A3 Printed Images:
Areas for Improvement and Future Work
In future versions of this project, I have several ideas to improve and expand on:
- More User Interaction:
I want to add mouse or touch gestures, so users can control the flower’s rotation and zoom by dragging or pinching the screen. This would make the interaction more natural and fun, especially on touch devices like tablets.
2. 3D Elements:
I’m thinking of adding 3D effects to make the flower feel more immersive. For example, the petals could rise and fall, creating a sense of depth. This would make the flower seem more realistic, almost like it’s floating on the screen.
I also want to explore how natural forces like gravity or wind could affect the petals in 3D, adding a new layer of interaction and visual complexity.
3. Improving Pen Plotting:
I plan to refine the line quality for smoother transitions between layers of the flower when using the pen plotter.
I want to try different styles like stippling (dot patterns) or crosshatching (overlapping lines) to create shading and color effects similar to the digital version.
Experimenting with different pens and inks, like metallic or gradient colors, could help capture the vibrant look of the digital artwork in physical form.
These improvements will make the project more interactive and visually rich, both in the digital version and the pen-plotted version.
References:
https://editor.p5js.org/xiao2202/sketches/vkHJQX4gy
https://github.com/Jttpo2/flowers