Dani Delgado Project-03 – Dynamic Drawing

sketch

/*Dani Delgado 
Section E
ddelgad1@andrew.cmu.edu
Project-03
*/

//background color variables
var bgB = (20, 100);
var bgG = (20, 100);

//line weight variables
var rectW = 40;
var rectX = rectW * 2;

//angles for rotation
var a1 = 0;

//moon growing variable
var moong = 100;
var speed = 3;
var direc = 1; 

//eye glow variables
var eyeLW = 0;
var eyeLH = 0;
var eyeRW = 0;
var eyeRH = 0;

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

function draw() {
	//color changing background; constrain the colors to make it appear darker
	bgR = mouseX;
	bgB = constrain(mouseX, 10, 100);
	bgG = constrain(mouseY, 20, 100);

	background (10, bgG, bgB);

	//draw the moon
	//the moon rotates based on the mouseY coordinate 
	fill(215, 211, 190);
	push();
	a1 = (mouseY / height) * 180;
	rotate(radians(a1));
	ellipse(20, 10, 225, 225);
	pop();
	a1 = a1 - 3;

	//draw the "trees" that are behind the primary animal
	fill (60, 34, 10);
	rect(rectX - 80, 0, rectW, height);
	rect(rectX * 2, 0 , rectW, height);
	rect(rectX * 4, 0, rectW, height);
	rect(rectX * 6, 0, rectW - 6, height);
	rect(rectX, 0, rectW - 14, height);

	//draw the yellow moving bird which moves on the -mouseX and -mouseY coordinates 
	//start with the bird body
	fill(255, 221, 51);
	ellipse(-mouseX + 640, -mouseY + 480, 40, 40);
	//make bird tail
	triangle(-mouseX + 655, -mouseY + 510, -mouseX + 700, -mouseY + 515, -mouseX + 705, -mouseY + 525);
	//make bird eye and beak
	fill(20);
	ellipse(-mouseX + 649, -mouseY + 488, 10, 10);
	fill(255, 140, 25);
	triangle(-mouseX + 635, -mouseY + 500, -mouseX + 640, -mouseY + 505, -mouseX + 640, -mouseY + 495);

	//draw the red moving bird which moves on the mouseX and mouseY coordinates
	//start with the bird body
	fill(255, 120, 51);
	ellipse(mouseX, mouseY, 40, 40);
	//make bird tail
	triangle(mouseX + 15, mouseY + 30, mouseX + 60, mouseY + 35, mouseX + 65, mouseY + 45);
	//make bird eye and beak
	fill(20);
	ellipse(mouseX + 9, mouseY + 8, 10, 10);
	fill(255, 140, 25);
	triangle(mouseX - 5, mouseY + 20, mouseX, mouseY + 25, mouseX , mouseY + 15);


	// draw the "trees" that are in front of the moving birds 
	noStroke();
	fill(60, 34, 10);
	rect(rectX * 3, 0, rectW, height);
	rect(rectX * 5, 0, rectW, height);
	rect(rectX * 7, 0, rectW - 2, height);
	rect(rectX, 0, rectW - 10, height);

	//draw the primary animal
	//draw the body of the primary animal
	fill(82, 48, 0);
	rect(width / 3.20, height / 1.5, 300, 200, 90, 90, 0, 0);
	//draw the belly fur highlight
	fill(130, 90, 10);
	rect(width / 2.28, height / 1.10, 150, 60, 90, 90, 0, 0);
	//draw primary animal's head
	//draw the basic head shape (circle)
    fill(102, 68, 0);
    ellipse(width / 2.5, height / 2.5, 200, 200);
    //draw the facial features (ears, snout, nose)
    arc(width / 2 - 70, height / 2.5 + 10, 60, 65, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 20, height / 2.5 + 10, 60, 65, 3.75, 8, PI + QUARTER_PI, OPEN);
	fill(150, 100, 10);
	arc(width / 2 - 60, height / 2.5 + 25, 28, 32, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 5, height / 2.5 + 25, 28, 32, 3.75, 7.5, PI, OPEN);

	ellipse(width / 2.5 + 50, height / 1.6, 100, 70);
	fill(60, 8, 0);
	ellipse(width / 2 + 16, height / 1.43, 40, 30);

	//draw the eyes
	//eyes will glow when you mouse over them 
	eyeLW = width / 2 - 25;
    eyeLH = height / 2 + 15;
    eyeRW = width / 2 + 60;
    eyeRH = height / 2 + 15;

    var eyedim = 35 
	if ((mouseX > eyeLW) & (mouseX < eyeLW + eyedim) &&
		(mouseY > eyeLH) && (mouseY < eyeLH + eyedim) ||
		(mouseX > eyeRW) & (mouseX < eyeRW + eyedim) &&
		(mouseY > eyeRH) && (mouseY < eyeRH + eyedim)) {
		fill(255, 238, 153);
	} else {
		fill(60, 8, 0);
	}
	ellipse(eyeLW, eyeLH, eyedim, eyedim);
	ellipse(eyeRW, eyeRH, eyedim, eyedim);
}

I started out this project in a very abstract way, only drawing moving ellipses and rectangles that followed the mouse at varying degrees of offset. However, when I woke up one day this week and my first thought was about an animal in the woods, I decided that exploring that concept would be a cute direction. And so, I drew this little scene.