hschung-Project-03

index

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-03

var eyeR = 0;

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

function draw() {
	background(86, 155, 148);
	fill(255, 255, 0);
	noStroke();
	//restrict mouseX to 0-400
	var m = max(min(mouseX), 30);
	var size = m * 150 / 300;

	ellipse(60 + m * 190 / 200, 200, //duck beak
		size + 60, size + 50);

	fill(230, 90, 100); //pink ring
	size = 350 - mouseX;
	ellipse(300, 200,
		size, size);

	fill(86, 155, 148); //circle with same tone as background
	size = 350 - size; //eclipses red circle and beak
	ellipse(200 + m * 100 / 400, 200,
		size + 40, size + 40);

	fill(20, 190, 100); //duck head
	size = 250 - size;
	ellipse(185 + m * 150 / 900, 200,
		size - 30, size - 30);


	fill(20, 190, 100);//duck body
	ellipse(340 + m * 250 / 300, 380, 380, 250);

	fill(86, 155, 148); //circle with same tone as background
	size = 350 - size; //to eclipse duck body
	ellipse(m * 2 - 200, 400, 300, 300);

	//if (x = 201 + m * 150 / 900) { ///change to white?
		//fill(255);
	// ellipse(200 + m * 150 / 900, 200,
	// 	size, size);

	fill(eyeR, 45, 45); //black eye
	size = 100;
	ellipse(m * 2 + 80, 190,
		40, 40);

	if (mouseX > 220) {

		// fill(0); //left eye
		// ellipse(160, 240, 40, 40);

		// fill(0); //right eye
		// ellipse(480, 240, 40, 40);
	
		// fill(255, 220, 0); //darker part of beak
		// ellipse(width / 2, height / 2, 140, 100);

		// fill(255, 255, 0); //brighter part of beak
		// ellipse(width / 2, height / 2 - 20, 140, 100);
		// ///

		var faceX = mouseX - 240; 

		fill(0); //left eye
		ellipse(faceX - 120, 240, 40, 40);

		fill(0); //right eye
		ellipse(faceX + 20, 240, 40, 40);

		fill(255, 220, 0); //darker part of beak
		ellipse(faceX - 50, 340, 140, 100);

		fill(255, 255, 0); //brighter part of beak
		ellipse(faceX - 50, 310, 140, 100);
	}

	if (mouseX > 300) {
		fill(230, 90, 100); //left pink cheek
		ellipse(mouseX - 400, mouseY, 60, 60);
		fill(230, 90, 100); //right pink cheek
		ellipse(mouseX - 180, mouseY, 60, 60);

	}

	// var faceX = mouseX-width/2;
	// ellipse(faceX, height/2, 10, 10);

}

I started off by drawing some shapes in colors I thought went well together. I ended up drawing a duck, and I wanted to transform its form to a something different, and I decided to change the position/view of the duck’s face.
(The duck face is manipulated by the mouse and it slides onto the duck’s head. I’m not sure why it’s not working in this embed, but it works in the browser.. it stays abstract, but it’s supposed to create the duck face looking to the right.)