MahvishNagda-FaceOSC

by mahvish @ 3:59 am 24 January 2012

 

 

I wanted to use FaceOsc and Processing to create something playful. So I decided to use the data I get from FaceOsc to simulate window fog. The intention was to simulate what happens when you blow on your car window on a cold day. The window fogs up when you open up your mouth (using the ratio of your mouth height to width) and the dimensions of the fogging are controlled by your distance to the camera. I then wanted to draw on the fog, so I used touchOsc’s xy-pad on my iPad. When you’re not blowing on the window, the fog and lines fade away.

A lot of the simulation of the fogging (aka randomness) is inspired from Matt Pearson’s 100 Abandoned Art project: http://abandonedart.org/ . As you open your mouth, the application draws a circle on top of the previous circle. Each circle is actually drawn as a shape with each point on the circle connected by smoothed lines. To create a more realistic effect, I randomized each x-y points around the circle. Figuring out the right parameters for the randomization and the right values took a little bit of time: making it look frosty but not too frosty. It took a little bit of time to also tweak the rate at which shapes were drawn and faded away. The biggest challenge was fading the fog away gracefully. Since layers/shapes are stacked on top of each other, when the combined opacity level for multiple of the shapes reach 255, they all merge into one. When that “255” layer fades away, the effect is of one big blob disappearing. To work around that, I first tried collecting all the shapes I had drawn and redrawing all of them at each frame. This was computationally intensive and too slow. Instead, I finally figured out that I could simulate the effect by just overlaying the shapes that I had collected during the fade, which works well enough.

EliRosen – FaceOSC

by eli @ 3:29 am

[youtube https://www.youtube.com/watch?v=LCVDSafRvH8&w=600&h=437]
I used the FaceOSC data to animate a simple puppet of an old man. I put the puppet together in photoshop from an image I found on google images. The old man’s glasses move up and down in response to the user moving his eyebrows. The user also controls the old mans mouth. When the puppet opens its mouth it spews colorful balls towards the screen.

// A puppet by Eli Rosen based on
// 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;
 
// 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;
//variables for puppet images
PImage face;
PImage glasses;
PImage chin;
 
//variable to store last eyebrow value (for reducing jitter)
float eyebrowLast = eyebrowRight;
 
//array of particle positions
PVector[] pArray = new PVector[1];
//array of particle sizes
float[] pSize = new float[1];
//particle color array
color[] pColor = new color[1];
 
void setup() {
  size(640, 480);
  frameRate(30);
  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");
  //load the puppet images
  face = loadImage("face.png");
  glasses = loadImage("glasses.png");
  chin = loadImage("chin.png");
  //set color mode to HSB
  colorMode(HSB, 255);
  smooth();
 
}
 
void draw() {  
  background(255);  
  if(found > 0) {
    //center and scale the elements
    translate(posePosition.x, posePosition.y);
    scale(poseScale*.8);
    //draw the face
    image(face, -45, -65,face.width*.25, face.height*.25);
    //save the new eyebrow position
    float eyebrowNew = eyebrowRight;
    //get the difference between the old eyebrow position and the new one
    float eyebrowDif = eyebrowNew - eyebrowLast;
    // check if the eyebrow moved beyond a certain threshold
    if(Math.abs(eyebrowDif) > .35)
    {
      //if it did then draw it with the new position
      image(glasses, -29, /*-10*/(eyebrowNew*-4)+22,glasses.width*.25, glasses.height*.25);
      //update the last eyebrow variable
      eyebrowLast = eyebrowNew;
    }
    // if eyebrows did not move enough redraw the glasses in the same position as last time
    else
    {
      image(glasses, -29, /*-10*/(eyebrowLast*-4)+22,glasses.width*.25, glasses.height*.25);
    }
    // draw the chin based on jaw position
    image(chin, -14, jaw*1.6,chin.width*.25, chin.height*.25);
 
    // check if the jaw is open
    if(jaw > 22)
    {
      //generate a random hue number
      int randomHue = int(random(0,256));
      // get a random x and y that fall within the mouth area
      float xPos = random(-2,14);
      float yPos = random(36,40);
      // use the random hue to create a color
      color fillColor = color(randomHue,200,40);
      // create a new pVector and store the random x and y
      PVector p = new PVector(xPos, yPos);
      // create temporary arrays for copying the current arrays
      PVector[] tempArray = new PVector[pArray.length+1];
      float[] tempArray2 = new float[pSize.length+1];
      color[] tempArray3 = new color[pColor.length+1];
      // copy the current particle attribute arrays
      for (int i = 0; i < pArray.length; i++)
      {
        tempArray[i] = pArray[i];
        tempArray2[i] = pSize[i];
        tempArray3[i] = pColor[i];
      }
      // set the global arrays to be the new updated arrays
      pArray = tempArray;
      pSize = tempArray2;
      pColor = tempArray3;
      // add the new Pvector to the pvector array
      pArray[pArray.length-1] = p;
      // add the new color to the color array
      pColor[pColor.length-1] = fillColor;
      // set the drawing style for the new particle
      noStroke();
      fill(fillColor);
      // set the size of the new particle
      float newSize = 2;
      // add the new particle size to the particle size array
      pSize[pSize.length-1]=newSize;
      // draw the new particle
      ellipse(p.x,p.y,newSize,newSize);
    }
 
    // loop through all particles
    for(int i=1; i < pArray.length; i++)
    {
      // move the particles y positions down
      pArray[i].y =  pArray[i].y + random(1,3);
      // get the particles distance from the center of the face
      float xDif = Math.abs(pArray[i].x - 6);
      // if the particle is to the left of center move it further left
      if(pArray[i].x <=6)
      {
        // base magnitude of move on distance from center
        pArray[i].x =  pArray[i].x - random(1,3)*.05*xDif;
      }
      // if particle is to the right of center move it further right
      else
      {
        // base magnitude of move on distance from center
        pArray[i].x =  pArray[i].x + random(1,3)*.05*xDif;
      }
      // increase the size of the particle
      pSize[i]= pSize[i]+random(0,1);
      // brighten the particle
      float tempH = hue(pColor[i]);
      float tempS = saturation(pColor[i]);
      float tempB = brightness(pColor[i])+13;
      pColor[i] = color(tempH, tempS, tempB);
      // set fill color to new brighter color 
      fill(pColor[i]);
      // draw the particle with all updated attributes
      ellipse(pArray[i].x, pArray[i].y, pSize[i], pSize[i]);
    }
  }
}
 
// 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 );
  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);
  }
}

