Category: Uncategorized

Dynamic Drawing

file

//Georgia Miller
//15-104 Section D
//mouse controls change from moving along x axis
function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(0);
translate(225,mouseX); //center //mouseX changes position
var sqrWidth = 50;
if(mouseX<225){ //clockwise rotation
rectMode(CENTER);
rotate(radians(frameCount)); //typically 10 frameRate
}
if(mouseX>225){ //counterclockwise rotation
rectMode(CENTER);
rotate(radians(-frameCount)); //typically 10 frameRate
}
srqWidth = sqrWidth + 10 * mouseX; //for size change
if (mouseX<225) {//Color change to greys on left
    fill(255);
    rect(0,0,mouseX/2+120,mouseX/2+120); //mouse for size change
    fill(220);
    rect(0,0, mouseX/2+100,mouseX/2+100);
    fill(185);
    rect(0,0,mouseX/2+80,mouseX/2+80);
    fill(150);
    rect(0,0,mouseX/2+60,mouseX/2+60);
    fill(115);
    rect(0,0,mouseX/2+40,mouseX/2+40);
    fill(80);
    rect(0,0,mouseX/2+20,mouseX/2+20);
    fill(45);
    rect(0,0,mouseX/2,mouseX/2);
}
if (mouseX > 225){ //colorchange to rainbow on right
    fill(255,0,255);
    rect(0,0,mouseX/4+120,mouseX/4+120);
    fill(255,0,0);
    rect(0,0, mouseX/4+100,mouseX/4+100);
    fill(255,150,10);
    rect(0,0,mouseX/4+80,mouseX/4+80);
    fill(255,255,0);
    rect(0,0,mouseX/4+60,mouseX/4+60);
    fill(0,255,0);
    rect(0,0,mouseX/4+40,mouseX/4+40);
    fill(10,215,255);
    rect(0,0,mouseX/4+20,mouseX/4+20);
    fill(0,0,255);
    rect(0,0,mouseX/4,mouseX/4);
} 

}

I had an idea coming in and got really stuck so I decided after a while to change my idea. I struggled trying to work around my translation for a while especially when considering up and down motions. It was weird to see all my mistakes before I put my background in because everything kept looping over each other because of my frameRate, which created this cool circle around my rotating square.

Looking Outwards 02

I visited a gallery that had an artwork by Ian Brill, a new media artist who specializes in computer-generated light installations. The installation featured a curved screen with colored pixels that moved and changed colors. The viewer would sit on a long bench and look at the screen, which was accompanied by a monotone background noise. While the viewer sat on the bench, most of their view would be filled with the screen and be enveloped in the color-changing visuals. What I admire about this artwork and his other exhibitions, is its ability to completely change the viewer’s perception of the space around them. While sitting in the gallery, while I knew where I was, the screen which I was looking at was capturing most of my awareness, changing the environment in my head.  I suppose that the algorithm has some form of a random function in it to continuously generate changing visuals, as well as a set palette of colors that the algorithm can choose from randomly to show. I think where Brill’s artistic sensibilities manifest are in his choice of color and size of the screen. I observed that for each exhibition, he uses a specific color palette to invoke different emotions and feelings of space from the viewer. At the same time, the size and number of screens control how much of the space is altered. While one singular screen only controls a small portion of the space, larger and more screens can possibly alter an entire room. 

2 people viewing Ian Brill’s artwork at the gallery

Screen showing color pixel changes

Project 2: Variable Faces

kstargio proj2 Download
// Katherine Stargiotti, kstargio, B

// PORTRAIT VARIABLES:
	//HEAD:
var headWidth = 640/2 - 10;
var headHeight = 840/1.75 - 10;
	//SKIN:
var skinTone = 3;
	//EYES:
var eyeWidth = 55;	//(40, 65)
var eyeHeight = 30;	//(15, 35)
var eyeSpread = 12;	//(10, 15)
var eyeColor = 1;	//(1, 4)
var pupilHeight = 27;
	//NOSE:
var noseSpread = 60;
var noseWidth = 10;	//(10, 23)
var noseHeight = 60;	//(55, 70)
	//MOUTH:
