rmanagad-Project02-variablefaces-SectionE

rmanagad-variable

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

//body dimensions
var bodX = 241.2;
 	bodY = 500;
	bodW = 145.8;
	bodH = 218.7;
	curve1 = 15;
	curve2 = 15;
	curve3 = 15;
	curve4 = 15;

//eye dimensions
var eyeW = 25.5;
    eyeH = 8.1;
var eyeLX = 200.7;
var eyeRX = 283.9;
var eyeY = 454;
var nosecurve1 = 15;
	nosecurve2 = 15;
	nosecurve3 = 15;
	nosecurve4 = 15;

//nose dimensions
var noseW = 42;
var noseH = 34;
var noseX = 242.3;
var noseY = 486;
var noseW2 = 22;
	noseH2 = 13;
	noseX2 = 242;
	noseY2 = 502;

//ear dimensions
var earLX1 = 185.4;
	earLY1 = 393;
	earLX2 = 196.4;
	earLY2 = 374;
	earLX3 = 207.5;
var earRX1 = 273.6;
	earRX2 = 284.6;
	earRY2 = 374;
	earRX3 = 295.2;

//ground dimensions
var darkgroundW = 199.1;
    darkgroundH = 71.8;
    darkgroundX = 240.1;
	darkgroundY = 410.8;
var midgroundW = 136.6;
	midgroundH = 73.8;
var midgroundLX = 153.3;
var midgroundRX = 330.3;
	midgroundY = 399.2;
var lightgroundW = 138.9;
    lightgroundH = 53.235;
var lightgroundRX = 310.6;
var lightgroundLX = 174.1;
	lightgroundY = 373.7;

//colors
var darkgroundR = 74;
	var darkgroundG = 74;
	var darkgroundB = 63;
	var midgroundR = 121;
	var midgroundG = 122;
	var midgroundB = 97;
	var lightgroundR = 155;
	var lightgroundG = 154;
	var lightgroundB = 124;
	var bodycolorR = 234;
	var bodycolorG = 229;
	var bodycolorB = 209;
	var earcolorR = 239;
	var earcolorG = 119;
	var earcolorB = 99;


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

