Project 03: Dynamic Drawing

sketch
//Julianna Bolivar
//jbolivar
//section d
var x = 305; //center petal
var y = 225;
var y1 = 140; //petals
var py1 = 0; //petal velocities
var y2 = 180;
var py2 = 0;
var y3 = 180;
var py3 = 0;
var y4 = 270;
var py4 = 0;
var y5 = 270;
var py5 = 0;

function setup() {
    createCanvas(600, 450);
    py1 = 0; //petal velocitiess
    py2 = 0;
    py3 = 0;
    py4 = 0;
    py5 = 0;
}

function draw() {
    if (mouseX > width/2){     
        background(0, 51, 102); //mouseX in right is midnight blue
    }
    else {
        background(173, 216, 230); //mouse X in left in sky blue
    } 
    
    push();
    rotate(frameCount / 50.0);
    star(100, 100, 80, 100, 20); //sun 
    pop();
    
    fill(154, 205, 50);
    noStroke();
    rect(290, 250, 30, 400); //stem
    fill(255, 105, 180);
    circle(305, y1, 100); //top petal
    circle(380, y2, 100); //upper right petal
    circle(230, y3, 100); //upper left petal
    circle(245, y4, 100); //lower left petal
    circle(370, y5, 100); //lower right petal
    y1 += py1; 
    y2 += py2; 
    y3 += py3; 
    y4 += py4; 
    y5 += py5; 
    fill(255, 215, 0);
    circle(x, y, (100 + mouseY/3)); //center gets bigger with mouseY
} 

function mousePressed() { //petals fall on click
    py1 = 10;
    py2 = 9;
    py3 = 5;
    py4 = 10;
    py5 = 6;
}

function star(x, y, radius1, radius2, npoints) { //star spin
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
    endShape(CLOSE);
}

This was so difficult. Because my idea was very simple at first it ended up looking all over the place as I added elements. Some things I never figured out, like how I wanted the petals to change as they fall.

Leave a Reply