var lipColor = 3;
var mouthHeight = 5*840/8
var mouthShape = 1
	//HAIR:
var hairColor = 3
var hairStyle = 1


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

function draw() {
    background(110, 70, 110);		//moved to draw function so faces dont pile up 
//SKINTONE:
	noStroke();
	if (skinTone <= 1) {
		fill(240, 211, 202);		//lightest
	} else if (skinTone <= 2) {
		fill(246, 200, 167);
	} else if (skinTone <= 3) {
		fill(219, 140, 95);
	} else if (skinTone <= 4) {
		fill(121, 69, 53);
	} else {
		fill(42, 31, 27);			//darkest
	}
//HEAD:
    ellipse(width/2, height/2, headWidth, headHeight);
//EYES (whites):
    	fill(255);
    	stroke(0);
    	strokeWeight(1);
    ellipse(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, 15);
    ellipse(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, 15);
    arc(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
    arc(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
//EYES (iris):
    	noStroke();
    	fill(0);
    if (eyeHeight <= 18) {				//conditional statements for IRIS & PUPIL PLACEMENT 
	    pupilHeight = 27;
	} else if (eyeHeight <= 22) {
		pupilHeight = 28;
	} else if (eyeHeight <= 26) {
		pupilHeight = 29;
	} else if (eyeHeight <= 30) {
		pupilHeight = 31;
	} else if (eyeHeight <= 33) {
		pupilHeight = 32;
	} else {
		pupilHeight = 33;
	}
	if (eyeColor <= 1) {				//conditional statements for EYECOLOR
		fill(64, 106, 138);				//blue
	} else if (eyeColor <= 2) {
		fill(48, 24, 23);				//dark brown
	} else if (eyeColor <= 3) {
		fill(100, 61, 27);				//light brown
	} else {
		fill(105, 85, 25);				//green/hazel 
	}    								// arcs for iriss 
    arc(width/2 - 5*eyeSpread, height/2 - pupilHeight, eyeWidth/2, eyeHeight*.8, PI+HALF_PI+QUARTER_PI, PI+(QUARTER_PI), OPEN);
    arc(width/2 + 5*eyeSpread, height/2 - pupilHeight, eyeWidth/2, eyeHeight*.8, PI+HALF_PI+QUARTER_PI, PI+QUARTER_PI, OPEN);
//EYES (pupils):
    	fill(0);
    ellipse(width/2 - 5*eyeSpread, height/2 - pupilHeight, eyeWidth/3, eyeHeight*.5);
    ellipse(width/2 + 5*eyeSpread, height/2 - pupilHeight, eyeWidth/3, eyeHeight*.5);
    	fill(255);							//glare
    ellipse(width/2 - 5*eyeSpread + eyeWidth/12, height/2 - pupilHeight - eyeHeight/12, eyeWidth/8, eyeHeight/6);
    ellipse(width/2 + 5*eyeSpread + eyeWidth/12, height/2 - pupilHeight - eyeHeight/12, eyeWidth/8, eyeHeight/6);
    ellipse(width/2 - 5*eyeSpread + eyeWidth/9, height/2 - pupilHeight + eyeHeight/12, eyeWidth/16, eyeHeight/11);
    ellipse(width/2 + 5*eyeSpread + eyeWidth/9, height/2 - pupilHeight + eyeHeight/12, eyeWidth/16, eyeHeight/11);
//EYES (lashes):
    	stroke(0);
    	strokeWeight(3);
    	noFill();
    arc(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0, OPEN);
    arc(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
//NOSE (lines):
    	noFill();
        stroke(0);
		strokeWeight(1);
	arc(width/2 - noseSpread, height/2 + 15, 95, 175, PI+HALF_PI+QUARTER_PI, QUARTER_PI/2);
	arc(width/2 + noseSpread, height/2 + 15, 95, 175, PI-(QUARTER_PI)/2, PI+QUARTER_PI);
//NOSE (bump shadow):
    	noFill();
		strokeWeight(5);
	if (skinTone <= 1) {
		stroke(230, 201, 192);		//lightest skintone
	} else if (skinTone <= 2) {
		stroke(236, 190, 157);
	} else if (skinTone <= 3) {
		stroke(209, 130, 85);
	} else if (skinTone <= 4) {
		stroke(111, 59, 43);
	} else {
		stroke(32, 21, 17);			//darkest skintone
	}
    arc(width/2, height/2 + 70, noseWidth + 10, 25, PI+QUARTER_PI, -QUARTER_PI), OPEN;
//NOSE (nostrils):
		stroke(0);
		strokeWeight(1);
    beginShape();														// "W" shape for nostrils:
	curveVertex(width/2 - (noseWidth+12), height/2 + (noseHeight+7));
	curveVertex(width/2 - (noseWidth+12), height/2 + (noseHeight+7));
	curveVertex(width/2 - (noseWidth+17), height/2 + (noseHeight+12));
	curveVertex(width/2 - (noseWidth+17), height/2 + (noseHeight+20));
    curveVertex(width/2 - (noseWidth+10), height/2 + (noseHeight+23));
    curveVertex(width/2 - noseWidth, height/2 + 80);
    curveVertex(width/2, height/2 + 85);
    curveVertex(width/2 + noseWidth, height/2 + 80);
    curveVertex(width/2 + (noseWidth+10), height/2 + (noseHeight+23));
	curveVertex(width/2 + (noseWidth+17), height/2 + (noseHeight+20));
	curveVertex(width/2 + (noseWidth+17), height/2 + (noseHeight+12));
	curveVertex(width/2 + (noseWidth+12), height/2 + (noseHeight+7));
	curveVertex(width/2 + (noseWidth+12), height/2 + (noseHeight+7));
    endShape();
//MOUTH (shape):
    if (mouthShape <= 1) {
		fill(236, 240, 215);
	} else {
        if (lipColor <= 1) {
	    	fill(245, 195, 195);
	    } else if (lipColor <= 2) {
			fill(255, 175, 145);
	    } else if (lipColor <= 3) {
			fill(235, 125, 85);
	    } else if (lipColor <= 4) {
			fill(95, 39, 33);
	    } else {
			fill(52, 21, 17);
	}}		
	
//MOUTH (closed bottom lip / teeth shape):
    beginShape();
    curveVertex(width/2 + 65, mouthHeight + 15);		//right far (not drawn)
    curveVertex(width/2 + 60, mouthHeight + 17);		// almost right far
    curveVertex(width/2 + 45, mouthHeight + 20);		
    curveVertex(width/2 + 15, mouthHeight + 20);
    curveVertex(width/2, mouthHeight + 22);			//mid mid
    curveVertex(width/2 - 15, mouthHeight + 20);
    curveVertex(width/2 - 45, mouthHeight + 20);		
    curveVertex(width/2 - 60, mouthHeight + 17);		//almost left far
    curveVertex(width/2 - 65, mouthHeight + 15);		//left far
    curveVertex(width/2 - 55, mouthHeight + 23);		
    curveVertex(width/2 - 40, mouthHeight + 32);		
    curveVertex(width/2 - 15, mouthHeight + 40);
    curveVertex(width/2, mouthHeight + 39);			//mid bottom
    curveVertex(width/2 + 15, mouthHeight + 40);
    curveVertex(width/2 + 40, mouthHeight + 32);		
    curveVertex(width/2 + 55, mouthHeight + 23);		
    curveVertex(width/2 + 65, mouthHeight + 15);		//right far
    curveVertex(width/2 + 60, mouthHeight + 17);		// almost right far
    curveVertex(width/2 + 45, mouthHeight + 20);		
    curveVertex(width/2 + 45, mouthHeight + 20);		
    endShape();
    if (mouthShape <= 1) {
		line(width/2 - 52, mouthHeight + 18, width/2 - 52, mouthHeight + 27);
		line(width/2 - 45, mouthHeight + 18, width/2 - 45, mouthHeight + 28);
		line(width/2 - 37, mouthHeight + 18, width/2 - 37, mouthHeight + 30);
		line(width/2 - 27, mouthHeight + 18, width/2 - 27, mouthHeight + 32);
		line(width/2 - 15, mouthHeight + 18, width/2 - 15, mouthHeight + 34);
		line(width/2, mouthHeight + 18, width/2, mouthHeight + 37);		//middle line
		line(width/2 + 15, mouthHeight + 18, width/2 + 15, mouthHeight + 34);
		line(width/2 + 27, mouthHeight + 18, width/2 + 27, mouthHeight + 32);
		line(width/2 + 37, mouthHeight + 18, width/2 + 37, mouthHeight + 30);
		line(width/2 + 45, mouthHeight + 18, width/2 + 45, mouthHeight + 28);
		line(width/2 + 52, mouthHeight + 18, width/2 + 52, mouthHeight + 27);
	} else {
		null;
	}
	if (lipColor <= 1) {
	    	fill(245, 195, 195);
	    } else if (lipColor <= 2) {
			fill(255, 175, 145);
	    } else if (lipColor <= 3) {
			fill(235, 125, 85);
	    } else if (lipColor <= 4) {
			fill(95, 39, 33);
	    } else {
			fill(52, 21, 17);
	}
//MOUTH (open bottom lip):
    if (mouthShape <= 1) {
    	beginShape();
    	curveVertex(width/2 + 65, mouthHeight + 16);		//right far (not drawn)
    	curveVertex(width/2 + 60, mouthHeight + 18);		// almost right far
    	curveVertex(width/2 + 45, mouthHeight + 20 + 5);		
    	curveVertex(width/2 + 15, mouthHeight + 20 + 12);
    	curveVertex(width/2, mouthHeight + 22 + 11);			//mid mid
    	curveVertex(width/2 - 15, mouthHeight + 20 + 12);
    	curveVertex(width/2 - 45, mouthHeight + 20 + 5);		
    	curveVertex(width/2 - 60, mouthHeight + 18);		//almost left far
    	curveVertex(width/2 - 65, mouthHeight + 16);		//left far
    	curveVertex(width/2 - 55, mouthHeight + 23 + 5);		
    	curveVertex(width/2 - 40, mouthHeight + 32 + 7);		
    	curveVertex(width/2 - 15, mouthHeight + 40 + 10);
    	curveVertex(width/2, mouthHeight + 39 + 10);			//mid bottom
    	curveVertex(width/2 + 15, mouthHeight + 40 + 10);
    	curveVertex(width/2 + 40, mouthHeight + 32 + 7);		
    	curveVertex(width/2 + 55, mouthHeight + 23 + 5);		
    	curveVertex(width/2 + 65, mouthHeight + 15);		//right far
    	curveVertex(width/2 + 60, mouthHeight + 17);		// almost right far
    	curveVertex(width/2 + 45, mouthHeight + 20);		
    	curveVertex(width/2 + 45, mouthHeight + 20);		
    	endShape();	
    } else {
	    null;
	}
//MOUTH (top lip):
    beginShape();
    curveVertex(width/2 - 65, mouthHeight + 15);		//left far (not drawn)
    curveVertex(width/2 - 11, mouthHeight + 5);
    curveVertex(width/2, mouthHeight + 7);			//mid top
    curveVertex(width/2 + 11, mouthHeight + 5);
    curveVertex(width/2 + 63, mouthHeight + 14);		//right far
    curveVertex(width/2 + 60, mouthHeight + 17);		
    curveVertex(width/2 + 45, mouthHeight + 20);		
    curveVertex(width/2 + 15, mouthHeight + 20);
    curveVertex(width/2, mouthHeight + 22);			//mid bottom
    curveVertex(width/2 - 15, mouthHeight + 20);
    curveVertex(width/2 - 45, mouthHeight + 20);
    curveVertex(width/2 - 60, mouthHeight + 17);
    curveVertex(width/2 - 63, mouthHeight + 14);		//left far 
    curveVertex(width/2 - 11, mouthHeight + 5);
    curveVertex(width/2 - 11, mouthHeight + 5);		//left mid top (drawn)
    endShape();
//HAIR (color):
	if (hairColor <= 1) {
		stroke(0);
		fill(0);
	} else if (hairColor <= 2) {
		stroke(127);
		fill(127);
	} else if (hairColor <= 3) {
		stroke(23, 9, 7);
		fill(23, 9, 7);
	} else if (hairColor <= 4) {
		stroke(93, 58, 42);
		fill(93, 58, 42);
	} else if (hairColor <= 5) {
		stroke(83, 30, 12);
		fill(83, 30, 12);
	} else if (hairColor <= 6) {
		stroke(226, 174, 126);
		fill(226, 174, 126);
	} else {
		stroke(51, 9, 4);
		fill(51, 9, 4);
	}
//EYEBROWS:
	//left brow:
	quad(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4, 
					   width/2 - headWidth/9, 	  height/2 - headHeight/7, 
		 			width/2 - headWidth/9 +3, 	  height/2 - headHeight/8,
		 width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);	
					
	beginShape();
	curveVertex(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4);
	curveVertex(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4);
	curveVertex(width/2 - headWidth/4 - eyeSpread/2 - 10, height/2 - headHeight/7 - 4);
	curveVertex(width/2 - headWidth/4 - eyeSpread/2 - 20, height/2 - headHeight/7);
	curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 30, height/2 - headHeight/8 + 4);
	curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 20, height/2 - headHeight/8 - 2);
	curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 10, height/2 - headHeight/8 - 5);	
	curveVertex( width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);
	curveVertex( width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);
	endShape();
	//right brow:
	quad(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4, 
					   width/2 + headWidth/9, 	  height/2 - headHeight/7, 
		 		   width/2 + headWidth/9 - 3, 	  height/2 - headHeight/8,
		 width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);	
					
	beginShape();
	curveVertex(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4);
	curveVertex(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4);
	curveVertex(width/2 + headWidth/4 + eyeSpread/2 + 10, height/2 - headHeight/7 - 4);
	curveVertex(width/2 + headWidth/4 + eyeSpread/2 + 20, height/2 - headHeight/7);
	curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 30, height/2 - headHeight/8 + 4);
	curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 20, height/2 - headHeight/8 - 2);
	curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 10, height/2 - headHeight/8 - 5);	
	curveVertex( width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);
	curveVertex( width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);
	endShape();
