Concept: My interactive media class starts just at the end of the day and when I was sitting in the class, brainstorming what I do with loops, I randomly started to draw some simple flowers on P5.js to relieve some stress from having a long day. Then the idea came to my head that having a flower bouquet can make me feel so good, if I don’t have one, then why not create a virtual one? So, here it is!
Proud Moment: I initially sketched some basic flower-like shapes using circles in P5.js, but they didn’t turn out as expected. To achieve the variety and complexity I wanted, I decided to use loops directly as we discussed in class, as manually coding each flower would have been impractical. My main challenge was ensuring that all the flowers had distinct appearances. To address this, I designed each flower type, reusing a base code and adjusting parameters to create different flower variations.
Code Snippet:
function drawDaisy(x, y, size, rotation) {
let petalCount = 9;
let petalLength = size;
let petalWidth = size / 3;
stroke(0);
fill('#D9E4E6');
push();
translate(x, y);
rotate(rotation);
for (let i = 0; i < petalCount; i++) {
push();
rotate(TWO_PI / petalCount * i);
ellipse(0, -size / 2, petalWidth, petalLength);
pop();
}
pop();
fill('#F2F2F2');
noStroke();
ellipse(x, y, size / 2);
}
function drawTulip(x, y, size, rotation) {
let petalCount = 6;
let petalWidth = size / 2;
stroke(0);
fill('#AEB7FE');
push();
translate(x, y);
rotate(rotation);
for (let i = 0; i < petalCount; i++) {
push();
rotate(TWO_PI / petalCount * i);
ellipse(0, -size / 2, petalWidth, size);
pop();
}
pop();
fill('#EDEAE6');
noStroke();
ellipse(x, y, size / 3);
}
It made the design part of my work easier, but I initially struggled with making the flowers continuously generate as the mouse cursor moves and ensuring they didn’t cluster in one spot. To address this, I turned to various YouTube videos on Mouse Trails, such as the p5.js | Mouse Trail (Quick Code) tutorial. However, I needed to adapt some parameters and functions to fit my specific goals, which differed slightly from those demonstrated in the videos. This aspect of the project was particularly challenging as I had to first grasp the underlying logic before implementing the necessary code to achieve the desired functionality.
In mouseMoved() Function, I’m implementing the logic to generate new flowers as the mouse moves across the canvas. Here’s a breakdown:
function mouseMoved() {
let currentTime = millis();
if (currentTime - lastGenerationTime > flowerGenerationInterval) {
lastGenerationTime = currentTime;
generateFlowers(mouseX, mouseY);
}
}
function updateFlower(flower) {
let dx = mouseX - flower.x;
let dy = mouseY - flower.y;
let distance = dist(flower.x, flower.y, mouseX, mouseY);
if (distance > 1) {
flower.x += (dx / distance) * followSpeed;
flower.y += (dy / distance) * followSpeed;
}
flower.x += random(-0.5, 0.5);
flower.y += random(-0.5, 0.5);
}
I use millis() to get the current time in milliseconds since the sketch started. By comparing it to lastGenerationTime, I ensure that new flowers are only generated after a specified interval (flowerGenerationInterval). This prevents an overwhelming number of flowers from being created all at once.
When the time condition is met, I update lastGenerationTime and call generateFlowers() with the current mouse position (mouseX, mouseY). This function creates flowers around the mouse cursor, adding to the visual interest as I move the mouse.
Then, I calculate the distance between the flower and the mouse cursor using dx and dy. If the distance is greater than 1 pixel, the flower moves towards the mouse position. The followSpeed controls how quickly the flower moves. By dividing dx and dy by the distance, I ensure that the flower moves in the correct direction and scales its speed relative to the distance. While there might be other efficient ways to implement this, I chose this manual approach by carefully considering the underlying logic.
After watching the video “Eyeo2012 – Casey Reas,” I decided to introduce some randomness into the flower movement. I added the last two lines of code to make the movement more natural and less mechanical by including a small random offset to the flower’s position. This randomness results in a more organic and unpredictable motion, enhancing the overall visual appeal.
However, I was confused about which version to use as my final submission because each offers a unique vibe that I find appealing. To showcase the contrast, I am also including my first draft as a media file. This allows for a comparison between the two iterations, each with its distinct style and feel.
First Draw:
Reflection and Ideas for Future Work or Improvements:
By using loops and arrays, I was able to efficiently generate and manage an infinite number of flowers, ensuring that the animation remained dynamic and engaging. The code successfully used these loops to update the positions of the flowers and arrays to store and retrieve flower properties, which was crucial for managing the large number of elements and their interactions. Here is what I think can be done in the future:
Performance Optimization: I encountered performance issues when increasing the number of flowers. For instance, trying to use infinitely many flowers caused the webpage to lag, highlighting the need for optimization to handle more elements smoothly. Addressing this performance challenge would help in making the animation more fluid and responsive.
Color Combinations: The current color scheme for the flowers and background could be improved. Some color combinations might not be as visually appealing or harmonious as they could be. Experimenting with different palettes could enhance the overall aesthetic and make the animation more striking.
User Interface and Interactivity: I initially experimented with aligning flowers based on input words, but this approach did not work as intended. Consequently, I simplified the project to focus solely on basic typography and the interactive aspect of the flowers following the mouse cursor. Future iterations could benefit from refining this concept or incorporating new interactive features to give users more control.
Conclusion: Despite these areas for improvement, I am pleased with the overall vibe of the project. The use of rotation to animate the flowers adds a dynamic touch, enhancing the visual interest of the animation. I enjoy the lively and engaging feel it provides and look forward to further refining and expanding upon this project in the future.
