26 September 2013

Petunia

5:00

11:00

1:00

A recent obsession of mine – having read “The Coming Technological Singularity” by Vinge Vernor in my writing course – is the notion of humans playing machine roles. What would a person look like as a vacuum cleaner? Toaster? Clock? Petunia the Clockman has a biological affinity with time, as represented by seconds, hours, and minutes. That is, the boils on his forehead correspond to the current number of hours, and the movement of the flower on his head to the number of seconds in the current minute. He blinks the current number of minutes in binary every six seconds (one second per bit). Golan pointed out that the blinking aspect of the clock has nothing to do with the boil aspect – a criticism I agree with. So an improved version of the clock might rely on just one display mechanism instead of three working in tandem. Or it might dispose of the 12-hour clock altogether. That said, I’m pleased with the way in which Petunia’s eyes follow the flower on his head.

Man man;
PImage ball;

void setup() {
  size(400, 400);
  man = new Man();
  ball = loadImage("ball.png");
  smooth();
}

void draw() {  
  background(224,255,228);
  tint(254,219,255);
  man.update();
  man.drawMe();
}

void mousePressed() {
 saveFrame(); 
}

class Antennae {
  PVector pos;
  PImage antennae;
  PImage petunia;
  float rot, initRot;
  int scaleDown = 2;
  int num;

  Antennae(PVector _pos, float _rot, int _num) {
    pos = _pos;
    initRot = _rot;
    num = _num;
    antennae = loadImage("antennae.png");
    petunia = loadImage("petunia.png");
  } 

  void update() {
    float theta = map(millis()%60000,0,59999, 0, TWO_PI);
    rot = map(sin(theta), -1, 1, -.19, .19);
  }

  void draw() {
    translate(pos.x, pos.y - (antennae.height/(scaleDown*2)));
    rotate(initRot);
    for (int i = 0; i < num; i++) {
      image(antennae, 0, 0, 1.3*(antennae.width/scaleDown), antennae.height/(scaleDown*2)); 
      translate(0, .8 * (antennae.height/(scaleDown*2)));
      rotate(rot);
      pushMatrix();
      rotate(millis()/5000.0); 
      if(i == num-1) {
        image(petunia,-petunia.width/2,-petunia.height/2);
      }
      popMatrix();
    }
  }
}

class Man {

  ArrayList a = new ArrayList();
  PImage closeEyes, eyes, headCloseEyes, headOpenEyes, openEyes;
  PImage[] pimps = new PImage[12];
  PVector lEyePos = new PVector(373, 367), rEyePos = new PVector(436, 367);
  int bobAmp = 3;
  int blinkFrame = 0;
  int numAntennae = 1;
  int eyesX;

  Man() {
    loadImages();
    generateAntennae();
  }

  void update() {
    blink();
  }

  void blink() {
    String binMinutes = Integer.toBinaryString(minute());
    int blinkBracket  = second()/10;
    int numToAdd = 6 - binMinutes.length();
    for (int i = 0; i < numToAdd; i++) {
      binMinutes = "0" + binMinutes;
    }    

    if (binMinutes.charAt(second() % 6) == '1' && abs(frameCount - blinkFrame) >= 30) {
      blinkFrame = frameCount;
    }
  }

  void drawMe() {
    translate(0, height*.2);
    pushMatrix();
    drawHead();
    popMatrix();
    drawAntennae();
  }

  void loadImages() {

    for (int i = 0; i < 12; i++) {
      pimps[i] = loadImage((i + 1) + ".png");
    }

    closeEyes = loadImage("close-eyes.png");
    eyes = loadImage("eyes.png");
    headCloseEyes = loadImage("head-close-eyes.png");
    headOpenEyes = loadImage("head-open-eyes.png");
    openEyes = loadImage("open-eyes.png");
  }

  void generateAntennae() {
    for (int i = 0; i < numAntennae; i++) {
      a.add(new Antennae(new PVector(206, 153), random(2, 3), 10));
    }
  }

  void drawHead() {    
    float bobHead = map(frameCount % 200, 0, 199, 0, TWO_PI);
    pushMatrix();
    image(headOpenEyes, 0, 0, width, height);
    pushMatrix();
    float eyeCreep = map(cos(atan2(eyesX+width/2, height/2)), 0, 1, 7, -5);
    translate(eyeCreep, 0);
    image(eyes, 0, 0, width, height);
    popMatrix();
    image(openEyes, 0, 0, width, height);
    if (frameCount == blinkFrame || 
      (mousePressed && mouseX > width * .35 && mouseX < width * .682)) {
      image(headCloseEyes, 0, 0, width, height);
      image(closeEyes, 0, 0, width, height);
    }    
    int hour = ((hour()+1) > 12) ? hour() - 12 : hour();
    for (int i = 0; i < hour; i++) {
      image(pimps[i], 0, 0, width, height);
    }
    popMatrix();
  }

  void drawAntennae() {
    for (int i = 0; i < numAntennae; i++) {
      Antennae _a = (Antennae) a.get(i);
      pushMatrix();
      _a.update();
      _a.draw();
      popMatrix();
      eyesX = int(map(_a.rot, 0, .19, 0, width));
    }
  }
}

26 September 2013

can you not hear the words coming out of my terminal

I made some generic character sketches but none of them felt compelling, so I tried to think more about the potential of the library. Then the character started out as a non-corporeal lifeform inspired by the ones in Star Trek (namely the one in The Day of the Dove, where George Takei swings around a sword half-naked). The Beta XII-A entity in the episode fed off humanoid emotions, but I wanted to make the creature friendly instead of malicious. As I kept moving around the form with my face, it almost looked like it was real, imitating my movement as if it were a curious being, and suddenly I could see it as something within the computer. The sounds made were inspired from various digitized creature noises I’ve come across before (can’t remember exactly where).

I wanted the work to be more delayed though so that it would actually look like the thing was trying to process your movements before proceeding to copy them. It would also be nice to have more variety of sounds for the creature and give it more personality with more degree of control. The three OSC properties of the face I used was the position, scale, and mouth height. The main degree of control was on the mouth height, because then the change was drastic. I don’t particularly like what I made, mostly because I feel like there could’ve been more variations on the creature behavior, but I like the idea behind it.