//HAIR (style):
	if (hairStyle <= 1) {
		//HAIRSTYLE 1:
		//left pony:
		beginShape();
		curveVertex(width/2 - headWidth/4.5, height/2 - headHeight/3);
		curveVertex(width/2 - headWidth/4.5, height/2 - headHeight/2.25);
		curveVertex(width/2 - headWidth/3.5, height/2 - headHeight/2);
		curveVertex(width/2 - headWidth/2.5, height/2 - headHeight/2);
		curveVertex(width/2 - headWidth/2, height/2 - headHeight/2.15);
		curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/2.5);
		curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/3);
		curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/3.75);
		curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/4.5);
		curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/5.5);
		curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/7);
		curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/10);
		curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/16);
		curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/50);
		curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/50);
		curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/16);
		curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/10);
		curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/7);
		curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/5.5);
		curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/4.5);
		curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/3.75);
		curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/3);
		curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/2.5);
		curveVertex(width/2 - headWidth/2, height/2 + headHeight/3);
		curveVertex(width/2 - headWidth/2.1, height/2 + headHeight/3.75);
		curveVertex(width/2 - headWidth/2.07, height/2 + headHeight/4.5);
		curveVertex(width/2 - headWidth/2.11, height/2 + headHeight/5.5);
		curveVertex(width/2 - headWidth/2.08, height/2 + headHeight/7);
		curveVertex(width/2 - headWidth/2, height/2);
		curveVertex(width/2 - headWidth/2.2, height/2 - headHeight/5);
		curveVertex(width/2 - headWidth/2.6, height/2 - headHeight/3);
		curveVertex(width/2 - headWidth/2.7, height/2 - headHeight/2.75);
		curveVertex(width/2 - headWidth/2.8, height/2 - headHeight/2.65);
		curveVertex(width/2 - headWidth/3, height/2 - headHeight/2.65);
		curveVertex(width/2 - headWidth/3, height/2 - headHeight/2.65);
		endShape();
		//right pony
		beginShape();
		curveVertex(width/2 + headWidth/4.5, height/2 - headHeight/3);
		curveVertex(width/2 + headWidth/4.5, height/2 - headHeight/2.25);
		curveVertex(width/2 + headWidth/3.5, height/2 - headHeight/2);
		curveVertex(width/2 + headWidth/2.5, height/2 - headHeight/2);
		curveVertex(width/2 + headWidth/2, height/2 - headHeight/2.15);
		curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/2.5);
		curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/3);
		curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/3.75);
		curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/4.5);
		curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/5.5);
		curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/7);
		curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/10);
		curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/16);
		curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/50);
		curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/50);
		curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/16);
		curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/10);
		curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/7);
		curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/5.5);
		curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/4.5);
		curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/3.75);
		curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/3);
		curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/2.5);
		curveVertex(width/2 + headWidth/2, height/2 + headHeight/3);
		curveVertex(width/2 + headWidth/2.1, height/2 + headHeight/3.75);
		curveVertex(width/2 + headWidth/2.07, height/2 + headHeight/4.5);
		curveVertex(width/2 + headWidth/2.11, height/2 + headHeight/5.5);
		curveVertex(width/2 + headWidth/2.08, height/2 + headHeight/7);
		curveVertex(width/2 + headWidth/2, height/2);
		curveVertex(width/2 + headWidth/2.2, height/2 - headHeight/5);
		curveVertex(width/2 + headWidth/2.6, height/2 - headHeight/3);
		curveVertex(width/2 + headWidth/2.7, height/2 - headHeight/2.75);
		curveVertex(width/2 + headWidth/2.8, height/2 - headHeight/2.65);
		curveVertex(width/2 + headWidth/3, height/2 - headHeight/2.65);
		curveVertex(width/2 + headWidth/3, height/2 - headHeight/2.65);
		endShape();
		//hairline:
    		noFill();
			strokeWeight(5);
    	arc(width/2, height/2, headWidth, headHeight, PI, 0);
			strokeWeight(10);
    	arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
			strokeWeight(15);
    	arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
			strokeWeight(20);
    	arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
			strokeWeight(50);
    	arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
	} else if (hairStyle <= 2) {
		//HAIRSTYLE 2:
	    ellipse(width/2 + 20, height/2 - headHeight/2, headWidth/2, headHeight/3);
    		noFill();
			strokeWeight(5);
    	arc(width/2, height/2, headWidth, headHeight, PI, 0);
			strokeWeight(10);
    	arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
			strokeWeight(15);
    	arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
			strokeWeight(20);
    	arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
			strokeWeight(50);
    	arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
	} else {
		//HAIRSTYLE 3:
			noFill();
			strokeWeight(5);
    	arc(width/2, height/2, headWidth, headHeight, PI, 0);
			strokeWeight(10);
    	arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
			strokeWeight(15);
    	arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
			strokeWeight(20);
    	arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
			strokeWeight(25);
    	arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
			strokeWeight(50);
    	arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
	}
}

