In light of the recent earthquake, Jer Thorp put this visualization together to highlight Haiti’s misfortunes over the past 29 years or so. He searched for the words on the left in NY Times articles associated with Haiti and its neighboring countries and charted them.

Jer’s blog can be found here: http://blog.blprnt.com/

This is a piece created by Nathaniel Mellor. It consists of three robot heads singing “freedom freedom freedom…” in a weird voice. It is slightly creepy and seems to exploit the the uncanny valley by looking realistic but behaving purposely robotic. The eyes roll around asymmetrically, unblinking. They don’t show emotion. The face of each head is basically a painted rubber mask and the machines behind it part and close the lips to simulate speaking. There are aspects that can be improved. Firstly, when a head speaks, it doesn’t move any facial muscles and so it doesn’t appear as though it is talking. Secondly, the head looks slightly blobby and unstructured in movement because the masks don’t have skulls to hold the shape. While there are other realistic-looking animatronic talking heads, what makes this work unique and likable is that it is purposely weird and disturbing.

Hey check this out:

Robotagger: GML + ABB4400 from Golan Levin on Vimeo.

PART A

  for (int i=0; i<90; i++) {
    beginShape();
    for (int j=0; j<1000; j++) {
      // linear eq for increasing period:
      float period = .098*j + 30;
      // calculate wave height at current point:
      float sinHeight = -sin(((float)j/period)*PI);
      // draw point:
      vertex(j,40 + i*spacing + sinHeight*amplitude);
    }
    endShape();
  }

PART B

PONG zip file

http://mergers.galaxyzoo.org/

While its not technically media art or design, I wanted to talk a little about Galaxy Zoo Mergers, a crowdsourcing effort by a website attempting to classify galaxy collisions. Take a look at the “Science” link on the site for an in-depth explanation of why they are doing this project and what its benefits are to science- but in short, to better understand galaxy collisions, scientists need accurate simulations of galaxy collisions and the human eye is better at helping create these than a pure computer simulation. They’ve created a Java applet which works like a game to have the user tweak simulations of galaxies to look like actual pictures of galaxy collisions. I thought this was an interesting solution to crowdsourcing- by making the participation fun and engaging, people are both entertained and feel that they are contributing something unique and important to the world of science.

XSine

<pre lang="ACTIONSCRIPT">

package {
import flash.display.Graphics;
import flash.display.MovieClip;

public class Sine1 extends MovieClip {
public var m:MovieClip;

public function Sine1():void {
m = new MovieClip();
m.graphics.lineStyle(0, 0x000000);
addChild(m);
for (var i:Number = 0; i < 90; i++) {
drawSine(3, 38 + 5.75 * i, -27, .02, 0.00064);
}
}
public function drawSine(sinX:Number, sinY:Number,
ampl:Number, step:Number, p:Number):void {
m.graphics.moveTo(sinX, sinY);
for (var i:Number = 0, j:Number = 9.3; i < 600; i += step, j += p) {
m.graphics.lineTo(sinX + i, sinY + ampl * Math.sin(i/j));
}
}
}
}

</pre>

Pong

This application, which runs on mobile phones, visualizes a person’s mobile communication usage patterns. Each connection is converted into a graphic based on its duration and type, and the results are all displayed together in a colorful, unique image.
I chose this example because I think it is a good instance of data being displayed in an aesthetically appealing, yet useful way. One can, at a glance, look at one’s own recent usage, including also the relative amounts of usage to each other, which could be useful as a type of “cellphone barometer”.
Since the rules of how to display data have become more solidified as communication design and interaction design have become more explored fields, it is refreshing to see an application which chooses a unique way of displaying information. It is unlikely, but perhaps this style will replace bar graphs for certain information.

Source: link

I didnt know where to begin “looking-outward”, so I did the first thing that came to mind – I googled “Interactive Art” and looked at the first video I found. Luckily, the video was a lot better that my google-ing skills.

** WordPress is being super difficult so I’m just gonna link to videos…

