Project 03 – Interactive Flower

flowergrowDownload
var h = 10
var angle = 0
var color = 0
var clouda = -100
var cloudb = clouda + 100

function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	if (color == 0) {
		background(255, 128, 188);
	} else {
		background(0, 154, 255);
	}
	if (mouseIsPressed) {
        fill(255);
        ellipse(clouda, 100, 150, 75);
        ellipse(cloudb, 250, 110, 90);
        clouda = clouda + 2
        cloudb = cloudb + 2
        if (clouda >= 450) {
            clouda = -100
            cloudb = clouda + 100
        }
	}
	strokeWeight(h);
	stroke(0, 255, 0);
	line(225, 600, 225, max(mouseY, 200)); //stem gets taller as mouseY gets lower
	if (mouseY < 500) {
		fill(0, 255, 0);
		ellipseMode(CORNER);
		ellipse(225, max(mouseY, 300), min(600 - mouseY, 200), constrain(600 - 2*mouseY, 50, 100));
		//leaf grows as the stem grows
	}
	fill(255, 0, 119);
	noStroke();
	if (mouseY >= 200) {
		ellipseMode(CENTER);
	    ellipse(225, max(mouseY, 200), max(min(600 - mouseY, 200), 0));
	    //flower bud grows as mouseY gets lower
	} else {
		push();
		translate(225, 200);
		rotate(radians(angle));
		fill(255, 0, 119);
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-100, -30);
		curveVertex(-30, -100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(30, -100);
		curveVertex(100, -30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(100, 30);
		curveVertex(30, 100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-30, 100);
		curveVertex(-100, 30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		pop();
        angle = angle + 5
        //spinning flower petals are pretty!
	}
}

function mousePressed(){
    if (dist(mouseX, mouseY, 225, 200) <= 100) {
    	color = 1
    } else {
    	color = 0
    }
}

Leave a Reply