function mousePressed() {
	//HEAD:
    headWidth = random(width/2 - 30, width/2 + 30);
    headHeight = random(height/2 - 20, height/2 + 70);
	//SKIN:
    skinTone = random(0, 5);
	//EYES:
    eyeWidth = random(40, 65);
    eyeHeight = random(15, 37);
    eyeSpread = random(10, 15);
    eyeColor = random(0, 4);
	//NOSE:
    noseSpread = random(57, 67);
	noseWidth = random(5, 20);
	noseHeight = random(55, 65);
	//MOUTH:
	lipColor = random(0, 5);
	mouthHeight = random(5*height/8 - 15, 5*height/8 + 15);
	mouthShape = random(2);
	//HAIR:
	hairColor = random(7);
	hairStyle = random(3);
}

LookingOutwards-02

https://www.drwoohoo.com/portfolio/semi-autonomous-brushstrokes

While the concept seems simple enough, the thing I admire most about Dr. Woohoo’s work is the dynamic nature of his generations.
There seems to be a level of randomness to his work, but there is also a sense of intentionality in the strokes, almost as if they did it by hand.
Perhaps the most impressive to me is his choice of colour palette, as they are mostly non-standard yet visually appealing.
They use a combination of vibrant and neutral colors that somehow don’t clash.
While I’m not sure exactly how the brushes work – I imagine they work somewhat similarly to Sketchbook custom brushes – I think there is a component creating an illusion both of direction and depth of movement.
Generative art seems to be the best way for Dr. Woohoo to express their vision – they seem to want to combine the ideas of DNA/RNA with art and vivid colours, and the generative art medium seems perfect.

