ChristineSeo-Project-02-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-02
var xPos;
var yPos;
var xR;
var scale;
var eyeScale;
var curve;
var shirtH;
var shirtW;
var hatR;
var earSize;
var eyeW;
var eyeH;
var earringS;
var mouthH;
var headS;
var faceS;
var circleG;
var circleB;
var skinR;
var skinG;
var skinB;
var neckR;
var neckG;
var neckB;
var faceWidth = 100;
var faceHeight = 160;
var hairLength= 155;
 
function setup() {
  createCanvas(480, 640);
  xPos = random(0,width); 
  yPos = random(0,height);
  xR = random(10,width);
  scale=random(10,height);
  shirtR=random(10,width);
  harR=random(10,width);
  eyeScale=random(10,20);
  earSize=random(25,45);
  curve=20
  shirtH=80
  shirtW=185
  eyeW=140
  eyeH=210
  earringS=210
  mouthH=240
  headS=180
  faceS=80
  circleG=90;
  circleB=80;
  skinR=247;
  skinG=225;
  skinB=200;
  neckR=231;
  neckG=195;
  neckB=156;

}

 
function draw() {

  background(46, 47, 69);
  noStroke(0);

  //circles
  fill(xR,circleG,circleB);
  ellipse(xPos, yPos, scale,scale); 
  

  //neck
  fill(neckR, neckG, neckB);
  rect(width/2-80, height/3, faceWidth/2-15, width/4.2, curve/2);


  //shirt
  fill(shirtR,circleG,circleB);
  rect(width/3.84, height/2.1, shirtH, shirtW, curve);

  //shoulders
  fill(skinR, skinG, skinB);        
  rect(height/3.5, height/2.2, shirtH-35, shirtW+40, curve);
  rect(width/3.84, height/2.1, shirtH-70, shirtW+10, curve);

  //hair
  fill (141, 114, 41);
  ellipse(width/2.91,height/3.6,width/3.2,height/3.8);
  rect(height/7, width/2.6, width/7, hairLength);

  //ears
  fill(neckR, neckG, neckB);
  ellipse(width/3.84,earringS,height/18,earSize);

  //earring
  fill(1);
  rect(width/4.5,earringS,earringS/30,earringS/30);

  //face
  fill (skinR, skinG, skinB);
  ellipse(width / 3, height /3, faceWidth,  faceHeight);

  //eyes
  fill(1);
  ellipse(eyeW,eyeH,eyeW/7,eyeScale);
  fill(990);
  ellipse(eyeW,eyeH,eyeW/17,eyeScale);

  //nose
  stroke(1);
  line(eyeW, eyeH+30, width/2.5, width/3);
  line(eyeW,eyeH+30,width/3.2,mouthH);
  ellipse(width/3,mouthH,width/160);

  //mouth
  noStroke(0);
  fill(236, 185, 248);
  triangle(width/2.5,mouthH,width/2.8,width/2,width/3.2,height/2.5);

  //bangs
  noStroke(0);
  fill(141, 114, 41);
  translate(width/-9, height/2.95);
  rotate(PI/0.6);
  ellipse(width/3,headS,faceS,width/4);

  //hat
  fill(1);
  translate(width/1.6, height/35);
  rotate(PI/2);
  ellipse(height/4,width/4-3,height/2.5,width/20);
  rect(faceS,height/48,headS,width/4.8);
  fill(hatR, circleG,circleB);
  rect(faceS,height/9,headS,width/24);

}
function mousePressed() {

  xPos = random(0,width); 
  yPos = random(0,height);
  xR = random(10,width);
  scale= random(10,height);
  eyeScale= random(10,20);
  shirtR= random(10,width);
  hatR=random(10,width);
  faceWidth = random(75, 100);
  faceHeight = random(110, 150);
  hairLength = random(120,255);
  earSize= random(25,45);



}

Although I had difficulties in the beginning of using variables, I was able to find the convenience of them! I experimented with different shapes and sizes. It was great to learn about how much I could play around with the software; it makes everything so much more dynamic!

ChristineSeo-LookingOutwards-2

Metamorphosis is a generative animation video that was created by Glenn Marshall. This work is not a commercially used animation, it also shows the usage of technology, and exposes the process of rendering the technology through algorithmic animation programmed in Processing. As a generative animation, I thought this animation was very intriguing because it shows different movements through butterflies as well as having great transitions. Not only the project is aesthetically pleasing, the music plays a great role in showcasing this video, which I believe adds a lot to the mood of the overall piece. The color palette in the animation is eyeopening and the different strokes and movement of the piece expresses great nature in a technological way.

This piece is inspired by this previous short film made in 2007, called Butterfly. This film used experimental techniques using traditional 3D and 2D software. Expanding his creativity and experimental aspects in digital art, he created this algorithmic animation a year after. Overall, the interaction between the video rendering with animation, music and transitions created a beautiful and inspiring project.

ChristineSeo-Project-01-Face

sketch

//Christine Seo
//Section C
//mseo1@andrew.cmu.edu
//Project-01-Face

function setup() {
    createCanvas(600, 600);
    background(226, 213, 248);
}

