Overview of Processing

Using the skills I have learnt from the Idat 102 to lectures and the processing itself, I think i have personally been able to create an abstract animation that is affected by the feed from the Arch Os system. I found producing the wave rending and calculation was the hardest to put into code, every-time i changed a variable it would cause alot of errors to come up. I had to add "Else" and the use println to allow the code to actually work, otherwise it would kickup loads of errors. Other problems I had was embedding the processing to my website. Im a windows user so it was abit of a headache to us DOS to get my KeyStone Cert, So Mac seemed the best choice. After many nights finally uploaded the version to my website and im happy with the result.

Production of Processing

Screen Shot of the Processing in Action

Screenshots of the Code

Animation of the Raw Data becoming an Animation

With the Data I've had the effect it has on the animation Randomised so its not just a flat line, If the date value increases from the sensors the line animation will become more erratic and the velocity and speed will increase as it will effect the wave calculation.

//variables - defining how the wave will move from point to point on the x/y axis
int xpos;
int w;

//floats -
float map;
float freq;
float pan;
float yoff = 0.0f;
float[] ypos;

//XMLElemnts - the feeds im using from the arch os site
XMLElement [] raindescription;
XMLElement [] winddescription;

//setup
void setup() {  - the setup of the canvas and how I want it to run

  println("0");
  size(500,500);
  smooth();
  frameRate(40); - increased frame rate to make the transistion of the animation more smother
  w = width ;
 

  println("1");


  // Rain
  String rainurl = "http://x2.i-dat.org/archos/archive.rss?source=.Rain_Sensor";
  XMLElement rainxml = new XMLElement(this, rainurl);
  raindescription = rainxml.getChildren("channel/item/description");
  println("2");

  // Wind Speed
  String windurl = "http://x2.i-dat.org/archos/archive.rss?source=.Windspeed";
  XMLElement  windxml = new XMLElement(this, windurl);
  winddescription = windxml.getChildren("channel/item/description");
  println("3");
}    - the feeds of where im drawing the raw data to effect the visulation
//draw

void draw ()
{
background(0); - placed my background colour in the draw section to white wash the screen, because i faced a problem of the visulation leaving a ghost trail on the screen
{
  for (int i = 0; i < raindescription.length;i++) - calculation for making the variables communicate with the feed to generate the animation
  {
    xpos = int(raindescription[i].getContent()); -Rain feed
    if(xpos !=0) {
      ypos = new float[w/xpos];
    }
    else {
      ypos = new float[0]; - This will stop the line becoming flat if the code goes below a value that will cause the wave to move such as "0" for rain being an example
    }
    calcWave();
     fill(RGB,39,226,17); - colour of my wave
    renderWave();
   
  }

  for (int i = 0; i < winddescription.length;i++)
  {
    xpos = int(winddescription[i].getContent()); - wind feed
    if(xpos !=0) {
    ypos = new float[w/xpos];
    }
    else {
      ypos = new float[0];
    }

calcWave();
   fill(HSB,100,300);
    renderWave();
  }
 
}
}

//wave calculation  - i can change the height of the wave and the angle it produces the feed
void calcWave() {
  float dx = -0.04f;
  float dy = 0.4f;
  float amplitude = 30.0f;

  yoff +=dy;

  float xoff = yoff;

  for (int i = 0; i < ypos.length; i++) {
    ypos[i] = (3*noise(xoff)-1)*amplitude;
    xoff+=dx;
  }
}

//wave render
void renderWave() {
  for (int x = 0; x < ypos.length;x++) {
    stroke(10);
 
   
   
    ellipseMode(CENTER);    - allows me the change the shape of the objects shown onscreen
    ellipse(x*xpos,width/2+ypos[x],18,18);
  }
}

Ideas

I looked at Wave varied forms to display my Raw Data, Including colour and volume to demostrate the effects of the Arch OS feed.

How i wanted to create my visualisation, a wave effected by the feed and colour used to demonstrate different feeds or variables in the feed.



Code produced for learning

Picture Mouse Trail with Sound Freq

import ddf.minim.*;
import ddf.minim.signals.*;

Minim minim;
AudioOutput out;
SineWave sine;



int[] xpos = new int [50];
int[] ypos = new int[50];


void setup()