The video I found was about wooden mirrors. Basically, there is a camera that takes in an image, converts it to grayscale and pixelates it to the number of wooden pieces on the piece. Based on what color it wishes to represent, the different wooden chip “pixels” will rotate down or up (towards a ceiling spotlight) to make lighter and darker shades.

This video was kind of annoying because some of the wooden pieces were broken and didnt rotate, making the overall effect pretty bad, but explained the idea well. I found a related video that features a rotating peg wooden mirror that looks better but doesn’t explain anything.

What I found interesting is that the effect is actually very mirror-like when viewing it from far away, watching someone near it interacting with it. The closer you get to the mirror, the more detailed it can mirror your image, but the more abstract-looking it appears to you (like looking at pointillism really close). I also like that the mechanics are conceptually pretty simple, but that it basically simulates a video screen with just rotating pieces and making pieces darker by changing their angle in relation to a overhead spotlight.

This was fun! I used Processing to generate the sinusoidal lines and then cropped and scaled in Adobe Illustrator. Here’s my final rendition

And, here’s my code. I haven’t taken calculus for a few years now, so I based a lot of the sin math off of the trigg tutorial on the Processing website, located here.

float radius = 50;
float period;
 
// separating each curve vertically by 5px
int lineSpacing = 5;
 
void setup() {
  size(800, 500);
  background(255);
  noFill();
}
 
void draw() {
  background(255);
 
  // need to draw 90 parallel lines
  for (int j = 0; j < (89*lineSpacing+1); j += lineSpacing){
    curve(j);
  }
}
 
void curve(int ly){
    period = 1;
    stroke(0);
    beginShape();
    for(int i=0; i<width; i++) {
        vertex(i, singraph((float)i/50)*radius + ly);
 
        period = period - 0.0009;
    }
    endShape();
}
 
float singraph(float sa) {
  //scale from -1 to 1
  sa = (sa - 0.5) * 1.0; 
  sa = sin(sa*2*PI*period)/2 + 0.5;
 
  return sa;
}

Electric Sheep

Electric Sheep by Scott Draves is an interesting interactive piece which reminds me of Karl Sims’ Evolved Virtual Creatures.    The “Electric Sheep” are high resolution fractal animations that are collectively rendered on all “sleeping” computers which have the program installed, and they are then displayed as screen savers.  The interesting part is that users can actually vote on the animations with the arrow keys, which evolves the fractal into something that is perceived as beautiful by the collective user base.  Furthermore, the “genome” of these beautiful “sheep” are then merged withe those of other popular “sheep” of the past to hopefully evolve the animation into a fractal even better then it’s predecessors.

Video

I downloaded the program to try it out, but unfortunately I didn’t have much luck with it.  A message informs you that the first :sheep” will probably take a few seconds to appear, but may take as long as a few hours.  I left it running on my computer overnight and awoke to firewall errors instead of pretty pictures, and half and hour after resolving them I still don’t see anything–since the program is render intensive, I’m wondering if my old computer just doesn’t have enough power to run it. It’s too bad since I was really hoping to mess around with it and observe how the evolution process occurs, particularly if my inputs had any visible effect on the “sheep”.  I’ll check back on it tonight to see if any “sheep” have appeared yet…

PART A – Noll Sinusoids

The PDF file:

The code:

// Project 0 - Part A
// "Noll Sinusoids"
// Course:Special Topics in Interactive Art & Computational Design
// By: Mehrdad Ghods
// For project description please visit:
// "https://ems.andrew.cmu.edu/2010spring/projects/project-0/"
 
import processing.pdf.*;
 
// declare width and height of PDF page
int widthPDF = 800;
int heightPDF = 600;
// declare Sinusoid starting Y
float sinusoidY;
// declare margin
float margin = heightPDF / 20;
 
///////////////
// Main Methods
///////////////
 