function draw() {

	// background color change
	 background (226, 213, 248); // lilac
    if (mouseX < (width / 1.5)) {
      background(0); // black
    }

    //backlight
	fill(226, 213, 248);
	strokeWeight(0);
    ellipse(292,300,490,582);

	//body shirt
	fill(255, 235, 135);
	strokeWeight(0);
	rect(175, 325, 235, 235, 220, 315, 10, 10)

	//neck
	fill(250, 219, 129);
	strokeWeight(0);
	ellipse(295,355,47,47);

	//face
	fill(250,238,212);
	strokeWeight(0);
	ellipse(295,250,290,220);

	//eyes black base
	fill(158,133,83);
	strokeWeight(2);
	ellipse(227,255,47,47);
	ellipse(357,255,47,47);

	fill(0);
	strokeWeight(0);
	ellipse(227,250,49,49);
	ellipse(357,250,49,49);

	//eyelashes
	strokeWeight(0);
	fill(0);
	ellipse(378,236,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(378,242,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(204,236,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(204,242,18,3);

	//eyes whites 
	fill(999);
	strokeWeight(0);
	ellipse(239,250,8,8);

	fill(999);
	strokeWeight(0);
	ellipse(369,250,8,8);

	fill(999);
	strokeWeight(0);
	ellipse(222,240,12,12);

	fill(999);
	strokeWeight(0);
	ellipse(354,240,12,12);

	//nose
	noFill();
	strokeWeight(2);
	curve(285, 332, 285, 261, 308, 260, 308, 296);

	//mouth
	noFill();
	strokeWeight(3);
	curve(280,160,330,310,250,310,250,160);

	//bangs
	strokeWeight(0);
	fill(131,93,29);
	rect(149,148,280,65,60);

	strokeWeight(0);
	fill(131,93,29);
	ellipse(292,148,271,125);

	//bangs triangle
	fill(250,238,212);
	strokeWeight(0);
	triangle(210, 225, 228, 160, 236, 215);

	//side bangs
	fill(131,93,29);
	strokeWeight(0);
	ellipse(158,240,30,182);

	fill(131,93,29);
	strokeWeight(0);
	ellipse(426,240,30,182);

	//cheeks
	fill(252, 192, 253,220);
	strokeWeight(0);
	ellipse(190,280,47,20)

	fill(252, 192, 253,220);
	strokeWeight(0);
	ellipse(393,282,47,20)

	//eyebrows
	strokeWeight(0.5);
	fill(127, 93, 48);
	ellipse(365,216,38,4);

	strokeWeight(0.5);
	fill(120, 93, 40);
	ellipse(218,216,38,4);

	//shirt pocket
	beginShape(TRIANGLE_STRIP);
	strokeWeight(0);
	fill(179, 213, 248);
	vertex(245, 505);
	vertex(275, 450);
	vertex(285, 505);
	vertex(295, 450);
	vertex(305, 505);
	vertex(315, 450);
	vertex(345, 505);
	endShape();

	//arms
	strokeWeight(0);
	fill(250, 219, 129);
	rect(180,410,40,145,60);

	strokeWeight(0);
	fill(250, 219, 129);
	rect(365,410,40,145,60);

	//ponytail
	fill(131,93,29);
	triangle(255, 15, 293, 100, 321, 15);

	translate(width / 2.55, height / 6.6);
	rotate(TWO_PI / -8);
	beginShape();
	fill(179, 213, 248);
	vertex(20, 20);
	vertex(40, 20);
	vertex(40, 40);
	vertex(60, 40);
	vertex(60, 60);
	vertex(20, 60);
	endShape(CLOSE);


}

Although in the beginning I had a difficult time to locate each element to the coordinates I wanted, I successfully managed to bring out my characteristics in the self portrait. Since this was my first time coding, I had a lot of fun exploring different functions and elements!

ChristineSeo-LookingOutwards-1

Pixi is a digital organism, a light installation, by a group of artists in collective WERC, supported by a province in the Netherlands commissioned by staatsbosbeheer. Pixi is inspired by patterns in the nature, such as a flock of birds or a swarm of bees, where they react to each other and their movements, which leads the Pixi to be self sufficient and group intelligent. However, Pixi also reacts to its surroundings, so if there is a person that passes by, the lights will turn on along with the person as well. The Pixi adopts location-specific behavior: Pixies communicate wirelessly with each other, over radio waves, and has sensors that react to heat and temperature as well. The software was written in Arduino, used Fast LED lights, and battery where they only turn on at night. The battery also saves energy levels compared to other lights in the environment!

Nature plays a great role in this installation because Pixies are placed on to trees in a forest. In the piece, I thought there was a very interesting interaction between digital technology and nature. Since the society today is  very involved in technology, the environment is suffering every minute. Pixi is also very environmentally friendly, and could be carried out in the real world to save energy. So, one critique I would have is to carry this on to different areas, or even different parts of the world, not only just in one forest in Netherlands. This way, people would be more involved in the piece. In addition, this installation is not only visually pleasing, but also has a great interaction with the surrounding and people.

WERC also worked on Waterstaat 3 years ago, which was another light installation in nature that reacted to music in festivals. Although this installation was on water instead of in a forest, I believe Pixi was influenced by this older work. They were able to further their conceptual sense and make another installation that actually helped the environment and have a meaningful interaction with nature and people through technology.

Pixi – Nature aware, self-sufficient, digital organism ‘breathes’ in the forest

http://www.werccollective.com/pixi/#/