### Project 0

by areuter @ 10:05 am 13 January 2010

PART A

GDE Error: Unable to load profile settings

PartA

 for (int i=0; i&lt;90; i++) { beginShape(); for (int j=0; j&lt;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

### Project 0

by xiaoyuan @ 8:22 am

 

GDE Error: Unable to load profile settings
 

<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);
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

### Amanda Burridge — Project 0a

by aburridg @ 7:37 am

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 &lt; (89*lineSpacing+1); j += lineSpacing){ curve(j); } }   void curve(int ly){ period = 1; stroke(0); beginShape(); for(int i=0; i&lt;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; }

### Project 0

by mghods @ 6:14 am

PART A – Noll Sinusoids

The PDF file:

GDE Error: Unable to load profile settings

The code:

// Project 0 - Part A // "Noll Sinusoids" // Course:Special Topics in Interactive Art &amp; Computational Design // By: Mehrdad Ghods // For project description please visit: // "http://golancourses.net/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 &lt; 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 &lt;= 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

Tennis for Two

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

Tennis for Two Code

### Matt Sandler’s Project 0

by Mishugana @ 4:48 am

# Part-A (In the USA)

GDE Error: Unable to load profile settings

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

Part-B

# click below to play if it isnt working

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

### Project 0

by Michael Hill @ 4:22 am
GDE Error: Unable to load profile settings
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&lt; numberOfCurves; i++){ for(int j=1; j &lt; curveData.length; j++){ line(j-1, curveData[j-1] + linePlacement + spacing*i, j, curveData[j] + linePlacement + spacing*i); //Draw line part of curve } } }

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 &gt; 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 &gt;= player1.posY &amp;&amp; ball.posY-30 &lt;= 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 &gt;= width){ ball.dX *= -1; currentScore++; } if (ball.posX &lt; 20){ gameOver = true; } }   //Handles Key presses by pushing them to an array void keyPressed() { int arrayIndex = 0; int totalKeys = keysHeld.size();   if (totalKeys &lt;= 0){ KeyPress pressed = new KeyPress(keyCode); keysHeld.add(pressed); }   else {   for(int i = 0; i&lt;totalKeys; i++){ println( &quot;Key &quot; + i + &quot; being analyzed&quot;); KeyPress pressed = (KeyPress) keysHeld.get(i); println ( String.valueOf(keyCode) + &quot; was compared to &quot; + 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 &lt; 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 &lt; 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 &amp;&amp; gameOver == true) { ball.resetBall(); gameOver=false; currentScore = 0; } } }

### jmeng – Project 0

by jmeng @ 1:59 am

Part A:

GDE Error: Unable to load profile settings

code:

void drawNollSinusoids() { for (int i = 0; i &lt; 90; i++){ noFill(); stroke(0); beginShape(); period = (float) 0.125; for (int j = 20; j &lt; 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?

### Immaterials: the ghost in the field

by kuanjuw @ 1:43 am

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 0 gabi

by guribe @ 1:12 am

# Project zero part 1

## PDF:

GDE Error: Unable to load profile settings

## 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;

////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);

//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;

}

}

### Rich Cameron – Project 0

by rcameron @ 12:45 am

A. Ninety Parallel Sinusoids

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

B. Pong

### (P0) Justin Edmund

by jedmund @ 11:42 pm 12 January 2010

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 &lt; 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 &lt; 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).

Changes

• Fixed enemy AI

### Begin

by Max Hawkins @ 11:16 pm

### 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:

GDE Error: Unable to load profile settings

### Part B: Pong

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

Play Here

The source is on github

### Kuan-Ju Project-0

by kuanjuw @ 10:11 pm

GDE Error: Unable to load profile settings

/*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&lt;90;i++){ //reproduce the curve 90 times with different yposition beginShape(); for(int x=0;x&lt;=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.

### Looking outwards 1 (david yen)

by davidyen @ 9:10 pm

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.

### Ray Yun Project 0

by ryun @ 8:37 pm

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

GDE Error: Unable to load profile settings

### sbisker – project 0

by sbisker @ 8:20 pm

Part A – Noll Knockoff

GDE Error: Unable to load profile settings
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 &lt; 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 &quot;increasing period&quot; 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 &lt; 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 &lt; 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)

### Jordan Sinclair Project 0

by jsinclai @ 7:39 pm

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

GDE Error: Unable to load profile settings

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;
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.

### David yen Project 0

by davidyen @ 7:29 pm

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

davidyen_project0b

### Amanda Burridge — Project 0b

by aburridg @ 7:19 pm

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.

### caryn- project 0

by caudenri @ 5:38 pm

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

GDE Error: Unable to load profile settings

caryn_project0.0

float angle = 90.0; float padding = 0.015; float count=0.0; int start=50;   for(int i=0; i&lt;90; i++) { count=0.0; angle=90.0; beginShape(); for (float x=5.0; x&lt;=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 &lt; 0) { ballXv*=-1; } if ((ballY height)) { ballYv*=-1; } if (((ballX&gt;285) &amp;&amp; (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); }
Next Page »