// this method initialize renderer
// in this case pdf file renderer
void setup() {
  // create a 800X600 pixel one page PDF file
  //size(widthPDF, heightPDF);
  size(widthPDF, heightPDF, PDF, "NollSinusoids.pdf");
  // determine weight of strokes on 10
  strokeWeight(1.15);
  // draw anti-aliased edges
  smooth();
  // make background white
  background(255);
}
 
// this method draw using initialized renderer
void draw() {
  // draw 90 Sinusoids
  for(int i = 0; i < 90; i++){
    // determine sinusoid starting Y
    sinusoidY = margin + i * (heightPDF - (2 * margin)) / 90;
    // draw a Sinusoid
    drawNollSinusoid();
  }
  exit();
}
 
////////////////
// Helper Mthods
////////////////
 
// this method draw Noll a Sinusoid
void drawNollSinusoid(){
  // declare Sinusoids local X and Y
  float sinusoidLocalPX = 0;
  float sinusoidLocalX = 0;
  float sinusoidLocalPY = 0;
  float sinusoidLocalY = 0;
  // declare precision of drawing
  float precision = 1.0;
  // declare Sinusoid's properties
  // 1- amplitude
  float A = 5 * margin / 6;
  // 2- reverse of spatial frequency
  float k = 1.0 /(widthPDF / 120);
  // 3- phase
  float phase = 0;
 
  // draw Sinusoid by moving a point along page width, with height
  // determined by Sinusoid equation which is:
  // Y = A.Sin(k.X + phase), k divided by a linear function
  // each PI radians.
  while (sinusoidLocalX <= float(widthPDF)) {
    // to create a smoother view two points be calculated
    // and a line between them be drawn
    // increase X by one
    // calculate pervious X
    sinusoidLocalPX = sinusoidLocalX;
    // calculate X
    sinusoidLocalX += precision;
    // calculate Y - 1
    sinusoidLocalPY = sinusoidY - A * sin((PI / 180 * sinusoidLocalPX) / k);
    // calculate Y
    sinusoidLocalY = sinusoidY - A * sin((PI / 180 * sinusoidLocalX) / k);
    // draw a point od Sinusoid
    line(sinusoidLocalPX, sinusoidLocalPY, sinusoidLocalX, sinusoidLocalY);
    k += 0.0001 * (widthPDF / 120) * precision;
  }
}

PART B – Tennis for Two

The link to applet:

Tennis for Two

The link to code: (Copy & Paste txt into processing environment, save the file, and run it!!!)

Tennis for Two Code

As a sort of follow up to Karl’s post about augmented reality in the public eye, I thought I would talk about a couple of places one might find AR lately

The first relates to Avatar.  All of the toys for this movie come with a stand that seconds as what is called an “I-Tag”.  These, in combination with free software from the movie’s website, allow kids to “hold” models from the movie in their hand.  With certain combinations of I-Tags, the virtual creatures will even interact!

Watch this nifty video that WordPress refuses to embed! Then continue reading.

As seen in the video above, Lego is doing something similar.  Simply hold the box up to the screen, and it will show you a digital representation of what it will look like after having been built.  I was lucky enough to experience this kind of display on a recent trip to Disney Land in California, and have to admit, it’s a nifty little feature to have at your fingertips.

Read More Here

Part-A (In the USA)

graphics.lineStyle(1);
for (var why=50;why<590;why+=6){
	graphics.moveTo(0, why);
	for(var i=0;i<600;i++)
		graphics.lineTo(i, (why) - Math.sin(i/(10+(.03*i))) * 30);}

Part-B

USE LEFT AND RIGHT ARROW KEYS TO PLAY! ^_^

(embedding makes it buggy)

click below to play if it isnt working

http://icuredaids.com/Golan/STIAandCD/Project0/PongGame/PONG.swf

int linePlacement = 50;  //Y placement of first curve
int spacing = 5;         //Spacing between each curve
int amplitude = 30;      //Height of wave
float period = 30/PI;    //Initial period of wave
float curveData [];      //Container for Y data for single curve
 
