Catherine Coyle – Project 03 – Dynamic Drawing

catherine drawing

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-03 Dynamic Drawing


var skyColor = 80;
var sunColor = 0;
var cloudPosition = 1;
var oldX = 0;
var currX = 1;
var dir = 'right';
var angle = 0;
var targetX = 0;
var targetY = 0;
var diffX = 1;
var diffY = 1;


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

function draw() {
	// sky darkens
	background(skyColor, skyColor * 2, skyColor * 4);
	noStroke();
	// sun/moon
	fill(255, 212 + (sunColor / 5), sunColor);
	ellipse(width / 2, height, 250, 250);
	fill(255, 212 + (sunColor / 5), sunColor, 50);
	ellipse(width / 2, height, 300, 300);
	fill(255, 212 + (sunColor / 5), sunColor, 25);
	ellipse(width / 2, height, 400, 400);
	// rays will rotate based on mouseY value
	push();
	translate(width / 2, height);
	rotate(angle);
	fill(255, 212 + (sunColor / 5), sunColor, 70);
	rect(145, 0, 25, 40);
	rect(-145, 0, 25, 40);
	rect(0, 145, 40, 25);
	rect(0, -145, 40, 25);
	pop();
	// bird will change the way its facing based on the mouse
	currX = mouseX
	if (currX > oldX) {
		dir = 'right';
	} else if (currX < oldX) {
		dir = 'left';
	}
	// drawing it based on direction
	if (dir == 'right') {
		// beak
		fill(252, 194, 118);
		triangle(mouseX, mouseY, mouseX - 20, mouseY + 10, mouseX - 20, mouseY - 10,)
		// bird body
		fill(232, 95, 117);
		ellipse(mouseX - 20, mouseY, 20, 20);
		triangle(mouseX - 30, mouseY, mouseX - 40, mouseY + 10, mouseX - 40, mouseY - 10)
		fill(0);
		ellipse(mouseX - 20, mouseY, 10, 10);
	} else {
		// beak
		fill(252, 194, 118);
		triangle(mouseX, mouseY, mouseX + 20, mouseY + 10, mouseX + 20, mouseY - 10,)
		// bird body
		fill(232, 95, 117);
		ellipse(mouseX + 20, mouseY, 20, 20);
		triangle(mouseX + 30, mouseY, mouseX + 40, mouseY + 10, mouseX + 40, mouseY - 10)
		fill(0);
		ellipse(mouseX + 20, mouseY, 10, 10);
	}
	// flock of birds trails the main one
	// i got the basic format for this 'easing' from the class website
	diffX = mouseX - targetX;
    diffY = mouseY - targetY;
    targetX = targetX + 0.1 * diffX;
    targetY = targetY + 0.1 * diffY;
    fill(155, 29, 44);
    if (dir == 'right') {
    ellipse(targetX - 75, targetY - 30, 15, 15);
    ellipse(targetX - 75, targetY + 30, 15, 15);
    ellipse(targetX - 150, targetY - 60, 15, 15);
    ellipse(targetX - 150, targetY + 60, 15, 15);
	} else {
		ellipse(targetX + 75, targetY - 30, 15, 15);
    	ellipse(targetX + 75, targetY + 30, 15, 15);
   		ellipse(targetX + 150, targetY - 60, 15, 15);
    	ellipse(targetX + 150, targetY + 60, 15, 15);
	}
	// clouds move opposite to the bird
	fill(227, 235, 239);
	rectMode(CENTER);
	cloudPosition = width - mouseX
	rect(cloudPosition + 50, 350, 100, 40);
	rect(cloudPosition + 30, 370, 100, 40);
	rect(cloudPosition - 150, 200, 100, 40);
	rect(cloudPosition - 180, 180, 100, 40);
	rect(cloudPosition - 350, 275, 120, 30);
	rect(cloudPosition - 380, 290, 80, 20);
	// sky darkens as bird moves
	skyColor = 80 - (mouseX / 10);
	sunColor = mouseX / 2.5;
	// adjusting various variables for the next frame (movement)
	oldX = currX
	angle = mouseY / 50;
}

I was not really sure what to do when starting this project. I started doodling a little bit and just came up with the idea of a migrating flock of birds. I wanted it to be cute and simple, but also incorporate some of the things we learned this week. I’m still not the biggest fan of rotation, but I think this project helped me get the hang of it a little better.

Here is my doodle from when I came up with the idea: