rmanagad-project01-face

robert-face

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(625, 625);
    background(255);
    noStroke();
    fill(255, 206, 109);
    ellipse(314, 306, 515, 515);
    angleMode(DEGREES);
}

function draw() {
//lower layer of cloud. I used both full shapes and shapes-as-masks to construct this.
    var a = color(179,188,206);
	noStroke();
	fill(a);
		ellipse(435, 411.35, 94.26, 94.26);
	noStroke();
	fill(a);
		ellipse(228.92, 332.11, 123.5, 103.96);
	noStroke();
	fill(a);
		rect(163.86, 342.85, 236.38, 104.88);
	noStroke();
	fill(a);
		ellipse(168.93, 389.92, 115.62, 115.62);
	noStroke();
	fill(199, 208, 229);
		ellipse(306.5, 244.75, 259.14, 259.14);
//middle layers with cloud covering shirt.
push()
	translate(75, 75)
	rotate(30.8);
	noStroke();
	fill(122, 123, 131);
		rect(405, 51, 102.73, 118.65); //rotation was confusing to implement -- I attempted rectMode (CENTER) and translate commands to modify the pivot point so that it would rotate around the center, but I wasn't able to do that successfully. The rectangle did not rotate about its center.
pop()
	rotate(0);
	translate(0, 0);
	noStroke();
	fill(a);
		ellipse(362.94, 453.78, 121.21, 77.13);
	noStroke();
	fill(255, 206, 109);
		rect(295.69, 458.81, 163.93, 33.54);
//start of face creation
	noStroke();
	fill(226, 231, 244);
		ellipse(436.42, 264.79, 171.31, 144.54); //head
	noStroke();
	fill(0);
		ellipse(485.83, 259.56, 9.35, 16.90); //pupil
	noStroke();
	fill(255, 210, 63);
		ellipse(473.97, 290.75, 18.71, 18.71); //cheek blush
	noStroke();
	fill(226, 231, 244);
		triangle(493.36, 278.08, 510.58, 244.54, 527.8, 278.08); //nose
	noStroke();
	fill(156, 161, 175);
		ellipse(345.88, 218.31, 59.89, 66.74);//hairbun
	noStroke();
	fill(0);
		rect(500.84, 300.10, 9.11, 1.77);//lips	
//headphones	
	noStroke();
	fill(255);
		ellipse(420.11, 268.63, 48.13, 48.13);
	noStroke();
	fill(255, 210, 63);
		ellipse(420.11, 267.57, 32.48, 32.57);
	noStroke();
	fill(227, 188, 57);
		rect(412.85, 201.81, 14.52, 62.11);
	noStroke();
	fill(227, 188, 57);
		ellipse(420.11, 267.87, 19.70, 19.75);
	noStroke();
	fill(227, 188, 57);
		ellipse(418, 195.66, 27.61, 23.94);
//top layer of cloud
	noStroke();
	fill(a);
		rect(249.83, 440.95, 68.83, 18.18);
	noStroke();
	fill(255, 206, 109);
		ellipse(249.83, 463.26, 31.06, 31.06);
	noStroke();
	fill(a);
		ellipse(325.52, 453.45, 123.5, 69.75);
	noStroke();
	fill(a);
		ellipse(354.88, 405.06, 46.62, 46.62);
}
		

 

In developing my self-portrait, I started with exploring simplifications of face parts (sketch — top left) and media themes (bottom-left). I found myself listening to tracks on SoundCloud while doing this which formed the basis of my portrait (“clouds and music”, sketch — bottom right). Before working in p5js, I created a version of my sketch on illustrator to finalize the coordinates and sizes of my elements, then tracked the layering of elements to make sure I could follow it sequentially when I would write the code as seen below.

I’m satisfied with the composition and color arrangement of my portrait, however I would like to be able to make forms that use less elements — I ran over the 10-graphic-element guideline in developing masks and curves for objects in the portrait.