Zack J-W 13 – 9 – 65

by zack @ 3:16 am

Zack's 13-9-65

 

This project was challenging for me in that I had not used ‘ArrayList’ , 2D arrays, or nested for-loops.  I spent the majority of my time understanding the logic and branching of the array data.  In the end I scaled back what began to look mostly like Nake’s 13-9-65 to better understand how the grid worked.

My interpretation of the Nake was that the seeming randomness around us has underpinnings of complex but elegant structure and that that can be synthesized particularly well by a machine built to process numbers.  While I ended with something I hope is evocative of nature I am personally intrigued by the synthesis.  This may lead to good things in the simulation project.

 

 

 

void setup()
{
  size(600,600);
  frameRate(1);
  stroke(1);
  noFill();
  smooth();
}
 
void draw()
{
  background(255);
 
  //Randomly generates new x (column) postions each time
  //thru the loop
  ArrayList xCoordinate = new ArrayList(); //Create a new x list
  int x = 0;  // The spacing of x (columns) begins from the left edge.
  xCoordinate.add(x);  //This fills the array with integers added to x
  while(x < width)
  {
    int xSpacing = int(random(10, width/4));  //the space from one 'column' to the next
    x += xSpacing;  //a number from above is assigned to the value of 'x'...
    xCoordinate.add(x);  //that number is added to the next position in the array.
  }
 
  ArrayList yCoordinate = new ArrayList(); //Create a y list
  int y = 0;  //The spacing starts at the top.
  while(y < height) //Until it hits the bottom,   {     int ySpacing = int(random(10, height/4)); //one of these numbers,     if (ySpacing > height)  //as long as they don't add up to more than the height,
    {
      y = height;
    } 
    else
    {
      y += ySpacing;  //will be added to the next y points which place the rows.
      yCoordinate.add(y);
    }
 
    ArrayList field = new ArrayList(); //Create a new array of points
 
    for (int j=0; j1 && i>0)
        {
          PVector p1 = field.get(j*xCoordinate.size()+i-1);
          PVector p2 = field.get(j*xCoordinate.size()+i);
          //draw objects positioned relative to those points.
          line(p1.x,p1.y,p2.x,p2.y);
          line(p1.x,p1.y,p1.x + random(25,75),p1.y + random(-50,50));
        }
      }
    }  
    //Draw randomly sized and placed circles independent of the 2d array above.
    for (int i=0; i

Luke Loeffler – Looking Outwards

by luke @ 3:07 am

Part of the Sentient City Survival Kit, the Serindipitor is an iPhone mapping app that gives you faulty, suboptimal directions to your destination in the hopes that you will stumble upon a new discovery along the way. It is interesting to think of how much power mapping applications have over traffic flow and what we ultimately see on a day to day basis. Entire neighborhoods can effectively become “blacklisted” in real life as electronic navigation becomes more common. My one suggestion on the app is to also mix in optimal directions occasionally to make it less obvious and visible.

 

Google Vase as seen on Today and Tomorrow

Daniel Michel searched for 8 different vases on Google Images. The rotation outlines of the 8 vases were arranged around a center and connected by minimal surfaces in a 3D construction software. Afterwards the textures were set on the surfaces and the vase was printed by a 3D-Printer in plaster.”

This project has been out for a while but a really compelling instance of digital fabrication techniques bringing segments of completely 2d objects to life in the form of a 3d mashup.

Horizon Notations

Although hand-drawn, these colorful drawings are still very much algorithmic, notating various features of the sky over time. One of the problems I have with computational/generative art is the lack of human touch and nuance. By executing computational techniques by hand (much in the way of Sol LeWit and countless others), the best of both worlds can be obtained. Click the drawing to see additional images in the series.

blase-13-9-65

by blase @ 2:58 am
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
// blase ur, imitation of 13/9/65 Nr. 2 by Frieder Nake
void setup() 
{
  size(500,500);
}
 
void draw() 
{
  // defining the circles
  int circlesNumber = 9;
  int circlesMaxSize = 100;
  float circlesLeftBias = 0.85;  // the circles seem to be biased towards the left
  // defining the horizontalish lines
  int linesNumber = 9;
  int linesAverageSegments = 7;
  float linesMaxChange = 0.12;  
  float linesTolerance = 0.4;
  float linesVerticalTolerance = height/linesAverageSegments*0.1;
  // create a background
  background(255,255,255);
  // draw circles
  drawCircles(circlesMaxSize,circlesLeftBias,circlesNumber);
  // draw lines (randomly choosing vertical vs. spider)
  float[] prevl = {0,0,width,0}; // prev1 is the previous line (going from the top), and nextl is the next one.
  float[] nextl; // we keep track of this so we can connect them with lines
  for(int n=0; n<linesNumber; n++) // loop through the horizontalish lines
  {
    nextl = linePoints(linesAverageSegments, linesMaxChange, linesTolerance, height/(linesNumber+1)*(n+1)+random(linesVerticalTolerance*-1,linesVerticalTolerance));
    drawLines(nextl); // draw the horizontalish line
    makeLines(prevl,nextl); // draw the vertical or spider lines in between the previous and current line
    prevl = nextl;
  }
  float[] lastl = { 0,height,width,height };
  makeLines(prevl,lastl); // draw the vertical or spider lines in between the previous and the bottom of the screen
  delay(2796);
}
 
void makeLines(float[] p, float[] n) // this function decides where to put lines from left to right, setting their boundaries.  it then randomly calls the vertical or spider lines function to draw those lines
{
 float minwidth = width*.05;
 float maxwidth = width*.15;
 int howmany = round(random(2,7));
 int h = 1;
 float[] startSpots = new float[howmany];
 float[] endSpots = new float[howmany];
 startSpots[0] = random(0,width-maxwidth);
 endSpots[0] = startSpots[0] + random(minwidth,maxwidth);
 boolean found = false;
 while(h<howmany)
 {
   float candidatestart = random(0,width-maxwidth);
   float candidatestop = candidatestart + random(minwidth,maxwidth);
   found = false; // this is a sentinel variable to make sure we don't have groups of either spider or vertical lines overlapping from left to right
   for(int t=0; t<h; t++)
   {
     if(((startSpots[t]candidatestart)) || ((startSpots[t]candidatestop)))
     {
       found = true;
       break;
     }
   }
   if(!found) // we're not overlapping, so randomly choose either vertical or spider and then call the function to draw it
   {
     startSpots[h] = candidatestart;
     endSpots[h] = candidatestop;
     if(random(1)<0.5)
     {
      verticalLines(startSpots[h],endSpots[h],p,n);
     }
     else
     {
       spiderLines(startSpots[h],endSpots[h],p,n);
     } 
     h = h+1;
   }
 }
}
 
void verticalLines(float spot1, float spot2, float[] p, float[] n) // draw vertical lines between the lines defined by p and n between the horizontal coordinates spot1 and spot2
{
  int minlines = 7;
  int maxlines = 14;
  int numlines = int(random(minlines,maxlines));
  // println("making " + numlines + " lines bw " + spot1 + " and " + spot2);
  for(int k=0; k<numlines; k++) // choose points
  {
    float xcoords = random(spot1, spot2);
    line(xcoords, giveYcoord(xcoords,p), xcoords, giveYcoord(xcoords,n));
   }
}
 
void spiderLines(float spot1, float spot2, float[] p, float[] n) // draw spider lines between the lines defined by p and n between the horizontal coordinates spot1 and spot2
{
  int minlines = 2;
  int maxlines = 7;
  int bottomlines = int(random(minlines,maxlines));
  int toplines = int(random(minlines,maxlines));
  for(int k=0; k<bottomlines; k++) // choose points for bottom
  {
    float xcoords = random(spot1, spot2);
    float xcoords1 = random(spot1, spot2);
    float xcoords2 = random(spot1, spot2);
    line(xcoords, giveYcoord(xcoords,p), xcoords1, giveYcoord(xcoords1,n));
    line(xcoords, giveYcoord(xcoords,p), xcoords2, giveYcoord(xcoords2,n));
   }
  for(int k=0; kpts[i])
  {
    i = i+2;
  }
  float totalRun = pts[i] - pts[i-2];
  float totalRise = pts[i+1] - pts[i-1];
  return pts[i-1] + (x-pts[i-2])/totalRun*totalRise;
}
 
void drawLines(float[] pts) // draw horizontalish lines
{
 int i = 2;
 while(pts[i]!=0)
 {
   line(pts[i-2],pts[i-1],pts[i],pts[i+1]);
   i += 2;
 } 
}
 
float[] linePoints(int seg, float change, float tol, float startingHeight) // generate a set of points defining the segments for the horizontalish lines.  returns in the form {x0,y0,x1,y1,x2,y2,...}
{
  float variance = width/seg*tol;
  float[] pts = new float[100];
  pts[0] = 0.0;
  pts[1] = startingHeight;
  int xi = 0;
  while(pts[xi]width)
    {
      pts[xi] = width; // next x
      pts[xi+1] = pts[xi-1] + (width-pts[xi-2])*delta; // next y
    }
    else
    {
      pts[xi] = pts[xi-2] + nextSeg; // next x
      pts[xi+1] = pts[xi-1] + nextSeg*delta; // next y
    }
  }  
  return pts; 
}
 
