Part A: Noll

Written in Math

Latex Version

y=\frac{1}{45}\left( \sin \left( \frac{2\pi \cdot x}{x+1} \right)+\frac{a}{10} \right)

PDF rendered by Apple Grapher:

Part B: Pong

Written in Javascript (with help from rightjs) for HTML5 canvas.

Play Here

The source is on github

http://diametunim.com/shashi/nyc_subways/

Looking around, I found a neat infographic showing how many riders ride each train like in New York City, by year, for the past 40 or so years. Having grown up in NYC, I’ve loved the subways since I was young, even though they’re gross. Regardless, I think that these kinds of infographics can be important from both a design and culture point-of-view.

If you look at this one in particular, you can see the evolution of the subway service. While it’s much older than the oldest date recorded, the addition of new lines and the responses to those new lines by the public can be seen, and it becomes kind of a neat history lesson. However, more interestingly, if you look at the variation in usage between certain lines over time, you can start to think about what is happening economically and socially in the neighborhoods that the line falls across. Perhaps there was some sort of economic stimulation in one year by a major corporation moving in, or maybe some sort of migration away happened because of some other reason. That kind of information becomes very interesting because it cues the user to maybe research more, and at the very least think more about the the information that is being presented to them, opposed to letting it come in one ear and go out the other.

Google Maps…yes, google Maps. From the article:

what’s really impressive about the system is the extremely efficient use of crowdsourcing to generate the information. When used on phones with GPS, Google Maps crowdsources huge batches of data on how fast you’re travelling on a particular street, thus measuring traffic for fellow drivers….Imagine if you knew the exact traffic speed on every road in the city – every intersection, backstreet and freeway on-ramp – and how that would affect the way you drive, help the environment and impact the way our government makes road planning decisions.

Croudsourcing as art? Is it even interactive if people don’t know their data (GPS traces) are being used? I think it’s really interesting how many many people can be used to inform a visualization, some unknowingly passing their data along. This seems like some of the pieces that capture aspects of willing participants and then displays them later.

This reminds me somewhat of the following heatmaps from a game. They show where all the action occurs. the first image shows the global action for all users, and the other shows all of my action.

Anyways, something perhaps a little more related is the Ring Wall:

ring°wall from SENSORY-MINDS on Vimeo.

(WordPress keeps deleting my embedded video!)

I think this is a technical achievement–a giant touchscreen putting the MS Surface to shame–with also a great future potential in “war rooms” like at NASA or other large design projects. I think it’s interesting that the people in the video seem to be playing with the installation, just pushing each screen as they walk by, instead of reading the content there.

/*project-0 reproduce Michael Noll's computer art:
Ninety Parallel Sinusoids With Linearly Increasing Perio*/
float yoffset=40;
float amplitude=30;  //the 1/2 of y peak-to-peak difference
float period=30/PI;  //the initional x wavelength
float shift=PI;      //the amount that shift to left
 
void setup(){
  size(590,590);
  background(255);
  smooth();
  noFill();
  noLoop();
}
 
void draw(){
  stroke(0);
  for(int i=0;i<90;i++){   //reproduce the curve 90 times with different yposition
    beginShape();
       for(int x=0;x<=width;x++){
       float y = amplitude*sin(x/period+shift)+yoffset; // y=asin(bx+c)+d
       vertex(x,y);         //draw cruve
       period+=PI/100;      //linearly increase the period
     }
    endShape();
    period=30/PI;  //reset the period
    yoffset+=5.8;  //shift the yposition down
  }
}

Kuan-Ju’s Crazy Pong

Kuan-Ju’s Crazy Pong is super crazy. Every time when the ball hits the paddle, the ball moves faster and the paddle gets shorter. The color of background changes when the ball bounces the paddle, which will disturb you and drive you crazy. Let’s see how long you can stay alive.

SixthSense Technology 1
SixthSense Technology 2