Project-02-Face-Variables

sketch
//Nami Numoto
//15104 1A
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20;
var noseDirection = 0;
var noseHeight = 30;
var mouthPosition = 200;
var mouthHeight = 20;

function setup() {
    createCanvas(300, 300);
}

function draw() {
    strokeWeight(2);
    background(180);
    fill(156, 132, 104);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); // eye 1
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); // eye 2
    fill(0)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2); // iris 1
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2); // iris 2
    line(width / 2, height / 2, noseWidth + width / 2, noseHeight + height / 2); // directional nose line
    line(width / 2, height / 2 + noseHeight, noseWidth + width / 2, height / 2 + noseHeight); // bottom nose line
    noFill();
    beginShape(); //creative rendition of a mouth, testing out curveVertex()  :)
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2, mouthPosition);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    endShape(); //sometimes the mouth goes off the face. call it art
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseWidth = random(10, 30);
    noseDirection = random(0, 2);
    if (noseDirection > 1) {
        noseWidth = -1 * noseWidth;
    }
    mouthHeight = random(-10, 10);
}

LookingOutwards-02

Maurizio Bolognini

I am interested in Bolognini’s work due to his interesting use of geometry and interplay between the two-dimensional and three-dimensional world. His installations basically show parallel lines moving through, across from, and against each other on a 2D surface, creating kilometres of infinite lines. Bolognini himself states that he does not consider himself a mere conceptual artist nor “an artist who creates certain images,” but “one whose machines have actually traced more lines than anyone else, covering boundless surfaces,” showing his installations’ “limitlessness in space and time, and the possibility of creating parallel universes of information made up of… infinite trajectories.”[1] From this statement, we know that Bolognini uses many infinite loops and possibly the random function to create countless possibilities. We also know that he programs the machines to create art and barely controls what goes on in his code once he finishes an installation.

