Author: ijhong@andrew.cmu.edu

Isabella Hong-Project-02

ijhong02

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-02

// eye color and placement  
var I = 25;

// pupils 
var p = 15;

//eye color 
var eyeColorR = 255;
var eyeColorG = 255; 
var eyeColorB = 255;

//skin color 
var skinColorR = 255;
var skinColorG = 229;
var skinColorB = 180;

//nose color 
var nColorR = 255;
var nColorG = 229; 
var nColorB = 180;

//mouth size 
var m = 12;

//surprise lines thickness
var sl = 10;

  

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

function draw() {
	background(255);

	//face 
		noStroke();
		fill(skinColorR, skinColorG, skinColorB);
		ellipse(width / 2, height / 2.3, 200, 250);  
	
	//eyes
		noStroke();
		fill(eyeColorR, eyeColorG, eyeColorB);
		var ILX = width / 2 - 200 * 0.25; 
		var IRX = width / 2 + 250 * 0.25;
		ellipse(ILX - 40, height / 2.5, I, I + 10);
		ellipse(IRX - 80, height / 2.5, I, I + 10);

	//pupils 
		noStroke(); 
		fill(0);
		ellipse(ILX - 40, height / 2.5, p - 5, p + 5);
		ellipse(IRX - 80, height / 2.5, p - 5, p + 5);

	//nose
		stroke(255);
		strokeWeight(5);
		fill(nColorR, nColorG, nColorB);
		triangle(260, 260, 202, 240, 260, 200);

	//mouth
		noStroke();
		fill(231, 84, 128);
		ellipse(270, 280, m, m);


	//surprise lines 
		stroke(173, 216, 230);
		strokeWeight(sl);
		line(100, 100, 150, 150);
		line(550, 100, 450, 150);
		line(325, 60, 325, 5);
		line(460, 240, 580, 240);
		line(212, 100, 150, 15);

}	

function mousePressed(){
	//skin color changing
	skinColorR = random(250, 255);
	skinColorG = random(220, 255);
	skinColorB = random(180, 255);

	//eye color changing
	eyeColorR = random(0, 255);
	eyeColorG = random(0, 255);
	eyeColorB = random(0, 255);

	//eye size changing
	I = random(35, 70);

	//pupil size changing
	p = random(20, 30);

	//nose color changing
	nColorR = random(0, 255);
	nColorG = random(0, 255);
	nColorB = random(0, 255);

	//mouth size changing
	m = random(12, 60);

	//surprise lines thickness changing 
	sl = random(10, 25);
}

Process Work
Process Work

For Project 02, I decided to convey the emotion of surprise by assigning variables to various facial features and having them change to random colors and increase in size. I used the range 0-255 for all RGB colors to increase the unpredictability of what one would see after clicking upon the image.

The most difficult aspect of this project was making sure that I used all the variables correctly and my code was easily readable. Keeping my code organized was essential in order to ensure that I was changing the elements I intended to.

Isabella Hong – Looking Outwards – 02

Karl Sims is an artist that specializes in fusing elements of life sciences, his primary area of study as an undergraduate at MIT, and machinery to produce interactive media designs.

In 1997, Sims created an interactive exhibit called “Galapagos”, inspired by the studies that Darwin had completed on evolution at the Galapagos Islands. The exhibit was displayed for three years (1997 – 2000) at the ICC in Tokyo and for one year in 1999 at the DeCordova Museum in London.

Images of abstract organisms were displayed on twelve different screens that were arranged in an arc form. The viewers chose the organisms that they liked by standing on particular sensors and watched as the other organisms disappeared from the screens. The genetic code and intricacy of the newly mutated and evolved organisms are completely controlled by the computer, demonstrating the lack of human power over nature. Newly mutated and evolved organisms, the offspring of the selected organisms, appeared on the screens and there was no predicting what they would look like.