function draw(){
	background (245, 245, 240)
	rectMode(CENTER);

	//lightground in the back
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(lightgroundLX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);
	rect(lightgroundRX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);

//if else statements were added to simulate the motion of the dog...
//popping its head above the ground.

	//ears
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	triangle(earLX1, earLY1, earLX2, earLY2, earLX3, earLY1);
	triangle(earRX1, earLY1, earRX2, earRY2, earRX3, earLY1);
	if (earLY1 > 220) {earLY1 = earLY1 - 1;
	} else {earLY1 = 221}; //it will continue to rise as long as it's placement is below its original.
	if (earLY2 > 201) {earLY2 = earLY2 - 1;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 1;
	} else {earRY2 = 202};

	//body
	noStroke ();
	fill (bodycolorR, bodycolorG, bodycolorB);
	rect (bodX, bodY, bodW, bodH, curve1, curve2, curve3, curve4);
	if (bodY > 328) {bodY = bodY - 1;
	} else {bodY = 328};

	//eyes
	noStroke();
	fill(0);
	rect (eyeLX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	rect (eyeRX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	if (eyeY > 281) {eyeY = eyeY - 1;
	} else {eyeY = 282};

	//nose
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	rect(noseX2, noseY2, noseW2, noseH2, curve1, curve2, curve3, curve4);
	if (noseY2 > 329) {noseY2 = noseY2 - 1;
	} else {noseY2 = 330};
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(noseX, noseY, noseW, noseH, curve1, curve2, curve3, curve4);
	if (noseY > 313) {noseY = noseY - 1;
	} else {noseY = 314};


	//midground
	noStroke();
	fill(midgroundR, midgroundG, midgroundB);
	rect(midgroundLX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);
	rect(midgroundRX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);

	//darkground in the front
	noStroke();
	fill(darkgroundR, darkgroundG, darkgroundB);
	rect(darkgroundX, darkgroundY, darkgroundW, darkgroundH, curve1, curve2, curve3, curve4);

	//invisible clipping layer
	noStroke();
	fill(245, 245, 240);
	rect(242.4, 542.7, 240.7, 194.5)
}

//random assignment of value are within the "mousePressed" function,
//randomizing the values between a given parameter 
//every time the mouse is clicked.

function mousePressed () {
	bodycolorR = random(210, 240);
	bodycolorG = random(210, 245);
	bodycolorB = random(200, 210);

	earLY1 = random(393, 393)
	earLY2 = random(374, 394);
	earLX1 = random(188, 190);
	earLX2 = random(193, 199);
	earLX3 = random(203, 210);
	earRY2 = random(374, 394);
	earRX1 = random(269, 276);
	earRX2 = random(280, 288);
	earRX3 = random(291, 299);
	if (earLY1 > 220) {earLY1 = earLY1 - 5;
	} else {earLY1 = 221}; 
	if (earLY2 > 201) {earLY2 = earLY2 - 5;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 5;
	} else {earRY2 = 202};
	// changed the speed of ears so they "flop" out at the top.

	eyeH = random(4, 16);
	eyeW = random(14, 24);
	eyeLX = random(195, 210);
	eyeRX = random(273, 288);
	eyeY = random(453, 453);
	if (eyeY > 281) {eyeY = eyeY - 15;
	} else {eyeY = 282};

	noseW = random(20, 45);
	noseH = random(20, 35);
	noseX = random(235, 248);
	noseY = random(486, 486);
	if (noseY > 313) {noseY = noseY - 15;
	} else {noseY = 314;}


	noseW2 = random(20, 24);
	noseH2 = random(12, 14);
	noseX2 = random(236, 246);
	noseY2 = random(502, 502);
	if (noseY2 > 330) {noseY2 = noseY2 - 15;
	} else {noseY2 = 330};

	bodW = random(130, 160);
	nosecurve1 = random(5, 25);
	nosecurve2 = random(15, 25);
	nosecurve3 = random(15, 25);
	nosecurve4 = random(15, 25);
	bodY = random(500, 500);
	if (bodY > 328) {bodY = bodY - 15;
	} else {bodY = 328}

	}





//have (variable) += dir * speed;
//if ((variable) = height/2) {dir = 0 * dir;
//	}


In approaching this project, I took into consideration the movement elements learned in class — how could I incorporate them into a program that randomly generated values? My first idea was to create a program that popped up an ID card, but I wanted more of a surprise element — this prompted a switch to an animal popping its head out of a hole, and I ultimately decided on keeping ambiguity behind the species as a “to-be-decided” depending on what the random function generates.

I primarily used Illustrator as aid in creating this program in order to obtain coordinate values, size values, and color values. To get the animal to animate, I used a motion technique (x = x – 1) in conjunction with conditional statements to restrict the animal from moving too high. Because I focused on keeping the body parts aligning correctly during the animation, I wasn’t able to play too much with variation in the random generation of y-coordinates — all end-animation y-coordinate-placements were the same as the original image, and I’d like to experiment later in modifying that value as well.

rmanagad-Section E-lookingoutwards-02

Creator: Hiroshi Ishii, Xiao Xiao

Title of Work: Andante

Year of Creation: 2014

Link to Project Work: http://tangible.media.mit.edu/project/andante/

Link to Artist Bio: http://tangible.media.mit.edu/person/hiroshi-ishii/ , http://portfolio.xiaosquared.com/About

Andante is an augmented reality program intended for developing beginner skills in piano playing. In developing this learning program, Hiroshi Ishii and Xiao Xiao regarded human experiences and histories from the somatic perspective — constant consideration was put towards recognizing the rhythmic flow of the human gait, and applying this consideration towards learning musical notations. This emphasis on the body-mind is reflected in Ishii’s and Xiao’s other new media art work, as they develop spaces, messages, and tools that rely on direct human interaction. As a designer focused on the human sciences and transitions to futures, I’m interested in Andante‘s potential as a person-based contribution towards futures-learning — does the human soma need increased priority in the design process?

According to the paper, Andante: Walking Figures on the Piano Keyboard to Visualize Musical Motion, the program runs both MIDI and the walking animations on Java, and in response to the player hitting each of the keys.

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.

 

rmanagad-lookingoutwards-01: KARBORN and Lo-Fi, Audio-Tampered Visual Messages

Creator: John Karborn

Title of Work: Evidence of Time Travel

Year of Creation: 2012 – 2014

Link to Project Work: http://www.evidenceoftimetravel.com/

Link to Artist Bio: http://www.karborn.com/

 

My New Electric Body in Space, John Karborn
My New Electric Body in Space, John Karborn

Because of the nature of my work (performance, video, sound), the work of John Karborn — specifically his Evidence of Time Travel series done in collaboration with musicians John Foxx and Steve D’Agostino — has contributed directly to my working methods. Karborn’s series was created by feeding still and moving images into modification hardware such as wobbulators and analogue video machines which he documents via DSLR captures off the output screen. Doing this to multiple images and videos coherently to produce a full series of 9 works (i.e. the AV, performance-based project Evidence of Time Travel) while collaborating indirectly with the sounds and audio created by musicians took Karborn roughly two years. Custom hardware is often created to produce desired modifications which he then further modifies by disrupting the image code in software such as Audacity.

In the realm of new media art, Karborn’s Evidence of Time Travel series points towards the direction of utilizing audio to tamper, modify, and fragment the data of visual messages. Although code is not his primary modifier, Karborn has contributed to explorations in the production of graphic images whose data has been intentionally corrupted and/or disrupted.