I would like to introduce the next generation wearable computer, SixSense Technology. This technology is invented very recently in the MIT Media lab. The basic idea is not very new such as using projector, virtualizing the real world objects and manipulate it wirelessly on the personal screen. However this video shows that in the near future, our traditional computers can be disappeared. Instead, very small and cheap necklace-shaped device can substitute our computer devices and all we need are our fingers and a white color surface. (this can even be a piece of paper).

I thought this invention is very innovative and has a huge potential. Because this is still the beginning step and has many questions to consider such as “can projector quality(resolution, brightness) be good enough to be a subsutite of a traditional monitor?” or “to make the screen not shakable, should users try not to move at all? because the projector is attached to the users body.) Regarding to our class, this is a good example of augmented reality. As a bridge between the real world and the virtual world, we can design a product or art in this class.

While looking through The New York Times’s infographics, I found this fun gem: http://www.nytimes.com/interactive/2009/08/29/opinion/20090829-smell-map-feature.html. I thought it was fantastic because it was an unusual representation of unusual data that nevertheless incorporated and relied on interaction to tell its story. I think it’s fantastic that he went out and “collected data” himself, since as said in class compelling visualizations are based on interesting information, and this unusual source is colored by the personal nature of the “data.” He could have gone the route of crowd-sourcing the smells/index popular opinion to add some credibility to his representation of NY, but that would have made it so much less interesting. Also I like how he based the visualization on a navigating the city by nose, which gives a linear structure for the infoviz, while simultaneously adding a personal NY touch as the viewer is invited to imagine literally walking through the city, notebook in hand. Overall the strength of the piece definitely comes from the nostalgic, personal nature, and I think the data, the format, and the illustrations all manage to drive this home, making an infoviz successfully go somewhere most infoviz does not.

Part A: HTML, Source code
Part B: HTML, Source code

Part A – Noll Knockoff

import processing.pdf.*;
 
//Project 0 
//Solomon Bisker
 
//Some code adapted from Sine Wave example at processing.org
//by Daniel Shiffman (since a the fastest way to learn an API is to study
//someone else's code)
 
int xspacing = 1;   // Initial spacing difference (base value for dx)
int w;              // Width of entire wave
 
int yoffset = 5; //Spacing between horizontal waves, in pixels
 
float theta = 0.0;  // Start angle at 0
float amplitude = 75.0;  // Height of wave
float baseperiod = 100.0;  // How many pixels in a full cycle for first period
float dx;  // Intermediate value for incrementing X (recalculated each time)
float[] yvalues;  // Using an array to store height values for the wave
 
void setup() {
  size(800,800);
  noLoop();
  beginRecord(PDF, "nollknockoff.pdf");
  smooth();
  w = width;
  //Calculate initial dx (with period of 1)
  dx = (TWO_PI / baseperiod) * xspacing ;
  yvalues = new float[800];
}
 
void draw() {
  //Let's just calculate the wave once and draw it 90 times.
  //Seems faster.
 
  //First, calculate and store the wave values
  calcWave();
 
  //Now, we draw the wave 90 times.
  //i simply tells us which wave it is (triggering appropriate
  //horizontal offset in its rendering)
  for (int i=0; i < 90; i++){
      renderWave(i);
  }
  //Stop writing to PDF; finish saving PDF.
  endRecord();
}
 
 
void calcWave() {
 
  // For every x value, calculate a y value with sine function
  float x = theta;
 
  //We create the "increasing period" by calcuating the regular value of
  //a normal sine function, but just offsetting x each time a linear amount
  //and using interpolation between each point (curveVertex).
 
    for (int j = 0; j < yvalues.length; j++) 
    {
    //Store that calcuated value
    yvalues[j] = sin(x)*amplitude;
 
    dx = (TWO_PI / baseperiod) * xspacing / (float) (1+(float) j/100) ;
    x+=dx;
    }
 
}
 
 
void renderWave(int i) {
  // A simple way to draw the wave with an ellipse at each location
  //We draw the waves from page top, downward as i increases
 
  //For each x,y  pair in the function, draw a point, with y value
  //offset by i times some y offset constant...
 
  noFill();
  beginShape();
  for (int x = 0; x < yvalues.length; x++) {
    curveVertex(x*xspacing,i*yoffset+amplitude+yvalues[x]);
  }
  endShape();
 
}