{
  size(500,500);
  frameRate(25);
  smooth();
  for (int i = 0; i < xpos.length; i++)
  {
    xpos[i] = 0;
    ypos[i] = 0;
  }
 
  minim = new Minim(this);
  out = minim.getLineOut(Minim.STEREO);
  sine = new SineWave(440, 0.5, out.sampleRate());
  sine.portamento(200);
  out.addSignal(sine);
 
 
}

void draw()
{
  background(255);
  for (int i = 0;i <xpos.length-1; i++)
 
  {
    xpos[i] = xpos[i+1];
    ypos[i] = ypos[i+1];
  }
  
  xpos[xpos.length-1] = mouseX;
  ypos[ypos.length-1]= mouseY;
 
  for (int i = 0; i < xpos.length; i++)
  {
noStroke();
fill(255-i*5);
ellipse(xpos[i],ypos[i],i,i);
  }
 
}

void mouseMoved()
{
  float freq = map(mouseY,0,height,1500,60);
  sine.setFreq(freq);
  float pan = map(mouseX,0,width,-1,1);
  sine.setPan(pan);
}

void stop()
{
  out.close();
  minim.stop();
  super.stop();
}




Magical Colour with Sound

import ddf.minim.*;
import ddf.minim.signals.*;
float freq,pan;

Minim minim;
AudioOutput out;
SineWave sine;



int[] xpos = new int [50];
int[] ypos = new int[50];


void setup()

{
  size(500,500);
  frameRate(25);
  smooth();
  for (int i = 0; i < xpos.length; i++)
  {
    xpos[i] = 0;
    ypos[i] = 0;
  }
 
  minim = new Minim(this);
  out = minim.getLineOut(Minim.STEREO);
  sine = new SineWave(440, 0.5, out.sampleRate());
  sine.portamento(200);
  out.addSignal(sine);
 
 
}

void draw()
{
  background(255);
  for (int i = 0;i <xpos.length-1; i++)
 
  {
    xpos[i] = xpos[i+1];
    ypos[i] = ypos[i+1];
  }
  
  xpos[xpos.length-1] = mouseX;
  ypos[ypos.length-1]= mouseY;
 
  for (int i = 0; i < xpos.length; i++)
  {
   
noStroke();
fill (map(freq,1500,60,0,255),map(pan,-1,1,0,255),freq/25*4);
ellipse(xpos[i],ypos[i],i,i);
  }
 
 
}

void mouseMoved()
{
  freq = map(mouseY,0,height,1500,60);
  sine.setFreq(freq);
  pan = map(mouseX,0,width,-1,1);
  sine.setPan(pan);
 
 
 
 
 
}

void stop()
{
  out.close();
  minim.stop();
  super.stop();
}




Font Randomiser

PFont f;


void setup()
{
size(200,200);
frameRate(5);
f=loadFont("DialogInput-48.vlw");
}


void draw()
{
float x=random(width);
float y=random(height);
background(255);
textFont(f,20);
fill(0);
text("HELLOOOOO",x,y);
}



RSS FEED


import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;



void setup()

{
  size(500,500);

  String url = "http://rss.news.yahoo.com/rss/topstories";
  XMLElement xml = new XMLElement(this,url);

  title = xml.getChildren("channel/item/title");
  pubDate = xml.getChildren("channel/item/pubDate");
  value = xml.getChildren("channel/item/description");
}

void draw()

{
for (int i =0; i<title.length; i++)

    println(title[i].getContent());
}



RSS Feed Illustrated



import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;



void setup()

{
  size(500,500);

  String url = "http://rss.news.yahoo.com/rss/topstories";
  XMLElement xml = new XMLElement(this,url);

  title = xml.getChildren("channel/item/title");
  pubDate = xml.getChildren("channel/item/pubDate");
  value = xml.getChildren("channel/item/description");
}

void draw()

{
for (int i =0; i<title.length; i++){

    float num1 = int(title[i].getContent().charAt(0));
      float num2=int(title[i].getContent().charAt(2));
            float num3=int(title[i].getContent().charAt(4));
             float num4=int(title[i].getContent().charAt(6));
       ellipse (num1,num2,num3,num4);
}
}

The Idea

We were set a brief to use the knowledge we had learn from processing to come up with a creative way to demostrate how we could take raw data from a weather station located in uni and put it into a visual form.


To start with it had to be abstract a animated, so the feed from the Arch OS sight aka the weather station had to affect the animation. The feeds ranged from windspeed to air pressure and rain/humidity.