void setup(){
  size(600,587);
  noLoop();  //Lets program run only once
  smooth();  //Smooths drawn elemens
 
  curveData = new float[width]; //Stores data for single curve
 
  background(255); //Set background to white
  stroke(0);  //Curve color is Black
  strokeWeight(.75);
 
  //Calculate Y data for a single curve
  for(int i=0; i< numberOfCurves; i++){
    for(int j=1; j < curveData.length; j++){
     line(j-1, curveData[j-1] + linePlacement + spacing*i, j, curveData[j] + linePlacement + spacing*i);  //Draw line part of curve
    }
  }
}

Download Source

Pong Main Code:

//1 Player Pong - Michael Hill
 
Player player1;
 
Ball ball;
 
boolean gameOver = true;
int highScore = 0;
int currentScore = 0;
 
PFont font;
 
//Holds keys that are currently pressed
ArrayList keysHeld;
 
void setup(){
  size(800, 400);
  frameRate(60);
  font = loadFont("VectorBattle-25.vlw"); //Loads font
  textFont(font); //Sets current Font
 
  keysHeld = new ArrayList();
  ball = new Ball();
 
  player1 = new Player(1);
 
}
 
void draw(){
  background(255);
 
  //Print Scores
  fill(60);
  text("High Score:" + highScore, width-textWidth("High Score:" + highScore)-10, 30);
  text("Current Score:" + currentScore, width-textWidth("Current Score:" + currentScore)-10, 60);
  fill(255);
 
 
  //Set High Score if necessary
  if (currentScore > highScore){
    highScore = currentScore;
  }
 
  processKeys();
  player1.drawPlayer();
 
  testBounce();
 
  if (gameOver == true){
    fill(0);
    text("Press Space To Begin", width/2-textWidth("Press Space To Begin")/2, 150);
 
    fill(255);
  }
  ball.drawBall(); 
}
 
void testBounce(){
   if (ball.posX = 0){
      if(ball.posY-30 >= player1.posY && ball.posY-30 <= player1.posY + 50){
        ball.posX = 41;
        ball.dX *= -1;
        ball.dX += 2;
        ball.dY += random(-2,2);
      }
      currentScore++;
   }
   else if (ball.posY = height - 10){
     ball.dY *=-1;
     currentScore++;
   }
   else if (ball.posX + 10 >= width){
     ball.dX *= -1;
     currentScore++; 
   }
   if (ball.posX < 20){
     gameOver = true;
   }
}
 
//Handles Key presses by pushing them to an array
void keyPressed() {
  int arrayIndex = 0;
  int totalKeys = keysHeld.size();
 
  if (totalKeys <= 0){
    KeyPress pressed = new KeyPress(keyCode);
    keysHeld.add(pressed);
  }
 
  else {
 
    for(int i = 0; i<totalKeys; i++){
      println( "Key " + i + " being analyzed");
      KeyPress pressed = (KeyPress) keysHeld.get(i);
      println ( String.valueOf(keyCode) + " was compared to " + String.valueOf(pressed.pressed));
      if (pressed.pressed == keyCode){
        break;
      }
      arrayIndex = i + 1;
    }
 
    //If the loop finished without breaking, add key to list
    if (totalKeys == arrayIndex){
      KeyPress pressed = new KeyPress(keyCode);
      keysHeld.add(pressed);
    }
  }
}
 
 
//Pops key from array when released
void keyReleased(){
  for(int i = 0; i < keysHeld.size(); i++){
    KeyPress pressed = (KeyPress) keysHeld.get(i);
    if (pressed.pressed == keyCode){
      keysHeld.remove(i);
    }
  }
}
 
 
//Checks all current keys that are held and runs their actions
void processKeys(){
  for (int i = 0; i < keysHeld.size(); i++){
    KeyPress currentKey = (KeyPress) keysHeld.get(i);
    if (currentKey.pressed == UP) {
      player1.moveUp();
    } 
    if (currentKey.pressed == DOWN) {
      player1.moveDown();
    } 
    if (currentKey.pressed == 32 && gameOver == true) {
      ball.resetBall();
      gameOver=false;
      currentScore = 0;
    }
  }
}