Part B – Pong

It doesn’t seem to like this whole embed thing, so here’s the link to the index page:

Pong (In Stunning Terminal Green)

Both projects can be view at:
http://jordansinclair.com/STIA/Proj0-1/ <–sin wave
http://jordansinclair.com/STIA/Proj0-2/ <–Pong

So, I realized that Noll used a black and white printer and monitor to display his piece… He really had color in there 🙂

Here’s the ugly loop, unabridged:

for (int j = 0; j < 90; j++){
noFill();
stroke(r, g, bee);
beginShape();
float b = .125;
for (int i = 0; i < width+xOffset; i++){
float x = i-xOffset;
float c = PI;
float y = yOffset + topPadding + (amplitude*sin(radians(i)/b));
b += .00054;
curveVertex(x,y);
}
endShape();
r-=(252/90);
g-=(164/90);
yOffset += 5;
}

And now for pong:
http://jordansinclair.com/STIA/Proj0-2/

since the iFrame thing is wack.

Like everyone else, my iframes didn’t seem to work so here are links:

davidyen_project0a
sinusoids.pdf

davidyen_project0b

Here’s a link to my single player Pong game.

I used Processing to develop this simple program. I got a lot of help from the “Bounce” example provided by Processing here because I have never made an object bounce using processing before.

Part A
Not sure if the iframes are working for me, if not the links should still work.

caryn_project0.0

float angle = 90.0;
float padding = 0.015;
float count=0.0;
int start=50;
 
for(int i=0; i<90; i++) {
  count=0.0;
  angle=90.0;
  beginShape();
  for (float x=5.0; x<=width; x+=1) {
    float y = start+(cos(angle)*40.0);
    x += count*padding;
    vertex(x, y);
    angle+=PI/35.0;
    count++;
  }
  endShape();
  start += 5;
}

Part B
caryn-project-0

float ballX;
float ballY;
float ballXv;
float ballYv;
 
void setup() {
  size(300,300);
  smooth();
  noStroke();
  reset();
}
 