note: the audio in the video was artificially put in because of complications with capturing the internal sounds using Quicktime. It definitely works in person, as demonstrated in class.

26 September 2013

Dust Mites -Maryyann Landlord

Sometimes, we forget to notice that the tiny common things around us can also be some of the most beautiful. Dust balls are often disliked due to their nature of sticking to things and cause of allergies. However, when shown in slow motion and against the light, their paths traveled through the air become quite alluring.

For my project, I wanted to simulate pollution as it flowed through the air. I got my inspiration both from my previous clock project and from the sootballs in the movie, Spirited Away. The way that the air emphasized the sootballs’ lightness captured my interest.

At first I mapped the size of the eyes to the arguments that faceOSC outputted. Every time something changed, the program would output a number for the change. I figured out the difference between my opened eyes and my closed eyes. Then, I changed the size of the soot balls based on my blinking. Using the same tactic as I did with my eyes, I mapped the force of the wind to the height of my mouth. I wanted to allow people to interact in a way that would be nature for them to do in real life with dust. Therefore, when one’s mouth would open as if to blow them away, the dust balls fly at a speed depending on how big the mouth is opened.

I think I managed the simulation of the lightness of the soot, but I wish I could have made them slowly flow upwards again after changing direction, instead of so abruptly. I also wish I could have added a windmill as a decoration on the side. This was a really fun project though, and I learned a lot of about making classes and utilizing them through your draw function.

(video pending)

dust mites from Maryyann Landlord on Vimeo.

26 September 2013

FaceOCS – Portrait in a Flower

//
// a template for receiving face tracking osc messages from
// Kyle McDonald's FaceOSC https://github.com/kylemcdonald/ofxFaceTracker
//
// 2012 Dan Wilcox danomatika.com
// for the IACD Spring 2012 class at the CMU School of Art
//
// adapted from from Greg Borenstein's 2011 example
// http://www.gregborenstein.com/
// https://gist.github.com/1603230
//
// This is an adapted version of the template by Swetha Kannan

import oscP5.*;
OscP5 oscP5;
/* @pjs preload= "happy.jpg"; */
PImage bg;
float petalColor = 255.0;
float petalColor2 = 140.0;
float petalColor3 = 140.0;

// num faces found
int found;
float cx, cy;
float secondsRadius;

// pose
float poseScale;
PVector posePosition = new PVector();
PVector poseOrientation = new PVector();

// gesture
float mouthHeight;
float mouthWidth;
float eyeLeft;
float eyeRight;
float eyebrowLeft;
float eyebrowRight;
float jaw;
float nostrils;

void setup() {
  size(640, 480);
  frameRate(30);
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.2;

  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "poseScale", "/pose/scale");
  oscP5.plug(this, "posePosition", "/pose/position");
  oscP5.plug(this, "poseOrientation", "/pose/orientation");
  oscP5.plug(this, "mouthWidthReceived", "/gesture/mouth/width");
  oscP5.plug(this, "mouthHeightReceived", "/gesture/mouth/height");
  oscP5.plug(this, "eyeLeftReceived", "/gesture/eye/left");
  oscP5.plug(this, "eyeRightReceived", "/gesture/eye/right");
  oscP5.plug(this, "eyebrowLeftReceived", "/gesture/eyebrow/left");
  oscP5.plug(this, "eyebrowRightReceived", "/gesture/eyebrow/right");
  oscP5.plug(this, "jawReceived", "/gesture/jaw");
  oscP5.plug(this, "nostrilsReceived", "/gesture/nostrils");
}

void draw() {  
  background(200);
  stroke(0);
  bg = loadImage("flowers.jpg");
  image(bg, 0, 0);
  image(bg, 0, 0, width, height);

  if (found > 0) {

    cx = width / 2;
    cy = height - ((height -posePosition.y)/2);

    //stem will grow along with pose position
    stroke(19, 151, 37);
    strokeWeight(10);
    noFill();
    float bexierX = width/2+(width/2-posePosition.x); // will control the curve of the stem
    float bexier2X = width/2-(width/2-posePosition.x); 
    bezier(cx, cy, bexierX , cy, bexierX, height,  width/2, height);
    bezier(cx, posePosition.y,  bexier2X, posePosition.y, bexier2X, cy,  width/2, cy);

    //Leaf will grow along with stem
    pushMatrix();
    stroke(19, 151, 37);
    fill(19, 200, 37);
    translate(width/2-15, cy-40);
    print (int(posePosition.y/30));
    drawLeaf(int(20-(posePosition.y/30)));
    popMatrix();

    if (eyebrowLeft >= 8.5) {

      petalColor = random(0, 255);
      petalColor2 = random(0, 255);
      petalColor3 = random(0, 255);
    }

    //num of Petals will be dependant on how open mouth is
    strokeWeight(10);
    stroke(petalColor, petalColor2, petalColor3);
    strokeWeight((height - posePosition.y)/10);
    for (int petals = int(mouthHeight); petals>0; petals -=1) {
      int maxPetals =petals;
      float Spacing = TWO_PI / max;
      line(cx, int(posePosition.y), cx + cos(petals)*secondsRadius, int(posePosition.y) + sin(petals)*secondsRadius);
    }

    //middle yellow of flower will grow along with posePosition
    stroke(250, 200, 50);
    strokeWeight((height - posePosition.y)/5);
    point(width/2, posePosition.y);
  }
}

// OSC CALLBACK FUNCTIONS

//drawLeaf function borrowed from Cath at https://openprocessing.orgsketch/7743
//Thankyou, I claim no responsibility
void drawLeaf(int shift) { // draw a leaf as follows

  float pointShift = shift;
  beginShape(); // start to draw a shape
  vertex(20, 45); // begin at this point x, y
  bezierVertex(30, 30, 60 + pointShift, 40 + pointShift/2, 70 + pointShift, 50); 
  bezierVertex(60 + pointShift, 55, 30, 65, 20, 45); // draw the other half of the shape
  endShape();
}

