Assignment 2: Flowers in the Wind

For this week’s assignment, we were asked to create a peice of artwork utilizing loops. I struggled to think of a concept at first, but while walking around the campus, inspiration struck. I saw flowers across the campus moving in the wind. Thus, my assignment takes inspiration from that image.

In my peice, 10 flowers are randomly generated throughout the canvas, with their size and color also being randomized.

I had to watch some tutorials in order to understand the way angles worked in p5.js to get my flowers to spin. Due to this learning curve, I am especially proud of the rotation of the flowers within my peice. It took quite some time for me to get the hang of it, but it made the end result all the more satisfying to accomplish.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function draw() {
//refreshing the background each time
background("#9dc183");
//iterating over every item in the flower array
for (let flower of flowers) {
push();
//makes the drawing start at the center of the flower
translate(flower.x, flower.y);
//makes the flower spin from the center
rotate(flower.angle);
drawFlower(flower.size, flower.color);
pop();
flower.angle += spinSpeed;
}
//if statement that will call the generate flower function as long as the flower array isnt longer than 10 and will generate every second
if (flowers.length < maxFlowers && frameCount % 60 == 0) {
generateFlower();
}
}
function draw() { //refreshing the background each time background("#9dc183"); //iterating over every item in the flower array for (let flower of flowers) { push(); //makes the drawing start at the center of the flower translate(flower.x, flower.y); //makes the flower spin from the center rotate(flower.angle); drawFlower(flower.size, flower.color); pop(); flower.angle += spinSpeed; } //if statement that will call the generate flower function as long as the flower array isnt longer than 10 and will generate every second if (flowers.length < maxFlowers && frameCount % 60 == 0) { generateFlower(); } }
function draw() {
  //refreshing the background each time
  background("#9dc183");
  

  //iterating over every item in the flower array
  for (let flower of flowers) {
    push();
    //makes the drawing start at the center of the flower
    translate(flower.x, flower.y);
    //makes the flower spin from the center
    rotate(flower.angle);
    drawFlower(flower.size, flower.color);
    pop();
    flower.angle += spinSpeed;
  }

  //if statement that will call the generate flower function as long as the flower array isnt longer than 10 and will generate every second
  if (flowers.length < maxFlowers && frameCount % 60 == 0) {
    generateFlower();
  }
}

 

Initially I had wanted a more detailed background for my peice, rather than a solid color, however, I struggled with the background flickering every frame. Another thing I think that can be further improved on is the variety of flowers chosen. It would be fun to implement more kinds of flowers, rather than simply just having them in different colors.

Leave a Reply