Interactive Processing Sketch – Sunflower

For my design, I wanted to incorporate layering many pieces to create my design, much like my inspiration piece. I was inspired by natural forms with repetition, so I decided to create a flower. I layered many circles with different fills and sizes in order to make the center of the flower. For the petals, I created lines using slight transparency in order to highlight where the shapes were overlapping. When the mouse is clicked, the sunflower turns into a daisy by changing the petal colors.

  

First Draft of Code:

void setup() {
size(800, 800); //size of canvas
}

void draw() {
background(18,135,175); //blue sky
//petals of flower
stroke(252,203,6,250); //yellow petals
if(mousePressed){ //if user clicks mouse,
stroke(236,227,211,250); //turns petals white
}
strokeWeight(60);
line(mouseX,mouseY,mouseX,mouseY-180);
line(mouseX,mouseY,mouseX,mouseY+180);
line(mouseX,mouseY,mouseX-180,mouseY);
line(mouseX,mouseY,mouseX+180,mouseY);

line(mouseX,mouseY,mouseX-130,mouseY-130);
line(mouseX,mouseY,mouseX+130,mouseY+130);
line(mouseX,mouseY,mouseX-130,mouseY+130);
line(mouseX,mouseY,mouseX+130,mouseY-130);

line(mouseX,mouseY,mouseX-70,mouseY-170);
line(mouseX,mouseY,mouseX+70,mouseY-170);
line(mouseX,mouseY,mouseX-70,mouseY+170);
line(mouseX,mouseY,mouseX+70,mouseY+170);

line(mouseX,mouseY,mouseX-170,mouseY-70);
line(mouseX,mouseY,mouseX+170,mouseY-70);
line(mouseX,mouseY,mouseX-170,mouseY+70);
line(mouseX,mouseY,mouseX+170,mouseY+70);

//center of flower
noStroke();
fill(183, 130, 6);
circle(mouseX, mouseY, 150);
fill(150, 98, 7);
circle(mouseX, mouseY, 130);
fill(109, 85, 3);
circle(mouseX, mouseY, 100);
fill(127, 120, 19);
circle(mouseX, mouseY, 90);
}

After this first draft of my code, I decided to incorporate for loops as well as an if else statement. I used for loops to liven up the visual by creating a gradient in the background which makes the sky appear more realistic, altering the colors of the fill. I also used an if else statement to have the flower ‘grow’ in a sense when a key is pressed. I added a flower stem, and when any key is pressed, a sun appears, the flower petals grow, and the stem of the flower grows leaves. When a key is not pressed, the flower reverts to its less-grown state.

  

Final Code:

void setup() {
size(800, 800); //size of canvas
}

void draw() {
noStroke();
for (int i=0; i<157; i++) {//makes 157 rectangles
fill(13+i, 89+i, 250+i); //Makes the fill of each rectangle lighter each loop
rect(0, i*5, 800, 22); //Adds rectangle that moves downward each loop
}
//flower petals
stroke(252, 203, 6, 240); //yellow
if (keyPressed == true) {
noStroke();
fill(245, 216, 69, 255);
circle(250, -200, 800);

//stem of flower
noStroke();
fill(#378143);
rect(mouseX-25, mouseY, 50, 800);

//leaves on stem
rect(mouseX-85, mouseY+250, 60, 80, 25, 25, 3, 25);
rect(mouseX+25, mouseY+350, 60, 80, 25, 25, 25, 3);
rect(mouseX-85, mouseY+450, 60, 80, 25, 25, 3, 25);
rect(mouseX+25, mouseY+550, 60, 80, 25, 25, 25, 3);
rect(mouseX-85, mouseY+650, 60, 80, 25, 25, 3, 25);
rect(mouseX+25, mouseY+750, 60, 80, 25, 25, 25, 3);

//flower petals
stroke(252, 203, 6, 240); //yellow
strokeWeight(80);

line(mouseX, mouseY, mouseX, mouseY-190);
line(mouseX, mouseY, mouseX, mouseY+190);
line(mouseX, mouseY, mouseX-190, mouseY);
line(mouseX, mouseY, mouseX+190, mouseY);

line(mouseX, mouseY, mouseX-140, mouseY-140);
line(mouseX, mouseY, mouseX+140, mouseY+140);
line(mouseX, mouseY, mouseX-140, mouseY+140);
line(mouseX, mouseY, mouseX+140, mouseY-140);

line(mouseX, mouseY, mouseX-80, mouseY-180);
line(mouseX, mouseY, mouseX+80, mouseY-180);
line(mouseX, mouseY, mouseX-80, mouseY+180);
line(mouseX, mouseY, mouseX+80, mouseY+180);

line(mouseX, mouseY, mouseX-180, mouseY-80);
line(mouseX, mouseY, mouseX+180, mouseY-80);
line(mouseX, mouseY, mouseX-180, mouseY+80);
line(mouseX, mouseY, mouseX+180, mouseY+80);

//center of flower
noStroke();
fill(183, 130, 6);
circle(mouseX, mouseY, 150);
fill(150, 98, 7);
circle(mouseX, mouseY, 130);
fill(109, 85, 3);
circle(mouseX, mouseY, 100);
fill(127, 120, 19);
circle(mouseX, mouseY, 90);
} else {
//stem of flower
noStroke();
fill(#378143);
rect(mouseX-25, mouseY, 50, 800);

//flower petals
stroke(252, 203, 6, 240); //yellow
strokeWeight(80);

strokeWeight(60);
line(mouseX, mouseY, mouseX, mouseY-180);
line(mouseX, mouseY, mouseX, mouseY+180);
line(mouseX, mouseY, mouseX-180, mouseY);
line(mouseX, mouseY, mouseX+180, mouseY);

line(mouseX, mouseY, mouseX-130, mouseY-130);
line(mouseX, mouseY, mouseX+130, mouseY+130);
line(mouseX, mouseY, mouseX-130, mouseY+130);
line(mouseX, mouseY, mouseX+130, mouseY-130);

line(mouseX, mouseY, mouseX-70, mouseY-170);
line(mouseX, mouseY, mouseX+70, mouseY-170);
line(mouseX, mouseY, mouseX-70, mouseY+170);
line(mouseX, mouseY, mouseX+70, mouseY+170);

line(mouseX, mouseY, mouseX-170, mouseY-70);
line(mouseX, mouseY, mouseX+170, mouseY-70);
line(mouseX, mouseY, mouseX-170, mouseY+70);
line(mouseX, mouseY, mouseX+170, mouseY+70);

//center of flower
noStroke();
fill(183, 130, 6);
circle(mouseX, mouseY, 150);
fill(150, 98, 7);
circle(mouseX, mouseY, 130);
fill(109, 85, 3);
circle(mouseX, mouseY, 100);
fill(127, 120, 19);
circle(mouseX, mouseY, 90);
}
}

Leave a reply

Skip to toolbar