I particularly admired Sims’ ability to create direct interaction between a human and a machine, to show that art extends beyond the wall of a museum or the screen of a computer. He gaps the bridge between hardware and humanism, something that is rarely done very well.

An example of what happens when an organism is selected.

 

Isabella Hong-Looking Outwards-01

The Basel School of Design has created a six day long workshop that is designed to expose students to other fields of study, ones that supplement their main areas of interest well. The workshop focuses on layout & design, drawing, and interaction. On the fifth day of the workshop, the students use the new skills that they have acquired to merge elements of typography, audio, and lasers into innovative and jaw-dropping animations.

I was particularly intrigued by this project because of my interest in typography and hand lettering. I’ve studied typefaces on my own and for class and have plunged deep into creating vector designs – it had never even crossed my mind that the incorporation of technology was possible.

Six days does seem to be quite a short period of time to be able to fully comprehend the nuances of the hardware used and all the potential of the student’s ideas. They had critiques, revisions, and final presentations all in one day. In my opinion, this is not a sufficient amount of time to bring a project into full fruition.

The Basel School of Design is focused on “image making in the broadest sense” taking into account the ever changing medium of design. The current portal of communication is the world wide web – everything is becoming digitized, and with that has arisen a heightened sense and concern for the user. It has now become extremely essential for designers to do and create with intent. The Basel School of Design effectively teaches their students this by introducing programs such as this one.

Isabella Hong – Project -01

I aimed to create as realistic a self portrait I could for this project. I was very aware of the limitations I faced, given the fact that this would be the first time I was creating something from scratch using Javascript. The final product is a very cartoon like and basic emulation of myself. Overall, the project really forced me to constantly think about the sequence of code. Otherwise, I would not have been able to overlap the elements the way I wanted to.

 

ijhongproject1

// Isabella Hong
// Section A (Tuesday 9:00AM)
// ijhong@andrew.cmu.edu
// Project-01

function setup() { 
	createCanvas(600, 750);
}

function draw() {
	background(235, 235, 255);
	// Long Length Hair 
	fill(43, 29,14);
	noStroke();
	rect(145, 200, 310, 400);
	// Basic face shape
	fill(229, 194, 152);
	stroke(210, 180, 140);
	ellipse(300, 275, 300, 400);
	// Neck 
	fill(229, 194, 152);
	noStroke();
	rect(250, 350, 100, 200);
	// Torso
	fill(0, 0, 0);
	stroke(255, 255, 255);
	strokeWeight(2.5);
	rect(250, 525, 100, 300);
	// Clothing
	fill(0, 0, 0);
	rect(99, 561.5, 150, 300);
	rect(350, 561.5, 150, 300);
	fill(0, 0, 0); 
	triangle(250, 525, 250, 663, 100, 563);
	triangle(350, 525, 350, 663, 500, 563);
	//Glasses 
	stroke(87, 22, 22); 
	strokeWeight(7);
	line(155, 225, 445, 225);
	noFill();
	rect(175, 225, 110, 80);
	rect(315, 225, 110, 80); 
	// Eyes
	fill(43, 29, 14);
	noStroke();
	ellipse(230, 267, 20, 20);
	ellipse(370, 267, 20, 20);
	// Nose
	fill(229, 194, 152);
	stroke(210, 180, 140);
	strokeWeight(2);
	smooth();
	quad(302, 277, 282, 352, 302, 365, 317, 352);
	//Birthmark
	fill(210, 180, 140);
	stroke(210, 180, 140);
	noSmooth();
	ellipse(400, 320, 20, 15);
	// Mouth
	fill(244, 194, 194);
	stroke(231, 84, 128);
	angleMode(DEGREES);
	arc(300, 385, 110, 110, 0, 180, CHORD);
	// Top Hair 
	fill(43, 29, 14);
	noStroke();
	angleMode(DEGREES);
	arc(300, 210, 320, 300, 180, 360, CHORD);
	noLoop();

}