KadeStewart-Project03-DynamicDrawing

sketch

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
    rectMode(CENTER);
}

function draw() {
	background(64, 85, 147);

	arrow();

	cupid();

	love();
	
	animation();


}

function arrow() {
	noStroke();

	//this makes the arrow move as you drag your mouse to the left
	if (mouseX <= 500) {
		push();
		var pty = 480;
		var ptx = 100;
		translate(ptx, pty);
		var arrowX = mouseX - 167;
		if (mouseX < 167) {
			arrowX = 0; 	//only move the arrow when the cursor is beyond the bow
		} else if (mouseX > 500) {
			arrowX = 500 - 167; //don't move the arrow after it's landed
		}
		rotate(arrowX/5);
		fill(255); //arrow color
		rect(167 - ptx, 137 - pty, 55, 5, 2);

		//arrowhead (or a sideways heart 😉
		fill(217, 158, 196);
		push();
		translate(167 + 55/2 - ptx, 140 - pty);
		rotate(90 - 25.74);
		ellipse(0, 0, 13, 23);
		pop();

		push();
		translate(167 + 55/2 - ptx, 134 - pty);
		rotate(90 + 25.74);
		ellipse(0, 0, 13, 23);
		pop();

		pop();
	}
		
}



//draws cupid in the top left corner
function cupid() {
	//wings
	noStroke();
	fill(254, 245, 231); //wing color
	ellipse(73, 153, 39, 39);

	push();
	translate(48, 160);
	rotate(-320.6);
	ellipse(0, 0, 16, 47);
	pop();

	push();
	translate(60, 170);
	rotate(-334.96);
	ellipse(0, 0, 16, 47);
	pop();

	push();
	translate(74, 172);
	rotate(-347.38);
	ellipse(0, 0, 16, 47);
	pop();

	//bow
	stroke(169, 124, 80);
	strokeWeight(4);
	noFill();
	curve(0, 0, 160, 106, 160, 168, 160, 168);


	//head
	noStroke();
	fill(255, 224, 189); //skin color
	ellipse(99, 101, 88, 88);

	//body
	ellipse(110, 160, 59, 59);

	//hand
	ellipse(167, 137, 19, 19);

	//cheeks
	fill(249, 191, 203); //cheek color
	ellipse(103, 124, 8, 8);
	ellipse(139, 96, 8, 8);

	//diaper
	fill(254, 245, 231); //diaper color
	arc(110, 160, 59, 59, 0, 180);
}

//draws the two love birds
function love() {
	fill(0)
	noStroke();
	ellipse(440, 440, 31, 31);
	triangle(475, 450, 507, 460, 495, 423);
	fill(255, 224, 189);
	ellipse(430, 411, 38, 38);
	ellipse(501, 411, 38, 38);


	//uncomment for a surprise!
	// noStroke();
	// fill(255, 255, 0);
	// //body
	// rect(width/2, height/2, 75, 45, 5, 20, 35, 35);
	// //neck
	// rect(width/2 + 25, height/2 - 60/2, 25, 45);
	// //head
	// rect(width/2 + 40, height/2 - 60, 55, 40, 20, 30, 5, 10);
	
	// //eyes
	// fill(0);
	// rect(width/2 + 50, height/2 - 60, 5, 5, 5)
	
	// //mouth
	// fill(255, 165, 0);
	// rect(width/2 + 75, height/2 - 47, 30, 15, 5, 10, 15, 5)
	// //legs
	// rect(width/2, height/2 + 35, 8, 25, 10);
	// rect(width/2 + 3, height/2 + 45, 15, 8, 10);



	

	//draws the hearts as you move your mouse to the right
	for (i = 540; i <= mouseX; i += 10) {
		if (mouseX < width) {
			//alternates which side the hearts are drawn on
			if ((i/10)%2 == 0) {
				x = 433;
			} else {
				x = 506;
			}

			fill(217, 158, 196);
			noStroke();
			push();
			translate(x - 4, 370 - 2*(i - 540));
			rotate(150);
			ellipse(0, 0, 13, 23);
			pop();

			push();
			translate(x + 4, 370 - 2*(i - 540));
			rotate(30);
			ellipse(0, 0, 13, 23);
			pop();
		}
			
	}

}

//controller of the animation that happens when the arrow makes the two fall in love
function animation() {
	var lineLength = 1
	//the first part grows the burst lines, the second part shrinks the burst lines
	if (mouseX > 500 & mouseX <= 520) {
		lineLength = (mouseX - 500) * 2;
		noFill();
		stroke(253, 253, 150);
		strokeWeight(4);
		for (i = 1; i <= 16; i++) {
			line(460 + (lineLength * cos((360/16)*i)), 
				 440 + (lineLength * sin((360/16)*i)),
				 460, 440);
		}
	} else if (mouseX > 520 & mouseX < 540) {
		lineLength = (540 - mouseX) * 2;
		noFill();
		stroke(253, 253, 150);
		strokeWeight(4);
		for (i = 1; i <= 16; i++) {
			line(460 + (lineLength * cos((360/16)*i)), 
				 440 + (lineLength * sin((360/16)*i)),
				 460, 440);
		}
	}
}

Love is cute and I didn’t have great ideas for my project, so I decided to show how love REALLY works.