Download Source
Play

Often I see articles in Make Magazine and other maker-themed publications featuring wearable computing projects. Wearable computing is the idea that computing devices can be embedded in our clothing to augment our experience with electronically-accessible information. Using these devices we can become more aware of our surroundings and sense things beyond our natural senses. The field is increasingly popular in forward-thinking research environments like IDEO and The MIT Media Lab. Often I’m impressed by the technology used in the projects, but end up doubting I’ll be putting LEDs into my clothing anytime soon.

Typing wearable computing into Google Images gives you an idea of the problem. Wearable computing at its best is quirky—a wearable coin-slot detector, Leah Buechley’s turn signal biking jacket—and at its worst (the stuff Google finds) it’s clunky, distracting, and unattractive. Most projects take the form of clunky wristbands, goofy goggles, and stiff vests covered in wires. Some broadcast unnecessary information in a noisy way that doesn’t do favors for anyone. Most people don’t care to see a readout of your heartbeat on your earrings or watch TV on your t-shirt. There’s a reason why the sound equalizer shirt is sold exclusively at ThinkGeek.com.

In the real world, our clothing communicates in much subtler ways that the flashing of an LED: buttoned or unbuttoned, baggy or tight, neck lines, sweat stains, and wrinkles. If wearable computing is to succeed with a mainstream audience I believe it will have to learn to speak their language. Instead of forcing information through new, uncomfortable, and often unfashionable modes of fabric-based communication, wearable computing should be executed using the metaphors we’ve already created through thousands of years of expression through fashion.

Adidas’s Adidas 1 sensor shoe does a good job of embedding technology in an easy-to-grasp form. I believe projects like these will make wearable computing easier for people to accept.

Of course, I shouldn’t entirely discount the clunky visors and flashy t-shirts. Often the avant-garde ends up assimilating into the mainstream over time. It’s entirely possible that someday we could be wearing augmented reality goggles to work every day. In addition, projects like these were important in spawning the LilyPad Arduino, wider distribution of conductive thread, and other building blocks for future computing textile innovation. However, I think there’s room for a more refined implementation of technology in clothing that is less Star Trek and more Devil Wears Prada. Because, really, I would love to have a TV on my shirt if only I could wear it without being laughed at.

Part A:

code:

void drawNollSinusoids() {
  for (int i = 0; i < 90; i++){
    noFill();
    stroke(0);
    beginShape();
    period = (float) 0.125;
    for (int j = 20; j < 580; j++){
      x = j;
      y = 30 + (20 * sin( radians(j) / period ));
      curveVertex(x, y+(5*i));
      period += 0.0005;
    }
    endShape();
  }
  exit();
}

————————————

Part B:

Project 0, Part B

I originally had text in the background displaying the score, which used a font I downloaded from online, but it caused a lot of issues when uploading. The zip file containing the text version is still in my uploaded folder if you would like to view it.

Also, maybe I’m just being stupid, but it wouldn’t let me embed the game with iframe. Did anyone else have these problems?

Video

I have been thinking about what does the radio around us look like.  The project “Immaterials: the ghost in the field” is about visualizing the spatial qualities of RFID from Timo Arnallof the Touch project and Jack Schulze of BERG. The lack of touch feature of RFID has made it “magic” for many system we interact with everyday.They believe that better understanding this invisible feature will help designers to design better interaction.

Project zero part 1

PDF:

Code:

import processing.pdf.*;

size (650,600,PDF,”project0.pdf”);
smooth();

background(255);
strokeWeight(.6);

int Amplitude = 30;
int yDistance = 70;

for(int i=0; i<90; i++){
for(int x=0; x<600; x++){

float period = map(x, 0, 599, 60, 180);

float y1 = Amplitude * (-sin(x*2*PI/period)) + yDistance;
float y2 = Amplitude * (-sin((x+1)*2*PI/period)) + yDistance;

line(x, y1, x+1, y2);
}
yDistance += 5;
}