Source: https://www.bolognini.org/intro.htm

[1] Sandra Solimano (ed.) (2005), Maurizio Bolognini. Programmed Machines 1990-2005, Genoa: Villa Croce Museum of Contemporary Art, Neos, p. 15.

Project 2: Variable Faces



//shape variables 
var faceWidth = random(250, 450);
var faceHeight = random(320, 450);
var eyeSize = random(20, 40);
var noseWidth = random(20, 40);
var noseHeight = random(30, 50); 
var eyebrowShape = random(20, 30);
var mouth = 1 

//color variables 
var faceRed = random(0, 255);
var faceGreen = random(0, 255);
var faceBlue = random(0, 255); 
var noseRed = random(0, 255);
var noseGreen = random(0, 255);
var noseBlue = random(0, 255);
var eyebrowRed = random(0, 255);
var eyebrowGreen = random(0, 255);
var eyebrowBlue = random (0, 255); 

function setup() {
  createCanvas(640, 480);
  background(220);

}

function draw() {
  noStroke();
  background(220);
  fill(red,green,blue);

  // face and eyes 
  ellipse(width / 2, height / 2, faceWidth,  faceHeight);
  fill(0, 0, 0);
  var eyeLX = width / 2 - faceWidth * 0.25;
  var eyeRX = width / 2 + faceWidth * 0.25;
  ellipse(eyeLX, height / 2, eyeSize, eyeSize);
  ellipse(eyeRX, height / 2, eyeSize, eyeSize);

  //nose 
  fill(noseRed, noseGreen, noseBlue);
  rect(310, 230, 20, 40);
  
  //mouth 
  if (mouth <= 1) { 
    stroke(1);
    noFill();
    line(275,325,325,325);
  } else if (mouth < 2 ) {
    stroke(1); 
    noFill();
    arc(320,230,230,230,.31,2.83);
  } else if (mouth < 3) {
    stroke(1); 
    noFill();
    arc(320,370,140,170,3.46,5.97);
    
  }

  // eyebrows 
  noStroke();
  fill(eyebrowRed, eyebrowGreen, eyebrowBlue);
  rect(eyeLX - 20, height / 2 - 50, 50, eyebrowShape);
  rect(eyeRX - 20, height / 2 - 50, 50, eyebrowShape);
}
  