public void found(int i) {
  println("found: " + i);
  found = i;
}

public void poseScale(float s) {
  println("scale: " + s);
  poseScale = s;
}

public void posePosition(float x, float y) {
  println("pose position\tX: " + x + " Y: " + y );
  posePosition.set(x, y, 0);
}

public void poseOrientation(float x, float y, float z) {
  println("pose orientation\tX: " + x + " Y: " + y + " Z: " + z);
  poseOrientation.set(x, y, z);
}

public void mouthWidthReceived(float w) {
  println("mouth Width: " + w);
  mouthWidth = w;
}

public void mouthHeightReceived(float h) {
  println("mouth height: " + h);
  mouthHeight = h;
}

public void eyeLeftReceived(float f) {
  println("eye left: " + f);
  eyeLeft = f;
}

public void eyeRightReceived(float f) {
  println("eye right: " + f);
  eyeRight = f;
}

public void eyebrowLeftReceived(float f) {
  println("eyebrow left: " + f);
  eyebrowLeft = f;
}

public void eyebrowRightReceived(float f) {
  println("eyebrow right: " + f);
  eyebrowRight = f;
}

public void jawReceived(float f) {
  println("jaw: " + f);
  jaw = f;
}

public void nostrilsReceived(float f) {
  println("nostrils: " + f);
  nostrils = f;
}

// all other OSC messages end up here
void oscEvent(OscMessage m) {

  /* print the address pattern and the typetag of the received OscMessage */
  println("#received an osc message");
  println("Complete message: "+m);
  println(" addrpattern: "+m.addrPattern());
  println(" typetag: "+m.typetag());
  println(" arguments: "+m.arguments()[0].toString());

  if (m.isPlugged() == false) {
    println("UNPLUGGED: " + m);
  }
}

In this project, I was attempting to make a portrait of someone as a flower. The flower reacts to you and expresses itself in similar ways to you. When, you are slumping the flower is small but as you sit up straight, the flower grows as well. The stem gets taller, the leaf bigger and the flower itself larger. Similarly, if your mouth is closed only one petal will grow on the flower but with your mouth open multiple petals will begin to bloom. The movement of your eyebrows will also affect the color of the plant; in essence you can keep raising your eyebrows until you find a color that suits you. The tilt and movements of your head can also affect the curving of the flower stem. The flower is only as expressive as you, the user are. This project, although simple, carries a lot of what my visual clock did in that it is meant as an appreciation of nature, a landscape, and a scene. I am very happy with how the visuals of the project has turned out. I was able to create a working portrait of a flower that would mimics the user. I will probably go back to this project in order to create more depth in the flower and more customization options so that the flower will be an unmistakable portrait of someone.

26 September 2013

Visual Clock – Swetha

//using/ moifying example template of a clock from processing.org

int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
boolean night = false;
int hour = hour();
int min = minute() - 1;
float color1 = 0.0;
float color2 = 0.0;
float color3 = 0.0;
int countHour=0;
/* @pjs preload= "happy.jpg"; */
PImage img;
float tintvalue = map(hour() + norm(second(), 0, 60), 0, 60, 0, 255);

void setup() {
  img = loadImage("happy.jpg");
  size(640, 360);
  stroke(255);

  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  clockDiameter = radius * 1.8;

  cx = width / 2;
  cy = height / 2;
}

void draw() {

  makeBackground(); //draws the background and controls the tinting og the days

  //draws ferris wheel and controls the cars moving, changing color, and so on
  drawFerrisWheel();

/*
  if (tintvalue < 100) {     for (int x = 10; x >10; x-=1) {
      float y = random(0, height);
      stroke(255, 255, 51, 70);
      vertex(x*20, y);
      strokeWeight(3);
      stroke(255, 255, 51);
      vertex(x*20, y);
    }
  }
*/

  //draws the dots on the ferris wheel that shows the minutes
  drawTicks(cx, cy);

  endShape();
}

void makeBackground() {
  tintvalue = map(hour() + norm(second(), 0, 60), 0, 12, 0, 255);
  if (hour()!= hour) {
    hour = hour();
    countHour = hour;
    if( countHour == 12);
        night = !night;
        tintvalue = 0;
  }

  if ( night == true) {
    tint(255 - tintvalue);
  }
  else {
    tint(tintvalue);
  }
  image(img, 0, 0);
  image(img, 0, 0, width, height);
}

void drawTicks(int cx, int cy) {
  strokeWeight(8);
  beginShape(POINTS);
  int currentMin = minute();
  int color1 = 0;
  int color2 = 0;
  for (int a = 0; a < 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle- HALF_PI) * secondsRadius;
    float y = cy + sin(angle- HALF_PI) * secondsRadius;
    if (currentMin <=0) {       color1 = 255;       color2 = 51;     }     else {       color1 = currentMin*4;       color2 = currentMin*4;     }     stroke(255, color1, color2, 70);     vertex(x, y);     strokeWeight(3);     stroke(255, color1, color2);     vertex(x, y);     currentMin-=1;   } } void drawFerrisWheel() {   noFill();   strokeWeight(10);   stroke(255);   ellipse(cx, cy, clockDiameter, clockDiameter);   strokeWeight(5);   ellipse(cx, cy, clockDiameter/3, clockDiameter/3);   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;   int maxNCars =6;   float Spacing = TWO_PI / maxNCars;   for (int numOfCars = maxNCars; numOfCars>0; numOfCars -= 1) {
    if (min != minute()) {
      color1 = random(0, 255);
      color2 = random(0, 255);
      color3 = random(0, 255);
      min = minute();
    }
    float px = cx + cos(s + numOfCars*Spacing) * secondsRadius;
    float py = cy + sin(s + numOfCars*Spacing) * secondsRadius;
    stroke(0);
    strokeWeight(2);
    line(cx, cy, px, py);
    stroke(color1, color2, color3);
    strokeWeight(50);
    point(px, py);
    strokeWeight(20);
    stroke(100, 150, 240);
    point(px, py);

    stroke(200, 50, 50);
    line(cx, cy, 100, height);
    line(cx, cy, width-100, height);
    strokeWeight(50);
    point(cx, cy);
  }
}