void drawCircles(int maxsize, float leftbias, int howmany) // draw howmany number of non-overlapping circles of random diameter up to maxsize
{
  int circlek = 0;
  float[] prevradius = new float[howmany];
  float[] prevx = new float[howmany];
  float[] prevy = new float[howmany];  
  while(circlek<howmany)
  {
    int circleSize = int(random(1,maxsize));
    int hCenter;
    if(random(1)<leftbias) // more circles seemed to be on the left in the original.  copy that by biasing towards the left side of the screen
    {
      hCenter = int(random(1+circleSize/2,width/2-1));
    }
    else
    {
      hCenter = int(random(width/2,width-1-circleSize/2));    
    }
    int vCenter = int(random(1+circleSize/2,height-1-circleSize/2));
    boolean allcool = true;
    for(int a = 0; a<circlek; a++) // make sure we don't overlap
    {
      if(sqrt(sq(prevx[a]-hCenter)+sq(prevy[a]-vCenter)) = sum of radii
      {
        allcool = false;
        break;
      }
    }
    if(allcool) // we don't overlap
    {
      prevradius[circlek] = circleSize/2;
      prevx[circlek] = hCenter;
      prevy[circlek] = vCenter;
      noFill();
      ellipse(hCenter, vCenter, circleSize, circleSize);  
      circlek = circlek+1;
    }
  }
}

Joe Medwid – 13-9-65

by Joe @ 2:43 am

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// Initialize VERY IMPORTANT variables
PVector[] horiz;
 
float currentYHeight;
void setup() {
  size(700, 700);
  background(255);
  smooth();
  noLoop();
  currentYHeight = 0;
    horiz = new PVector[9]; //horiz as in bottom border of line
}
 
 
void draw() { 
 
  // Variables
 
  PVector[] horiz2 = new PVector[9];
  horiz2[0] = new PVector(20, 20);
  float numCircles = random(6,8); 
  float[] sizeMult = {0,(-.5),(.5)};
  float currDist = 660;
  float prevPoint = 20;
  // Box
  rect(20, 20, 660, 660); 
 
  // Circle Construction
  for (int i = 0; i < numCircles; i++){
    float d = random(2,100);
    float xCirc = random(20+(d+1),660-(d+1));
    float yCirc = random(20+(d+1),660-(d+1));
    noFill();
    ellipse(xCirc, yCirc, d, d);
  }  
 
 
   float [] xCoord = new float[9]; //stores values for x lines dividing cols 
   xCoord[8] = 680;
   xCoord[0] = 20;
 
   // Columns
   for (int i = 0; i < 7; i++){ 
     int rand = int(random(1,3));
     float avg = currDist/(8-i);
     float x1 = avg + (avg * sizeMult[rand]);
    //line(prevPoint+x1, 20, prevPoint+x1, 680);
     prevPoint = prevPoint + x1;
     currDist = currDist - x1;
     xCoord[i+1] = prevPoint;
   }
 
  float ranY;
 
   // Make the Lines //
 
   for (int x = 0; x < 10; x++){  // 10 rows // 9
 
       if (x==0){
         //if it's the first iteration then top line is border 
           for (int z = 0; z < 9; z++){ 
             horiz2[z] = new PVector(xCoord[z], 20);}
 
            for (int z =1; z<9; z++) {
              line(horiz2[z-1].x, horiz2[z-1].y, horiz2[z].x, horiz2[z].y);}
       }
       // if it's the last, it's also a border
       if (x==9) {
         for (int z = 0; z < 9; z++){ 
             horiz[z] = new PVector(xCoord[z], 680);}
       }
       else {
           currentYHeight = currentYHeight + random(30,100);
 
          //create horiz 1
           for (int i = 0; i < 9; i++){ 
 
             ranY = currentYHeight - random(-15,15);
             if (ranY  680) {
                     ranY=680;
                 }
 
             horiz[i] = new PVector(xCoord[i], ranY);
             print(horiz2[i] + "vs/.  " +  ranY + "\n");
 
          }
 
           for (int i=1; i<9; i++) {
 
             line(horiz[i-1].x, horiz[i-1].y, horiz[i].x, horiz[i].y);
           }
 
       }
 
       //Fill the boxes with interesting things
       for (int j=0; j= 85){
           // Draw Lines!
         int verticalLinesTotal = int(random(4,11)); 
         for (int i=0; i= 70 && randDraw < 85){
          // Draw Triangles!
            int triangleTotal = int(random(5,10)); 
         for (int i=0; i= 55 && randDraw < 70){
           // Draw Triangles coming from the other direction!
            int triangleTotal = int(random(5,10)); 
         for (int i=0; i<triangleTotal; i++) {
            //find random X
            int ranX = int(random(xCoord[j],xCoord[j+1]));
            int ranX2 = int(random(xCoord[j],xCoord[j+1]));
            int ranX3 = int(random(xCoord[j],xCoord[j+1]));
 
            float m1 = (horiz2[j+1].y - horiz2[j].y) / (horiz2[j+1].x - horiz2[j].x);
            float topY = (m1*(ranX-horiz2[j].x)) + horiz2[j].y;
 
            float m2 = (horiz[j+1].y - horiz[j].y) / (horiz[j+1].x - horiz[j].x);
            float bottomY1 = (m2*(ranX2-horiz[j].x)) + horiz[j].y;
            float bottomY2 = (m2*(ranX3-horiz[j].x)) + horiz[j].y;
            triangle(ranX, topY, ranX2, bottomY1, ranX3, bottomY2);
 
          }
         }
       }
 
         println();
       //Switch up horiz and horiz2
       horiz2 = horiz;
       horiz = new PVector[9];
 
    }
 
}

Nir Rachmel | LookingOutwards-1

by nir @ 2:40 am

1. In the following link , I found a beautiful data visualization project by Jer Thorp. He was asked to visualize almost 140 years of the magazine Popular Science. The outcome is just beautiful, as can be seen – (Visualizing 138 Years of Popular Science Magazine. While is is a very creative idea, and very thoughtful, I wonder if the artist didn’t miss something. Besides being very aesthetically pleasing, this imagery does not convey any new information to the audience.

2. Another beautiful data visualization can be found in the following link. Following the riots in London, the artist mapped how misinformation could be spread on Twitter during a time of crisis. It’s visually appealing and invites the user to “play” with it for a while and learn. The user can choose different hoaxes and explore how the news spread among the twitter community. This kind of vizualization is very interesting, in my opinion, as it has political context and shows how twitter plays an important roles in these past few years’ events.

3. Last (but not least), Beautiful website. The interaction is very cool and engaging, but as always the case with these highly sophisticated html5 / css / js / flash techniques, one wonders what is the correct amount of “cool stuff”. Anything over that amount will very quickly lead to a slow website and impatient users not coming back ever again.

Nick Inzucchi – FaceOSC

by nick @ 2:25 am

Good Evening

I used FaceOSC to generate behavioral portraits of four presidents delivering dire addresses to the American people. Scan-lines represents the facial features of Obama following the BP oil spill, G.W. Bush responding to 9/11, Clinton apologizing for lying to congress, and G.H.W. Bush announcing the invasion of Kuwait. Each president has lines describing the X-Y motion of the eyebrows, eyes, nose, mouth, and jaw over time. I was interested in the particular gaze they adopt staring straight out into the lens. I played with different kinds of digital mark-making until settling on the small vectors above, finishing the whole piece in Photoshop to give a dire EKG-like effect.

KelseyLee-LookingOutwards-1

by kelsey @ 2:17 am

Light Invaders

by  Superscript² and Martial Geoffre-Rouland
Tech: Flash, WebApp, openFrameworks
[vimeo=https://vimeo.com/12048349]

Using Stealth Led this light installation displayed user created graphics and synchronized them to DJ sets. I was drawn to the project because of the immersive experience, merging music and lights together, filling a whole room and surrounding the concert goers. One thing however that I would like to see, would be this same experience in a more toned down setting, as seen in the behind the scenes video above. The power of the empty warehouse and the projections/music would have a completely different feeling than the intended visualizations for a concert (as seen below) and would provoke a different sort of contemplation.

[youtube=https://www.youtube.com/watch?v=CxREp9upZQY&feature=player_embedded#!]

Where is Your Art

by András Juhász Márton, Melinda Matúz, Gergely Kovács and Barbara Sterk
Tech:WebApp, mini Robots (with text to speech software)
[vimeo=https://vimeo.com/5858426]

When entering the room of this kinetic sound installation, these tiny robots begin to talk about art by using text to speech software and speaking recent tweets. I like the idea of how unusual it must be to see tiny robots acting like humans, by speaking text written by people. I especially like how the robots move seemingly in space, suspended above the ground with poles. However I’d want to focus more attention in on the robots because it was hard to hear them in the video, so I wasn’t sure what the impact of the actual text content would change the experience; possibly adding a microphone would allow the robots to have a stronger impact.

Still Life

Tech: Unity, C, Objects
[vimeo=https://vimeo.com/35109750]

This seemingly usual still life painting (Still Life by Scott Gardner) is actually a Unity made 3D model that is on a rotating mount. Using sensors, manipulations of the painting’s frame (eg. tipping it on it’s side) results in movement of painting’s contents, as if they were real. I’m inspired by the idea of blending the real world and a piece of art contained in a frame. Updating the still life, and adding this whole new level of interaction with the piece is a seemingly simple idea, and yet the provocative nature of this blending is very captivating. This piece was made with a television screen, I think it’d be interesting to take it a step further with a touchscreen instead, allowing for poking and prodding to be added to this set of interaction possibilities.

EvanSheehan-FaceOSC

by Evan @ 2:09 am

Facial System

[vimeo=https://vimeo.com/35555418]

I used the data from FaceOSC to generate a simulation of a planetary system. The idea is that everyone’s face should generate a slightly different planetary system. Often the orbits are not stable, so you can watch one of your eyes or your mouth slingshot around the sun and achieve escape velocity.

Each planet represents a facial feature, such as an eye, or eyebrow, or mouth. The masses of the planets as well as their distance from the sun are based on the distances of those features as measured by FaceOSC. Initial velocities of each planet are based on the face’s preliminary orientation, and the view translates and scales with the face; so you can get a closer look at your solar system by moving closer to the camera.

Source code on GitHub.

« Previous PageNext Page »
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2023 Interactive Art and Computational Design, Spring 2012 | powered by WordPress with Barecity