function mousePressed() {
  red = random(0, 255);
  green = random(0, 255);
  blue = random(0, 255); 

  noseRed = random(0, 255);
  noseGreen = random(0, 255);
  noseBlue = random(0, 255);

  faceWidth = random(250, 450);
  faceHeight = random(320, 450);
  eyeSize = random(20, 40);

  noseWidth = random(20, 40);
  noseHeight = random(30, 50);

  eyebrowShape = random(20, 30); 

  eyebrowRed = random(0, 255);
  eyebrowGreen = random(0, 255);
  eyebrowBlue = random (0, 255); 

  mouth = random(1,3); 



  

 




}

LO: Generatie Art

“In Real Life” caught my attention because the inspiration behind the installation is something that concerns my current and future career aspirations. I personally feel that freelance work for an artist is often romanticized for its flexibility and convenience. However, this piece really attempts to elucidate the negative components that encompass freelance labor: difficulties in setting wages, correspondence and efficacy and a lack of insurance and benefits. For example, there have been several instances where patrons have asked me to create intricate works of art with no regard for the time or feasibility required of me to create it. The work and process of creating work must always prioritize the consumer.

Link to In Real Life: “https://player.vimeo.com/video/371276301?h=48e35c9655”

Project 02: Variable Faces; Face Variables

