Project1 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(400, 400);
    background(73, 153, 173);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
	createCanvas(400, 400);
	background(128, 127, 128);

	//background design
	stroke(255);
	strokeWeight(5);
	if(mouseIsPressed){
		fill(102, 193, 224);
	} else {
		fill(233, 210, 218);
	}
	rect(30, 30, 340, 340);

	//head + neck
	noStroke();
	fill(231, 175, 132);
	ellipse(200, 260, 100, 120);
	fill(231, 175, 132);
	rect(190,310, 20, 30);	
	
	//shirt
	fill(53, 0, 5);
	rect(130, 340, 140, 60, 30, 30, 0 ,0);
	fill(255, 255, 255);
	triangle(200, 340, 180, 340, 190, 330);
	fill(255, 255, 255);
	triangle(200, 340, 220, 340, 210, 330);
	
	//buttons on shirt
	fill(255, 255, 255);
	ellipse(200, 350, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 370, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 390, 5, 5);
	
	//eyes + glasses
	fill(0, 0, 0);
	ellipse(170, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(170, 260, 15, 15);
	fill(0, 0, 0);
	ellipse(210, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(210, 260, 15, 15);
	fill(0, 0, 0);
	rect(180, 258, 20, 3);
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(170, 260, 8, 8, PI, 0);
	stroke(0);
	strokeWeight(2);
	arc(210, 260, 8, 8, PI, 0);

	//mouth
	noStroke();
	fill(193, 52, 27);
	arc(190, 290, 15, 15, 2*PI, (3/4)*PI, OPEN);

	//hair
	fill(0, 0, 0);
	arc(200, 220, 80, 40, PI, 0, CHORD);
	fill(0, 0, 0);
	ellipse(235, 235, 20, 40);
	fill(0, 0, 0);
	ellipse(238, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(240, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(242, 255, 20, 40);

}

This experience was very eye opening for me. I have never written any code before and it was very evident that I had no idea what I was doing. However, after playing around with it and reading a lot on the p5.js I’ve managed to conjure up something that slightly resembles me. I even challenged myself to add in “if” commands with the background changing colors when the mouse is pressed down.