In this assignment, I was trying to make a ‘scene’ that was something like a landscape painting but at the same time had the graphic feel of the computer or was reminiscent of pixilated art. The thought of a scene that is impacted, perhaps only in subtle ways, by the things around it, is interesting to me since it is in reflects with a kind of peacefulness or harmony that comes from appreciating the humdrum quality of life . As time progresses in this program, so too does the scene; days turn from light to dark in an hour, minutes change the car colors on the Ferris wheel, and seconds keep the Ferris wheel moving. I like the simplicity I have achieved with this program since it does achieve a certain quality of every day peacefulness. There is also a quality of unpredictability in this program, which is the changing of the car colors. Although it is a small change, I feel that it is just the right amount of ‘surprise’ to correspond with the changing environment of the piece.
In order to read this clock, you can see that the seconds in the clock are controlling the Ferris wheel, when one car makes a whole round, a minute has passed. Each minute passing is also recorded on the lights around the Ferris wheel that will slowly turn from yellow into gradients of red. When all 60 lights are red, then an hour will have passed. It is tricky judge the hour in this program mostly because the hour is represented as it is in real life; the changing from day to night is the indication of hour, only in the program day to night is measured in a single hour, making this a 2 hour clock. The brighter it is, the closer to midday the program is, and the darker it is the closer it is to nighttime.

Here’s some images to help illustrate what goes on with the hours:

26 September 2013

Peephole

As Kyle McDonald so aptly puts it, the face is “one of the most salient objects in our day-to-day life.” It is arguably the most central means by which we communicate non-verbally with others, and is undoubtedly our most powerful tool for emotional expression. Given its primacy in these areas, I was interested in the history of the face in both art and science. After some research I stumbled upon the then science, now pseudoscience “Physiognomy”, which aims to judge one’s character and intellectual aptitude based on facial structure alone.

Physiognomy still going strong in North Korea, here applied to judge Kim Jong-Un’s leadership potential

While the field may not have contributed much to Western science, it did yield some beautiful illustrations.

One of Charles Le Brun’s (1619 – 1619) anamorphic physiognomies

Owl + Man in a fashionable orange jumpsuit

Tapping into the idea of a human-animal hybrid, I composited a half owl half man chimera in Photoshop. One can spy on this chimera through a keyhole. Although the face itself does not respond to the user, the scene does. By moving one’s head back and forth, ones changes the perspective from which the creature can be seen, thus the illusion of depth. This effect is called parallax, and the layers of images move at distinct speeds accordingly. I applied a fisheye filter to the assets that lie behind the keyhole, so as to give the impression of looking through a piece of curved glass.

Ideally, the face would respond to the user as well. However, for the purpose of this project, the parallax achieves some level of immersion on its own. I also think the voyeuristic quality of this piece reveals rich territory for future exploration/exploitation/exposition.

I used FaceOSC’s poseOrientation property to govern the rotation of the head (a texture on a cylinder), the posePosition property to pan the images, and the poseScale property to control the zoom level of the scene.

26 September 2013

Adam-Assignment-05-FaceOSC

polystag

Mention the specific OSC properties of the face that you used. How many dimensions of control does your design have?

I am inspired by low poly / delaunay raster type art and design –

I wanted to create a puppet in processing using this style and have each individual point in the image “ease” differently so that the whole face becomes kind of fluid like. Unfortunately I ran out of time to implement this.

I started with an image of a stag and used a program called DMesh to trace a mesh over it.

polystag from adambd on Vimeo.

The stag’s mouth height and width is controlled by the user’s mouth height and width, it’s eyes are mapped to the users. The stag is scaled and positioned according the user.
Finally it’s ears are controlled by the users eyebrows – Humans use their eyebrows to convey expression, stags use their ears. In this way my programme acts as an interspeciel translator.


//
// a template for receiving face tracking osc messages from
// Kyle McDonald's FaceOSC https://github.com/kylemcdonald/ofxFaceTracker
//
// 2012 Dan Wilcox danomatika.com
// for the IACD Spring 2012 class at the CMU School of Art
//
// adapted from from Greg Borenstein's 2011 example
// http://www.gregborenstein.com/
// https://gist.github.com/1603230
//
import oscP5.*;
OscP5 oscP5;

// num faces found
int found;
float y1; 

PImage img, cloud;


// pose
float poseScale;
PVector posePosition = new PVector();
PVector poseOrientation = new PVector();

// gesture
float mouthHeight;
float mouthWidth;
float eyeLeft;
float eyeRight;
float eyebrowLeft;
float eyebrowRight;
float jaw;
float nostrils;

void setup() {
  size(640, 480);
  //  frameRate(30);
  img = loadImage("2.png");
  cloud = loadImage("4.png");

  smooth();


  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "poseScale", "/pose/scale");
  oscP5.plug(this, "posePosition", "/pose/position");
  oscP5.plug(this, "poseOrientation", "/pose/orientation");
  oscP5.plug(this, "mouthWidthReceived", "/gesture/mouth/width");
  oscP5.plug(this, "mouthHeightReceived", "/gesture/mouth/height");
  oscP5.plug(this, "eyeLeftReceived", "/gesture/eye/left");
  oscP5.plug(this, "eyeRightReceived", "/gesture/eye/right");
  oscP5.plug(this, "eyebrowLeftReceived", "/gesture/eyebrow/left");
  oscP5.plug(this, "eyebrowRightReceived", "/gesture/eyebrow/right");
  oscP5.plug(this, "jawReceived", "/gesture/jaw");
  oscP5.plug(this, "nostrilsReceived", "/gesture/nostrils");
}