sketch

//Julianna Bolivar, Section D
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var skinTone = 1;
var mouth = 1;
var nose = 1;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    if (skinTone <= 1) {
        fill(230,204,178); //light skin tone
    } 
    else if (skinTone <= 2) {
        fill(221,184,146); //beige skin tone
    } 
    else if (skinTone <= 3) {
        fill(189,143,107); //tan skin tone
    } 
    else if (skinTone <= 4) {
        fill(156,102,68); //medium skin tone
    } 
    else if (skinTone <= 5) {
        fill(127,85,57); //dark skin tone
    } 
    else {
        fill(80,57,43); //deep skin tone
    }
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //head shape
    var eyeLX = width / 2 - faceWidth * 0.25; //left eye size
    var eyeRX = width / 2 + faceWidth * 0.25; //right eye size
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye
    if (mouth <= 1) {
        line(140,180,160,180); //small mouth
    } 
    else if (mouth <= 2) {
        line(125,180,175,180); //medium mouth
    } 
    else {
        line(115,180,185,180); //big mouth
    }
    fill(229,135,118); //pink for nose
    if (nose <= 1) {
        circle(width / 2, 160, 18); //circle nose
    }
    else if (nose <= 2) {
        square(143, 155, 13.5); //square nose
    } else {
        triangle(150, 150, 143, 165, 157, 165); //triangle nose
    }
    fill(0,0,0); //black pupils
    ellipse(eyeLX, height / 2, pupilSize, pupilSize); //left pupil
    ellipse(eyeRX, height / 2, pupilSize, pupilSize); //right pupil

}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    skinTone = random (0,6);
    mouth = random (0,3);
    nose = random (0,3);
}