void draw() {
  background(24,201,234);
  ballX +=ballXv;
  ballY += ballYv;
 
  ellipseMode(CENTER);
  ellipse(ballX, ballY, 10, 10);
 
  //paddle
  rectMode(CENTER);
  int px=290;
  int ph=30;
  int ppos= constrain(mouseY, 0 , height);
  rect(px, ppos, 5, ph);
 
  //test for boundaries
  if (ballX < 0) {
    ballXv*=-1;
  }
  if ((ballY  height)) {
    ballYv*=-1;
  }
  if (((ballX>285) && (ballYmouseY-(ph/2))) {
    ballXv*=-1;
  }
}
 
void mousePressed() {
  reset();
}
 
void reset() {
  ballX= 1;
  ballY= height/2;
  ballXv= random(2.5, 3.5);
  ballYv= random(-1, 1);
}

While browsing for essays on the intersection of art and technology, I came upon this course website. Going through the syllabus and schedule, I found the topics interesting as it paralleled discussions of data-based art while introducing programming. It’s interesting to to think about what advantages technology affords us, in both art and in general. And in this case, the emphasis lies on its ability to work and store data.

The course emphasizes the importance of data and memory, as it is the artifact which continues on. One of the powers of computers is the ability to retain large quantities of information, and making it easy accessible. The course website seemed a bit dated with its emphasis on PHP and MySQL but the concept carries. Tying back to the class, this would fall under the category of information visualization and representation.

Some data-driven media art examples were provided:
http://www.theyrule.net/2004/tr2.php – interesting data visualization
http://www.manovich.net/cinema_future/toc.htm – videos put together by an algorithm
http://parole.aporee.org/ – a dynamic dictionary of a contemporary city

Perhaps these weren’t the most interesting projects I found but it got me to step back for a second to think how all the tools that we have today change the art we make. With access to computers and software, we have new ways to present ideas. In addition to access to information, technology allows for interaction, computation, and also an ability to activate physical spaces.

Part A

void draw()
{
  background(#FFFFFF);
  int waveHeight = 30;
  for (int i = 0; i < 90; i++)
  {
    int yOffset = waveHeight + 10 + (i * 8);
    beginShape();
    for (float x = 0; x < 360; x+=5)
    {
      float y = ((TWO_PI*4) * (radians(x)/TWO_PI)) + (PI*3/4);
      curveVertex(sq(x)/120, yOffset + (waveHeight * sin(y)));
    }
    endShape();
  }
}

Part B

I also for the life of me cannot get the iframes to work, so the applet can be found here.

Ball myBall;
Paddle myPaddle;
 
void setup()
{
  size(400, 400);
  rectMode(CENTER);
  ellipseMode(CENTER);
  noStroke();
  fill(#FFFFFF);
  myPaddle = new Paddle();
  myBall = new Ball();
  noCursor();
  smooth();
}
 
void draw()
{
  background(#000000);
  myBall.display();
  myPaddle.display();
  myBall.move();
  if (out()) { myBall.reset(); }
  if (boundaryCollision() || paddleCollision()) { myBall.changeDir(); }
}
 
void mouseMoved()
{
  float hOffset = myPaddle.h / 2;
  myPaddle.ypos = constrain(mouseY, 0 + hOffset, height - hOffset);
}
 
boolean out()
{
  if (myBall.xpos <= 0) { return true; }
  return false;
}
 
boolean boundaryCollision()
{
  if (myBall.xpos <= 0) { return false; }
  if (myBall.ypos <= 0 || myBall.ypos >= height) { return true; }
  if (myBall.xpos >= width) { return true; }
  return false;
}
 
boolean paddleCollision()
{
  float pTop = myPaddle.ypos - (myPaddle.h/2);
  float pBot = myPaddle.ypos + (myPaddle.h/2);
  if (myBall.ypos <= pTop || myBall.ypos >= pBot) { return false; }
  float bLeft = myBall.xpos - (myBall.w/2);
  float pLeft = myPaddle.xpos + (myPaddle.w/2);
  if (bLeft  (pLeft-3)) { return true; }
  return false;
}
 
final class Ball
{
  float xpos = width/2;
  float ypos = height/2;
  float[] dir = {-3, 2};
  int w = 20;
 
  void display()
  {
    ellipse(xpos, ypos, w, w);
  }
 
  void move()
  {
    xpos += dir[0];
    ypos += dir[1];
  }
 
  void changeDir()
  {
    if (ypos <= 0 || ypos >= height) { dir[1] *= -1; }
    else { dir[0] *= -1; }
  }
 
  void reset()
  {
    xpos = width/2;
    ypos = height/2;
    dir = new float[2];
    dir[0] = -3;
    dir[1] = 2;
  }
}
 
final class Paddle
{
  float xpos = 25;
  float ypos = height/2;
  int w = 15;
  int h = 60;
 
  void display()
  {
    rect(xpos, ypos, w, h);
  }
}

Inside the AlloSphere

I’ve spent a lot of time looking at data visualizations, so while hunting for something new, I came across the AlloSphere. They call it a “large-scale immersive laboratory”, and it is basically a big dome structure inside of which are large projections with which people can interact in many different ways, such as bodily movements and audiovisual cues. Although it is a massive project in and of itself, it wasn’t created to showcase any one specific visualization; rather, the idea is to allow others with extremely complex data visualization projects (especially of a scientific nature) to utilize this space to navigate information using even more rich and meaningful interactions than we can get just by looking at an average-sized computer screen. Or, as they so aptly put it:

It is also like a violin or a symphony orchestra – an instrument to compose for and to play.

This project stuck out to me as interesting because it shows how increasingly scientists and engineers are partnering with artists and designers to solve some of their most difficult problems, and how such multidisciplinary teams can not only solve individual specific problems using data visualization and interactive media techniques, but to create complex toolkits (in a way) for others to do the same.

Here is the TEDtalk, if you’re interested in learning more:

AlloSphere TEDtalk

Part A. Noll Pattern

/* @Cheng 
 @Jan 11, 2010
 Ninety Parallel Sinusoids With Linearly Increasing Period
 https://ems.andrew.cmu.edu/2010spring/projects/project-0/
 */
 
import processing.pdf.*;
 
float altitude=20.; // altitude of sine wave
float gain = .0038;  // how fashttps://ems.andrew.cmu.edu/2010spring/wp-admin/media-upload.php?post_id=576&TB_iframe=truet the period grow 
float period ; //
float initialPeriod = .55; 
int LeftMargin = 0; // white space 
int upperMargin =5;
 
int x ;
float y ; 
 
smooth();
size (400,410,PDF,"NollSine.pdf");
background (255);
noFill();
strokeWeight(.7);
 
for (int i =0; i<90; i++){
  //point() could induce discrete point;vertext works better 
  beginShape();
  for (x=LeftMargin; x<degrees(width); x++){
    period = initialPeriod+gain* float(x) ; //increase period
    //notice y axis direct downwards; sine wave needs to be reversed
    y = upperMargin + altitude*(-sin(2.*PI*radians(x-LeftMargin)/period)+1.);
    vertex (x,y+i*4);
  }
  endShape();
}

Part B. Pong Game

WordPress has been constantly deleting the iFrame code, so just click on the link

Part A

Notes:
Created in Flash AS3.
PDF created with AlivePDF libraries.

//static parameters
var startPointY:Number = 39; //starting position of each wave
var amplitude:Number = 30;
 
graphics.lineStyle(1.49, 0, 1);
 
//drawing the sine waves
for(var i:int=0; i<90; i++) {
    graphics.moveTo(0, startPointY);
    angle = -0.1;
    xpos = 0;
    period = 9;
 
    for(var j:int=0; j<1000; j++) {
        xpos++;
        ypos = startPointY - Math.sin(xpos/period) * amplitude;
        graphics.lineTo(xpos, ypos);
        period += 0.0325;
    }
 
    startPointY += 5.8;
}

Part B

Notes:
Created in Flash AS3.
Source code:link
Part of the challenge is scrolling down the page fast enough before the computer gets his first point.

If you listen to the radio at all, you might have heard an ad from Verizon trying to sell the DROID phone. One of the selling points, among a whole bunch of other jargon, was that “Droid does Augmented Reality”. This is interesting for me because I didn’t realize that AR was part of the general public’s vocabulary. It is hard for me to picture some one hearing that and then rushing out to buy a DROID phone.

I’m posting here the very first Augmented reality system, made by Jun Rekimoto in 1994-1995.

NaviCam (Sorry these aren’t embedded, WordPress cuts out my embed code and the Video insert button just adds this link)

NaviCam doesn’t look like much more than a video barcode reader but it is in the CyberCode demo that we really see what you can do with AR.

CyberCode

I have seen a whole bunch of AR projects, but the fundamentals are very much the same as shown in these demo’s from 15 years ago. His paper The World Through the Computer is also well worth a look. My gut feeling is that the ‘world through a computer’ is only a stepping stone on the road to augmenting the world directly using more ’embodied’ display techniques, whether they be personal projection, holographs, or whatever. I think people are too social to be stuck up in a virtual world with VR glasses or separated from the world via a touchscreen display.

Noll

P5 APPLET

size(700, 700);
background(255);
smooth();
int yOffset = 50;
int waveHeight = 40;
for(int j = 0; j<90; j++){
  for(int i = 0; i<750; i++){
    float divider = map(i, 0, 749, 10, 35);
    line(i, yOffset + -sin(i / divider) * waveHeight, i+1, yOffset + -sin((i + 1) / divider) * waveHeight);
  }
  yOffset += 6;
}

Pong

I decided to OOP my PONG out a little.
I couldn’t add an IFRAME here because WordPress kept removing it when I saved the draft. So here is the separate page anyway:

P5 PONG

The .pde file links are dead because the .pde file type gets rejected on upload 🙁

PongBall ball;
PongPaddleUser myPaddle;
PongPaddleBot theirPaddle;
 
void setup(){
  size(600, 600);
  rectMode(CENTER_RADIUS);
  ellipseMode(CENTER_RADIUS);
  noStroke();
  smooth();
  myPaddle = new PongPaddleUser(width - PongPaddle.width * 2, height / 2);
  theirPaddle = new PongPaddleBot(PongPaddle.width * 2, height / 2);
  ball = new PongBall(myPaddle, theirPaddle, width / 2, height / 2);
}
 
void draw(){
  background(0);
  ball.draw();
  myPaddle.draw();
  theirPaddle.draw();  
}

FULL PONG SOURCE

implemented in oF

void testApp::drawNollSinusoids()
{
    float amplitude = 30.0;
    float phase = PI;
 
    output.setColor(0x333333);
    output.setLineWidth(1.0);
    output.noFill();
    for (int i = 0; i < 90; i++) {
        float period = 30 / PI;
        float offsetY =  15 + i * 5.8;
        output.beginShape();
 
        for (int x = 0; x < windowWidth; x++) {
            float y = sin(x / period + phase);
 
            output.curveVertex(x, amplitude * y + amplitude + offsetY);
            period += 0.031;
        }
        output.endShape();
    }
}

pong

link [ iframe code is removed on update ]

implemented in processing.js

int paddleWidth = 100;
int ballSize = 20;
// all the following deal with center of object
int compPos, userPos;
int ballX, ballY, ballDX, ballDY;
float multiplier = 1.0; // speed up ball
 
void setup() {
  size(400,400);
  frameRate(30);
  noStroke();
 
  resetGame();
}
 
void resetGame() {
  multiplier = 1.0;
  compPos = (height - paddleWidth) / 2;
  userPos = compPos;
  ballX = (width - ballSize) / 2;
  ballY = (height - ballSize) / 2;
  ballDX = 0;
  ballDY = 0;
}
 
void draw() {
  background(#333333);
  fill(#f0f0f0);
 
  // update ball position
  ballX += ballDX * multiplier;
  ballY += ballDY * multiplier;
  multiplier += 0.003;
 
  // check for collision
  // computer side
  if (ballX - ballSize / 2 < 10) {
    if (abs(ballY - compPos)  width - 10) {
    if (abs(ballY - userPos) <= paddleWidth / 2) {
      ballDX = -ballDX;
      ballX = height - 10 - ballSize / 2;
      ballDY += (ballY - userPos) / 5;
    } else {
      resetGame();
    }
  }
  // top
  if (ballY - ballSize / 2  height) {
    ballDY = -ballDY;
    ballY = height - ballSize / 2;
  }
 
  // update user position
  userPos = mouseY;
  if (userPos  height - paddleWidth / 2)
    userPos = height - paddleWidth / 2;
 
  // update computer position
  float compDY = (ballY - compPos);
  if (compDY > 10)
    compDY = 10;
  compPos += compDY;
  if (compPos  height - paddleWidth / 2)
    compPos = height - paddleWidth / 2;
 
  // draw computer paddle
  rect(0, compPos - paddleWidth / 2, 10, paddleWidth);
  // draw user paddle
  rect(width - 10, userPos - paddleWidth / 2, 10, paddleWidth);
 
  // draw ball
  ellipse(ballX, ballY, ballSize, ballSize);
}
 
void mousePressed() {
  if (ballDX == 0 && ballDY == 0) {
    ballDX = 5;
    ballDY = 2;
  }
}