The dandelion is quite small.
But they can also be very, very big.
Big enough to be the universe. Big enough to include the universe.
Dandelion and jellyfish both breathe in the same universe.
- Working Process
- Inspiration
At first, I didn’t have much inspiration, so I started by playing with the example code. In the example code for branches, both x and target x are connected by lines. So, I wondered if I could replace the lines with curves and further add a function for position arrangement transformations in the “Exit Condition”, turning the graph into a sphere composed of many arcs. I began my attempt.
Here’s my first attempt. To achieve the effect, I replaced the lines with curves composed of curveVertex. I remapped the relationship between thickness and curve length, linked the curve’s transparency to its length, and added two additional transformations within the recursive function to make it spherical.
Link to the Sketch: Dandelion with No GUI
- Finalize the theme and start to work
I found that this shape resembles a dandelion, so I continued working in that direction. Building on this, I added a GUI where I included the starting point x for curveVertex, the length between points (len), and minLen (I set minLen to be a parameter that scales proportionally with Len to avoid errors in p5.js while maintaining logic). Additionally, I set up controls in the GUI to adjust the overall position of the dandelion (tx & ty).
Moreover, I adjusted the relationship between deg and mouseX, opting for abs (mouseX – width/2) as it felt more logical and comfortable. Now, the dandelion can vary in size, radians, and density.
Simultaneously, I experimented with different settings for the recursive function to make it more dandelion-like. I found the version on the right side to resemble a real dandelion more accurately, so I ultimately chose the recursive function corresponding to that shape. The transformation on the left side is another variation; (also, when using the recursive function corresponding to the right side, the shape appearing on the left side during mouseX movement is expected. Thus, I finally chose this function!)
Link to the Sketch: Dandeline GUI Ver 1
I was tempted to stop there. However, my common sense told me that would be too lazy. So, I reviewed the assignment requirements again and decided to add a scale function to the recursive function to see how it would affect the outcome.
Link to the Sketch: Dandeline GUI Ver 2
I feel the effect is more realistic now! I’m very satisfied. As for why I only translated two lines instead of the entire four, that’s because when I translated everything, the code stopped working TT. But I’m quite satisfied with the effect :DDD!
By changing its size, I made a new discovery. Sometimes, it feels like an iris to me, other times like a glint of light, occasionally resembling the patterns on trees, and at times, a bit like peacock feathers. So, I thought, perhaps adding variables for color could turn the dandelion into not just a dandelion but a representation of similarities among various things.
I added r,g, and b to the GUI and played with the colors. Accidentally, I created a jellyfish!
Link to the Sketch: Dandeline GUI Ver 3-1
I changed the background color to white to see how different effects would be achieved by doing so.
Link to the Sketch: Dandeline GUI Ver 3-2
I like their colors. However, I felt they lacked some layers in color, so I set up three sets of “dandelions” in the function draw, each with different scales, and I added GUI controls for their colors separately. This allowed for real-time changes to achieve a more layered and rich color variation.
Link to the Sketch: Dandeline GUI Ver 4
- Finished Works:
Dandelion and Universe
Iris
Wood
Peacock
Sunflower
- Reflections & Lessons Learned:
- Recursive functions;
- All things in the universe are interconnected.
- Do things earlier. Don’t start doing dandelion until the deadline is just one step away.💧
- Link to the Skeches:
Link to the Sketch: Dandeline GUI Ver 1
Link to the Sketch: Dandeline GUI Ver 2
Link to the Sketch: Dandeline GUI Ver 3-1
Link to the Sketch: Dandeline GUI Ver 3-2
Link to the Sketch: Dandeline GUI Ver 4
- Other Attempts
Wind~
Hyper!
Leave a Reply