Project 3 – Sara Frankel Dynamic Drawing

sketch

//flower size
var fradius1 = 30;
var fradius2 = 60;
var fradius3 = 120;
//petal size
var pradius1 = 4;
var pradius2 = 80;
var pradius3 = 160;
//number of petals on flower
var numpetals = 6;
//Boolean if mouse on flower
var onFlower1 = false;
var onFlower2 = false;
var onFlower3 = false;
//color of flower
var fcolor1 = 'yellow';
var fcolor2 = 'yellow';
var fcolor3 = 'yellow';
//color of petal
var pcolor1 = 255; 
var pcolor2 = 255;
var pcolor3 = 255;
//color of text & boolean of if mouse is on text
var textcolor = 255;
var ontext = false;

function setup() {
    createCanvas(480, 640);
}

function draw() {
	noStroke();
	background('blue');
	//change background color according to mouseX
	if (mouseX <= width/2) {
		background('orange');
	}

	//to insert text and change the color of text according to position of mouse
	fill(textcolor);
	if (mouseX <= width/2) {
		text('Oopsie Daisy', 10,30);
		}	
	if (mouseX >= 10 & mouseY <= 30 && mouseX<=100 && mouseY >= 15) {
		if (!ontext) {
		textcolor = color(random(0,255), random(0,255), random(0,255));
		}  ontext = true;
		} else {
			ontext = false;
			textcolor = 255;
	}

	if (mouseX <= width & mouseY <= height) {
		numpetals = 2*mouseX/48 + 6; //changing the number of petals dependant on mouse
		pradius1 = mouseX/48 * 4 + 4; //modifying radius of petals based on mouse
		pradius2 = mouseX/48 * -8 + 80;
		pradius3 = mouseX/48 * -16 + 160;
	}
	
	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width/4) * (mouseX - width/4) + (mouseY - height*0.20) * (mouseY - height*0.20) < fradius1 * fradius1) {
		if(!onFlower1) {
			fcolor1 = random(0,255);
			pcolor1 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower1 = true;
	} else { 
		onFlower1 = false;
		fcolor1 = 'yellow';
		pcolor1 = 255;
	}
	fill(fcolor1);
	ellipse(width*0.25, height*0.20, fradius1, fradius1); // drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.75) * (mouseX - width*0.75) + (mouseY - height*0.30) * (mouseY - height*0.30) < fradius2 * fradius2) {
		if(!onFlower2) {
			fcolor2 = random(0,255);
			pcolor2 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower2 = true;
	} else  {
		onFlower2 = false;
		fcolor2 = 'yellow';
		pcolor2 = 255;
	}
	fill(fcolor2);
	ellipse(width*0.75, height*0.30, fradius2, fradius2);// drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.4) * (mouseX - width*0.4) + (mouseY - height*0.65) * (mouseY - height*0.65) < fradius3 * fradius3) {
			if(!onFlower3) {
				fcolor3 = random(0,255);
				pcolor3 = color(random(0,255), random(0,255), random(0,255));
			}
			onFlower3 = true;
		} else  {
			onFlower3 = false;
			fcolor3 = 'yellow';
			pcolor3 = 255;
		}
			fill(fcolor3);
	ellipse(width*0.4, height*0.65, fradius3, fradius3);// drawing the center of flower


	//flower 1 (top left)
	fill(pcolor1); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < 24-numpetals; i++) { //flower that grows proportionately in the opposite direction as the other flowers
		var angle = i * radians(360/(24-numpetals));
		ellipse(width * 0.25 + (fradius1/2 + pradius1/2) * cos(angle), height * 0.20 + (fradius1/2 + pradius1/2) * sin(angle), pradius1, pradius1);
	}
	
	//flower 2 (top right)
	fill(pcolor2); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.75 + (fradius2/2 + pradius2/2) * cos(angle), height * 0.30 + (fradius2/2 + pradius2/2) * sin(angle), pradius2, pradius2);
	}
	//flower 3 (bottom)
	fill(pcolor3); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.4 + (fradius3/2 + pradius3/2) * cos(angle), height * 0.65 + (fradius3/2 + pradius3/2) * sin(angle), pradius3, pradius3);
	}

}

For this project, I decided to use daisies as my inspiration. At first I was kind of confused as to how I was going to execute this image, but after planning it out and figuring out the appropriate code for each movement, I was able to successfully draw this out.