Project zero part 2

Applet:

My version of pong tracks the players progress by changing the color of the background each time the player catches the ball with his paddle

click on the link to play:

gabi-project-0

Code:

////BALL

//ball velocity x

float velX=(int)random(4,10);

//ball velocity y

float velY=(int)random(4,10);

//ball pos x

float ballPosX = random(100, 700);

//ball pos y

int ballPosY = 20;

int bgd=255;

////PADDLE

//paddle pos x

int padPosX = 400;

////SETUP

void setup(){

size(800, 800);

}

////DRAW

void draw(){

background(bgd);

ballPosY += velY;

ballPosX += velX;

fill(238, 58, 140);

ellipse(ballPosX, ballPosY, 20, 20);

fill(93, 252, 10);

rect(padPosX, 780, 80, 10);

//update position of paddle

padPosX = mouseX;

//update position of ball & check to see if ball is touching padding

if(((ballPosY) >= 760) && ((ballPosX) < (padPosX+80)) && ((ballPosX) > (padPosX)) ){ //if ball hits paddle in the middle

ballPosY = 759;

bgd -= 20;

velY = -1 * velY;

velX = velX + (int)(((padPosX+40)-ballPosX) / 10);

}

//check to see if ball is touching boundaries

else if(ballPosY < 0){ //if ball hits top boundary

velY = -1 * velY;

}

else if(ballPosX < 30 || ballPosX > 770){ //if ball hits side boundaries

velX = -1 * velX;

}

//check to see if ball misses paddle

else if(ballPosY > 840){ //if ball misses paddle

ballPosX = random(100,700);

ballPosY = 20;

velX = random(4,10);

velY = random(4,10);

delay(500);

bgd=255;

}

}

A. Ninety Parallel Sinusoids

Download PDF (209k)

for (int y_cnt=0; y_cnt < 90; y_cnt++)
 
{
 
  float period = 0.10;
 
  beginShape();
 
  for (int x=0; x < width; x++)
 
  {
 
    float y = 20 * sin (radians(x) / period);
 
    vertex (x - 15, y + 100 + (y_cnt * 6));
 
    period += 0.00056;
 
  }
 
  endShape();
 
}

B. Pong

Click here to play

Click here for source

Sinuoids

View Sinusoids

float x, y;
float amplitude = 30.0;
float offsetX, offsetY;
float period;
 
void setup() {
  size(640, 600);
  background(255);
}
 
void draw() {
  stroke(0);
  noFill();
  drawNollSinuoids();
 
  println("Finished.");
  exit();
}
 
void drawNollSinuoids() {
  for (int i = 0; i < 90; i++) {
    // Set the period (reciprocal of frequency) to that of the first curve.
    // offsetY pushes the sine curve into the view and then incrementally pushes it down farther
    // to create the optical illusion.
    period = 30 / PI;
    offsetY = 50 + i * 5.5;
    offsetX = PI;
 
    // Begin the shape for this line.
    beginShape();
 
    for (x = 0; x < width; x++) {
      // The first part of this equation sets the position of the line so that we get 90 iterations.
      // y = a sin(bx + c) + d where
      // y = a sin(x/b + c) + d
      // a = amplitude,
      // b = frequency,
      // c = x offset,
      // d = y offset
 
      // Create the curve equation.
      // We offset the X by PI to push it to the left one period for the desired effect. 
      y = sin(x / period + offsetX);
 
      // Reverse the x values so that we get the higher frequency waves first, and lower frequency waves gradually,
      // then create the vector point.
      vertex(x, amplitude * y + offsetY);  
 
      // Increment the period
      period += 0.038;
    }  
    // End the shape for this line.
    endShape();
  }
}

Pong (1.0)
This version uses keyboard navigation (Up and Down keys).

Go see Pong (1.0).
View source (1.1)
View source (1.0)

Changes

• Added scores (in console)
• Fixed enemy AI