void draw() {  
  background(255);
  //image(img, 100, 0);
  //  image(cloud, 200, 100);



  noFill();
  stroke(100, 0, 0); 
  translate(width - posePosition.x, posePosition.y);

  //      line(posePosition.x, posePosition.y * -1, 0, 0);
  //      line(posePosition.x - width, posePosition.y * -1, 0, 0); 
  //      line(posePosition.x, height - posePosition.y, 0, 0);
  //      line(posePosition.x - width, height - posePosition.y, 0, 0);

  stroke(0); 
  scale(poseScale);
  rotate  (    poseOrientation.z * -1 +.08); 
  strokeWeight(.2); 

  //left horn
  beginShape();
  vertex(-14, -19);
  vertex(-15.5, -23);
  vertex(-35, -30);
  vertex(-42, -38);
  vertex(-45, -51.5);
  vertex(-43.5, -60);
  vertex(-43, -51.5);
  vertex(-36, -38);
  vertex(-32, -32);
  vertex(-10, -28);
  vertex(-7, -34);
  vertex(-2, -38);
  vertex(-2, -33);
  vertex(-7, -23);
  vertex(-7, -21.5);
  endShape(CLOSE);

  line(-15.5, -23, -10, -28);
  line(-35, -30, -32, -32);
  line(-10, -28, -30, -34);
  line(-30, -34, -32, -32);
  line(-30, -34, -36, -42);
  line(-36, -42, -37, -47);
  line(-36, -42, -37, -47);
  line(-37, -47, -37, -40);
  line(-42, -38, -42, -49.5);
  line(-10, -28, -10, -20.5);
  line(-10, -24, -7, -28);
  line(-7, -28, -6, -34.5);
  line(-7, -28, -6, -26);

  //Right horn
  beginShape();
  vertex(14, -19);
  vertex(15.5, -23);
  vertex(35, -30);
  vertex(42, -38);
  vertex(45, -51.5);
  vertex(43.5, -60);
  vertex(43, -51.5);
  vertex(36, -38);
  vertex(32, -32);
  vertex(10, -28);
  vertex(7, -34);
  vertex(4, -42);
  vertex(3, -33);
  vertex(7, -23);
  vertex(7, -21.5);
  endShape(CLOSE);

  line(15.5, -23, 10, -28);
  line(35, -30, 32, -32);
  line(10, -28, 30, -34);
  line(30, -34, 32, -32);
  line(30, -34, 36, -42);
  line(36, -42, 37, -47);
  line(36, -42, 37, -47);
  line(37, -47, 37, -40);
  line(42, -38, 42, -49.5);
  line(10, -28, 10, -20.5);
  line(7, -21.5, 6, -33);
  line(6, -33, 3.5, -35);


  //face outline 
  beginShape();
  vertex(-4.5, -22.5);
  vertex(-3, -21);
  vertex(3, -21);
  vertex(4.5, -22.5);
  vertex(14.5, -18.5);
  vertex(14, -17);
  vertex(18, -8);
  vertex(13, -2);
  vertex(14, 0);
  vertex(12, 3);
  vertex(12, 3);
  vertex(13, 10.5);
  vertex(11.5, 12);
  vertex(11, 18.5);
  vertex(6, 29);
  vertex(7-mouthWidth/2, 34+mouthHeight/2);
  vertex(4-mouthWidth/2, 34+mouthHeight/2);
  vertex(-6, 29);
  vertex(-11, 18.5);
  vertex(-11.5, 12);
  vertex(-13, 10.5);
  vertex(-12, 3);
  vertex(-12, 3);
  vertex(-14, 0);
  vertex(-13, -2);
  vertex(-18, -8);
  vertex(-14, -17);
  vertex(-14, -19);
  endShape(CLOSE);

  //    ellipse (-11.5, 12, 3,3); 

  line(-3.5, 10, 3.5, 10);

  //face fill left
  line(-14, -17, -8, -16);
  line( -8, -16, -3, -21);
  line(-8, -16, 0, -10);
  line(-8, -16, -13, (eyeLeft*-3)-1  );
  line(-13, (eyeLeft*-3)-1, -13.5, (eyeLeft*-3)+1.7  );
  line(-13.5, (eyeLeft*-3)+1.7, -17, -18  );
  line(-12, 3, 0-mouthWidth/2, 14.5-mouthHeight/2);
  line(0-mouthWidth/2, 14.5-mouthHeight/2, -8, 19);
  line (-8, 19, 0-mouthWidth/2, 22-mouthHeight/2);
  line (-8, 19, -11.5, 12);
  line (-11, 18.5, 2-mouthWidth/2, 25+mouthHeight/2);
  //  line ( 2-mouthWidth/2, 25+mouthHeight/2, 0, 24); 
  line (6, 29, 7.5, 30); 
  line(0-mouthWidth/2, 14.5-mouthHeight/2, -3.5, 10);
  line(-5, 6, -3.5, 10);
  line(-5, 6, -3, -.5);
  line(-3, -.5, 0, -2);
  line(-6.5, -15, -7, -2);
  line(-7, -2, -13.5, 2+(eyeLeft*-3) ); 
  line(-6.5, -15, -13.5, 2+(eyeLeft*-3)); 
  line( -12, eyeLeft-8, -7, -2);
  line( -12, eyeLeft-8, -9, 4);
  line( -9, 8, -9, 4);


  line(-3, -.5, -6.5, -15);
  line(-3, -.5, -7, -2);


  line(-5, 6, -9, 4);


  //face fill right
  line(14, -17, 8, -16);
  line( 8, -16, 3, -21);
  line(8, -16, 0, -10);
  line(8, -16, 13, (eyeRight*-3)-1  );
  line(13, (eyeRight*-3)-1, 13.5, (eyeRight*-3)+1.7  );
  line(13.5, (eyeRight*-3)+1.7, 17, -18  );
  line(+12, 3, 12-mouthWidth/2, 14.5-mouthHeight/2);
  line(12-mouthWidth/2, 14.5-mouthHeight/2, 8, 19);
  line (8, 19, 12-mouthWidth/2, 22-mouthHeight/2);
  line (8, 19, 11.5, 12);
  line (11, 18.5, 10-mouthWidth/2, 25+mouthHeight/2);
  //  line ( 10-mouthWidth/2, 25+mouthHeight/2, 0, 24); 
  line (-6, 29, -7.5, 30); 
  line(12-mouthWidth/2, 14.5-mouthHeight/2, 3.5, 10);
  line(5, 6, 3.5, 10);
  line(5, 6, 3, -.5);
  line(3, -.5, 0, -2);
  line(6.5, -15, 7, -2);
  line(7, -2, 13.5, 2+(eyeRight*-3) ); 
  line(6.5, -15, 13.5, 2+(eyeRight*-3)); 
  line( 12, eyeRight-8, 7, -2);
  line( 12, eyeRight-8, 9, 4);
  line( 9, 7.5, 9, 4);

  line(3, -.5, 6.5, -15);
  line(3, -.5, 7, -2);

  line(5, 6, 9, 4);


  line(11, 18.5, 8, 29);
  line(8, 29, 0, 50);
  line(0, 50, -8, 29);
  line(-8, 29, -11, 18.5);
  line(-11, 18.5, -10.2, 30);
  line(-10.2, 30, -7.2, 44);
  line(-7.2, 44, -3.5, 41);


  rectMode(CENTER);

  //eye brow left
  beginShape();
  vertex(-10 - (eyebrowLeft * 4), (eyebrowLeft * -5) +12 );
  vertex(-33, (eyebrowLeft * -5) +24.5);
  vertex(-22, (eyebrowLeft * -2) +8);
  vertex(-18, -8);
  vertex(-14, -17);
  vertex(-17, -18);
  vertex(-20, (eyebrowRight * -5) +14);
  endShape(CLOSE);

  line(-10 - (eyebrowLeft * 4), (eyebrowLeft * -5) +12, -22, (eyebrowLeft * -2) +8 );
  line(-10 - (eyebrowLeft * 4), (eyebrowLeft * -5) +12, -25, -15 );
  line(-25, -15, -4 - (eyebrowLeft * 4), (eyebrowLeft * -5) +13 );
  line(-25, -15, -18, -8);
  line(  -33, (eyebrowLeft * -5) +24.5, -23, -13);
  line(-23, -13, -23, (eyebrowRight * -5) +17);
  line(-23, (eyebrowRight * -5) +17, -20, (eyebrowRight * -5) +14);
  line(-4 - (eyebrowLeft * 4), (eyebrowLeft * -5) +13, -23, (eyebrowRight * -5) +17);
  line(-23, (eyebrowRight * -5) +17, -17, -18);
  line (-17, -18, -18, -8);



  //eye brow right
  beginShape();
  vertex(10+(eyebrowRight*4), (eyebrowRight * -5) +12 );
  vertex(33, (eyebrowRight * -5) +24.5);
  vertex(22, (eyebrowRight * -2) +8);
  vertex(18, -8);
  vertex(14, -17);
  vertex(17, -18);
  vertex(20, (eyebrowRight * -5) +14);
  endShape(CLOSE);

  line(10 + (eyebrowRight * 4), (eyebrowRight * -5) +12, 22, (eyebrowRight * -2) +8 );
  line(10 + (eyebrowRight * 4), (eyebrowRight * -5) +12, 25, -15 );
  line(25, -15, 4 + (eyebrowRight * 4), (eyebrowRight * -5) +13 );
  line(25, -15, 18, -8);
  line(33, (eyebrowRight * -5) +24.5, 23, -13);
  line(23, -13, 23, (eyebrowRight * -5) +17);
  line(23, (eyebrowRight * -5) +17, 20, (eyebrowRight * -5) +14);
  line(4 + (eyebrowRight * 4), (eyebrowRight * -5) +13, 23, (eyebrowRight * -5) +17);
  line(23, (eyebrowRight * -5) +17, 17, -18);
  line (17, -18, 18, -8);

  //eye left
  //  ellipse(-13, eyeLeft - 10, 4.5, -30+ eyeLeft*10); 
  beginShape();
  vertex(-13.5, 2+(eyeLeft*-3) );
  vertex(-12, eyeLeft-8 );
  vertex(-12.5, eyeLeft-7.5 );
  vertex(-15, eyeLeft-7.5 );
  vertex(-15, eyeLeft-9 );
  endShape(CLOSE);

  //  ellipse(-12, eyeLeft-8 , 2, 2); 

  //eye right
  //  ellipse(13, eyeRight -10, 4.5, -30 + eyeRight*10);
  beginShape();
  vertex(13.5, 2+(eyeRight*-3) );
  vertex(12, eyeRight-8 );
  vertex(12.5, eyeRight-7.5 );
  vertex(15, eyeRight-7.5 );
  vertex(15, eyeRight-9 );
  endShape(CLOSE);

  //mouth 
  //  rect(0, 20, mouthWidth, mouthHeight);


  //nose
  //  fill(38, 40, 40); 
  beginShape();
  vertex(2-mouthWidth/2, 20-mouthHeight/2);
  vertex(6-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(7-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(10-mouthWidth/2, 20-mouthHeight/2);
  vertex(12-mouthWidth/2, 14.5-mouthHeight/2);
  vertex(6-mouthWidth/2, 16.3-mouthHeight/2);
  vertex(0-mouthWidth/2, 14.5-mouthHeight/2);
  endShape(CLOSE);

  //ellipse(0-mouthWidth/2, 14.5-mouthHeight/2,5,5);


  //mouth
  //  fill(88, 30, 19); 
  beginShape();
  vertex(0-mouthWidth/2, 22-mouthHeight/2);
  vertex(6-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(7-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(0+mouthWidth/2, 22-mouthHeight/2);
  vertex(7-mouthWidth/2, 21+mouthHeight/2);
  vertex(5-mouthWidth/2, 21+mouthHeight/2);
  endShape(CLOSE);

  //top lip
  //  fill(133, 119, 110); 
  beginShape();
  vertex(0-mouthWidth/2, 22-mouthHeight/2);
  vertex(2-mouthWidth/2, 20-mouthHeight/2);
  vertex(6-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(7-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(10-mouthWidth/2, 20-mouthHeight/2);
  vertex(0+mouthWidth/2, 22-mouthHeight/2);
  vertex(7-mouthWidth/2, 22.5-mouthHeight/2);
  vertex(6-mouthWidth/2, 22.5-mouthHeight/2);
  endShape(CLOSE);


  //bottom lip
  //  fill(17, 16, 12); 
  beginShape();
  vertex(0-mouthWidth/2, 22-mouthHeight/2);
  vertex(5-mouthWidth/2, 21+mouthHeight/2);
  vertex(7-mouthWidth/2, 21+mouthHeight/2);
  vertex( 0+mouthWidth/2, 22-mouthHeight/2);
  vertex(8-mouthWidth/2, 22+mouthHeight/2);
  vertex(4-mouthWidth/2, 22+mouthHeight/2);
  endShape(CLOSE);


  //2
  //  fill(211, 204, 204); 
  beginShape();
  vertex(0-mouthWidth/2, 22-mouthHeight/2);
  vertex(4-mouthWidth/2, 22+mouthHeight/2);
  vertex(8-mouthWidth/2, 22+mouthHeight/2);
  vertex(0+mouthWidth/2, 22-mouthHeight/2);
  vertex(10-mouthWidth/2, 25+mouthHeight/2);
  vertex(7-mouthWidth/2, 35+mouthHeight/2);
  vertex(4-mouthWidth/2, 35+mouthHeight/2);
  vertex(2-mouthWidth/2, 25+mouthHeight/2);
  endShape(CLOSE);


  //1
  //  fill(80, 74, 69); 
  beginShape();
  vertex(4-mouthWidth/2, 22+mouthHeight/2);
  vertex(8-mouthWidth/2, 22+mouthHeight/2);
  vertex(10-mouthWidth/2, 25+mouthHeight/2);
  vertex(2-mouthWidth/2, 25+mouthHeight/2);
  endShape(CLOSE);


  //  //nostril left 
  //  ellipse(-5, nostrils * 1, nostrils, 3);
  //
  //  //nostril right 
  //  ellipse(5, nostrils * 1, nostrils, 3);
}


// OSC CALLBACK FUNCTIONS

public void found(int i) {
  println("found: " + i);
  found = i;
}

public void poseScale(float s) {
  println("scale: " + s);
  poseScale = s;
}

public void posePosition(float x, float y) {
  println("pose position\tX: " + x + " Y: " + y + " Y1: " + y1 );
  posePosition.set(x, y, 0);
}

public void poseOrientation(float x, float y, float z) {
  println("pose orientation\tX: " + x + " Y: " + y + " Z: " + z);
  poseOrientation.set(x, y, z);
}

public void mouthWidthReceived(float w) {
  println("mouth Width: " + w);
  mouthWidth = w;
}

public void mouthHeightReceived(float h) {
  println("mouth height: " + h);
  mouthHeight = h;
}

public void eyeLeftReceived(float f) {
  println("eye left: " + f);
  eyeLeft = f;
}

public void eyeRightReceived(float f) {
  println("eye right: " + f);
  eyeRight = f;
}

public void eyebrowLeftReceived(float f) {
  println("eyebrow left: " + f);
  eyebrowLeft = f;
}

public void eyebrowRightReceived(float f) {
  println("eyebrow right: " + f);
  eyebrowRight = f;
}

public void jawReceived(float f) {
  println("jaw: " + f);
  jaw = f;
}

public void nostrilsReceived(float f) {
  println("nostrils: " + f);
  nostrils = f;
}

// all other OSC messages end up here
void oscEvent(OscMessage m) {
  if (m.isPlugged() == false) {
    println("UNPLUGGED: " + m);
  }
}

26 September 2013

Deep Sea – Maryyann Landlord

My idea was derived from the deep underwater scenery one would often see on discovery channel. I wanted to originally create a dark open ocean with only a few light up microorganisms as the keys to second, min, and hourly changes. However, I realized that having more visualizations in the water made the clock composition more interesting.

I wanted to use the bubbles traveling up as a backdrop wallpaper for the other moving objects in the piece do give the piece a little more depth. I think that I was able to simulate an underwater feeling quite smoothly. I would like to have used more animation with pngs and I think I could have made the flashing. One thing I really liked, which was simple, yet cute, was the ripple on the top of the water that would blink, when the organism hit the top of the screen. I also realized that because of the way I layered my backgrounds, the longer you wait for them to build up, the “deeper” the ocean would seem.

Deep Sea Breakdown: The yellow flashing organism , which move around slightly, represent the seconds. The color changing round organism that bounces around the screen changes it’s size slightly. Every hour, the screen is covered by a thin layer of white, which eventually when it becomes difficult to see the ocean clearly, is lifted once again. This process takes place in the course of one day.

After one Day:

After a few min of waiting:

Open Processing Link: https://openprocessing.orgsketch/112116

PImage rocky; 
PImage blur; 
int whiteness; 
int prevSecond, prevMin, prevHour; 
color[] bcolor = {
  #063260, #13587F, #021931, #24455C
    , #689EA1
};

int frames; 
int colr;

//Blight 
Blight myBlights[]; 
float bx, by; 
int  blightCount;

//jelly
Jelly myJelly; 
float jx, jy; 

// bubbles
Wave waveArray[];
int waveCount; 
int jSize; 

void setup() {
  size(600, 1000);
  background(#00131C);
  frameRate(10);
  whiteness = 0; 

  rocky = loadImage("rocky.png");
  blur = loadImage("blur.png");

  waveCount = 20;
  waveArray = new Wave[waveCount];
  for (int i = 0;i< waveCount; i++ ) {
    float size = random(7, 20); 
    waveArray[i] = new Wave(20 + i* 30, height, size);
  }

  jx = random(10, width-10); 
  jy = random(10, height-10); 
  jSize = 10; 
  myJelly = new Jelly(jx, jy, jSize);

  blightCount = 50;
  myBlights = new Blight[blightCount];
  for (int i = 0;i< blightCount; i++ ) {
    float bSize = random(2, 7);
    bx = random(10, width-10);
    by = random(10, height-10);
    myBlights[i]  = new Blight(bx, by, bSize);
  }
}

void draw() {
  int s = second(); 
  int m = minute();
  int h = hour(); 

  for (int i = 0; i < waveCount; i++ ) {
    waveArray[i].make();
    waveArray[i].update();
  }

  myJelly.render(); 
  myJelly.update(jSize); 

  if (frames % 60 == 0) {
    int index = int(random(0, bcolor.length));
    colr = bcolor[index];
  }

  drawParticles(); 

  noStroke();
  fill(colr, 40);
  rect(0, 0, width, height); 
  fill(255,255,255,whiteness); 
  rect(0,0,width,height); 

  tint(255, 30);
  image(blur, 0, 0);
  tint(100, 50);
  image(rocky, 0, 0);

  if (h != prevHour) {
    if ((whiteness < 100) &&(h > 1)) {
      whiteness += 5;
    }
    else {
      whiteness = 0;
    }
  }

  if (m != prevMin) {
    if ((jSize < 100) && (m > 1)) {
      jSize += 1.5*5;
    }
  }
  else {
    jSize = 10;
  }

  for (int i = 0;i< blightCount; i++ ) {     if (s != prevSecond) {          myBlights[i].render();       myBlights[i].update();     }   }   prevSecond = s;   prevMin = m;   prevHour = h;    frames ++; } void drawParticles() {   noStroke();   fill(#D8F2F9, 50);   ellipse(random(0, width), random(0, height), 5, 5);   fill(#D1F2BA, 50);   ellipse(random(0, width), random(0, height), 10, 10);   fill(#FF4D6A, 50);   ellipse(random(0, width), random(0, height), 7, 7); } class Blight {   float x;    float y;    int angle;    float size;    float speed;    color[] blcolor = {     #EBBA57, #D28B44   };   int col;    Blight(float bx, float by, float s) {     x = bx;      y = by;     size = s;      angle = 0;   }   void render() {     int index = int(random(0, blcolor.length));     col = blcolor[index];      fill(col, 80);      ellipse(x, y, size, size);     ellipse(x, y+2, size, size);   }   void update() {      speed = random(-20, 20);     x += speed * sin(angle);      y += speed;      angle += random(2, 10);      if (y > height) {
      y = 0;
    }

    if (y < 0) {       y = height;     }     if (x > width) {
      x = 0;
    }

    if (x < 0) {
      x = width;
    }
  }
}

class Jelly {
  float x; 
  float y; 
  float size;
  float speed;
  color [] jcolor = {
    #DDBBD9, #E8CBC0, #DAA3DC, #DCF297, #9BF6FD, #C6BDEA
  };  
  int col; 
  float angle; 

  Jelly(float px, float py, float s) {
    x = px; 
    y = py; 
    size = s; 
    speed = random(15, 45);
    col = #DAA3DC;
  }

  void render() {
    stroke(col);
    strokeWeight(1);
    noFill();
    ellipse(x, y, size, size);
    strokeWeight(1);
    ellipse(x, y, size/2, size/2);
    strokeWeight(1);
    ellipse(x, y, size/4, size/4);
  }

  void update(int jSize) {
    size = jSize; 
    x += speed * cos(angle*0.0003); 
    y += speed; 
    angle += random(1, 5); 

    if (x < 0) {       speed = -speed;        int index = int(random(0, jcolor.length));       col = jcolor[index];     }     if (x > width) {
      speed = -speed; 
      int index = int(random(0, jcolor.length));
      col = jcolor[index];
    }

    if (y < 0) {       speed = -speed;        int index = int(random(0, jcolor.length));       col = jcolor[index];       float rx = x;        float ry = y + 12;        ellipse(rx, ry, 20, 8);       ellipse(rx, ry, 100, 8);       ellipse(rx, ry, 200, 8);     }     if (y >= height) {
      speed = -speed; 
      int index = int(random(0, jcolor.length));
      col = jcolor[index];
    }
  }
}

class Wave { //makes bubbles that travel up 
  int x; 
  int y; 
  float speed; 
  int angle; 
  float size; 

  Wave(int xpos, int ypos, float s) {
    x = xpos; 
    y = ypos;
    speed = random(25, 45); 
    angle = 0; 
    size = s;
  }

  void make() {
    noFill();
    stroke(#BBEFF1, 70);
    strokeWeight(1);
    if (y < random(0, height/2)) {       y = height;        size = random(7, 20);     }     ellipse(x, y, size, size);   }   void update() {     x += speed * cos(angle);      y -= speed;      angle += random(10, 20);      if (size > 0) {
      size -= 0.2;
    }
  }
}

26 September 2013

Ralph-Assignment-05-VisualClock

The concept behind this clock is the feeling of nostalgia and existential angst one experiences when faced with the immensity of time. My inspiration for this was the novel “One Hundred Years of Solitude” by Gabriel Garcia Marquez, which is written in such a way (with detailed accounts of trivial, but poetic moments) that the reader feels as if he/she has known the town and its characters for a hundred years by the end of the novel, and a great sense of loss and the fleeting nature of human life is invoked within the reader. I wanted to try to recreate this sense of awe by visually representing a clock which measures a century with fractals of clocks that represent each small moment of that century. The clock begins from my own birthday, with the circle in the middle representing one century, the circles revolving it representing one year, and so on. The clock is pretty sizable, but I would have preferred to make a much larger image, with units of time being incremented more gradually (years to decades to centuries, rather than just years to centuries) so as to evoke an immense sense of scale. However, the limits of processing power and resolution size prohibited me from this.

This piece is very slow in Javascript, so I will post a link to it rather than breaking people’s computer by embedding it here.
https://openprocessing.orgsketch/112083

26 September 2013

Flower Clock

Starting from midnight, the flower gains a petal every hour until noon, then lose a petal every hour until midnight. Color of the flower change every minute.
I originally sorta envisioned it as a phone app with semi-interactive environment. But alas… that would take too long.
Also… not exactly a novel graphic concept. And spent too long “pixel-perfecting” the visual cutesy-ness. Again, happy with the outcome, but wish I could have done something more creative.

Sample screenshot of instance at 2:53

Sample screenshot of instance at 7:20

Sample screenshot of instance at 12:28

Sample screenshot of instance at 19:40