Jonathan Liang – Project 03 – Dynamic Drawing

Move the cursor left and right and also try clicking the mouse.

sketch

//Jonathan Liang
//Section A 
//jliang2@andrew.cmu.edu
//Project-03-Dynamic Drawing


var head = 350;
var mouthColor = 0;
var col = {
	r: 255,
	g: 0,
	b: 0,
};
var flag = true;

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

function draw() {
	col.r = random(0, 255);
	col.g = random(0, 255);
	col.b = random(0, 255);

//background
	if (flag == true) {
		background(col.r, col.b, col.g);
	}	else {
		background('black');
	}
	

//left ear
	noStroke();
	fill('white');
	ellipse(180, 115, 140, 140);

	noStroke();
	fill(188, 166, 222);
	ellipse(215, 125, 65, 80);
	ellipse(188, 108, 105, 80);

	noStroke();
	fill(252, 250, 92);
	ellipse(140, 95, 30, 50);
	ellipse(169, 125, 61, 65);

	noStroke();
	fill('white');
	ellipse(180, 140, 45, 45);
	ellipse(220, 90, 30, 30);

	strokeWeight(15);
	stroke('black');
	noFill();
	ellipse(185, 130, 55, 75);

//right ear
	noStroke();
	fill('white');
	ellipse(460, 115, 140, 140);

	noStroke();
	fill(156, 226, 233);
	ellipse(460, 140, 90, 33);
	ellipse(490, 126, 42, 44);

	noStroke();
	fill(237, 97, 155);
	ellipse(415, 145, 35, 125);
	ellipse(445, 96, 75, 75);

	noStroke();
	fill('white');
	ellipse(440, 120, 45, 65);
	ellipse(490, 100, 45, 40);

	strokeWeight(13);
	stroke('black');
	noFill();
	ellipse(460, 115, 42, 42);

	strokeWeight(17);
	stroke('black');
	noFill();
	ellipse(430, 150, 42, 42);




//constants for head
	noStroke();
	fill('white');
	ellipse(320, 240, head, 250);

	noStroke();
	fill(128, 255, 191);
	ellipse(180, 260, 40, 25);

	noStroke();
	fill(255, 225, 77);
	ellipse(460, 260, 40, 25);

	noStroke();
	fill('pink');
	ellipse(180, 260, 30, 15);

	noStroke();
	fill('pink');
	ellipse(460, 260, 30, 15);

//smile
	noStroke();
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	arc(320, 275, 312, 165, 0, PI, CHORD);
	


//teeth
	strokeWeight(1);
	stroke('white');
	noFill();
	line(164, 275, 184, 315);
	line(184, 315, 204, 275);
	line(204, 275, 230, 340);
	line(230, 340, 260, 275);
	line(260, 275, 290, 355);
	line(290, 355, 320, 275);
	line(320, 275, 350, 355);
	line(350, 355, 380, 275);
	line(380, 275, 410, 340);
	line(410, 340, 436, 275);
	line(436, 275, 456, 315);
	line(456, 315, 476, 275);

	

//left eye
	translate(180, 100);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(5);
	stroke(237, 97, 155);
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .9, size * .9);

//right eye
	translate(130, 0);

	strokeWeight(3);
	stroke('cyan');
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .40, size * .40);

//left pupil
	translate(-130, 0);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(10);
	stroke(255 - eyeColor, 51, 51);
	noFill();
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .19, size * .19);

//right pupil
	translate(130, 0);

	strokeWeight(7);
	stroke(170, 255 - eyeColor, 0);
	noFill();
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .04, size * .04);

    
}

function mousePressed() {
	if (flag == true) {
		flag = false;
	} else {
		flag = true;
	}




}

I am a big fan of Takeshi Murakami’s work and especially of his style Superflat. My project is taking his style and trying to bring it to life and have elements move. This project was difficult to start because of its open-ended nature. However, I did appreciate that aspect because it allowed me to experiment with many things.