Question

I have 1000+ row Sine Wave data which changes with time and I want to visualize it with Processing language. My aim is to create an animation which will draw a Sine Wave with time starting from the middle of the rectangular [height/2]. I also want to show only the 1 second periods of that wave. I mean after 1 second, first coordinate should dissappear, and so forth.

How can I achieve that ?
Thanks

Sample Data :

 TIME   X   Y
0.1333  0   0
0.2666  0.1 0.0999983333
0.3999  0.2 0.1999866669
0.5332  0.3 0.299955002
0.6665  0.4 0.3998933419
0.7998  0.5 0.4997916927
0.9331  0.6 0.5996400648
1.0664  0.7 0.6994284734

Answer 1

The way you’d achieve that is to split this project into tasks:

1. load & parse data
2. update time and render data

To make sure part 1 goes smoothly it’s probably best to make sure your data is easy to parse first. The sample data looks like a table/spreadsheet, but it’s not formatted with a standard separator(e.g. comma or tab). You can fiddle things when you parse, but I recommend using clean data first, for example, if you plan on using space as a separator:

 TIME  X   Y
0.1333 0.0 0
0.2666 0.1 0.0999983333
0.3999 0.2 0.1999866669
0.5332 0.3 0.299955002
0.6665 0.4 0.3998933419
0.7998 0.5 0.4997916927
0.9331 0.6 0.5996400648
1.0664 0.7 0.6994284734

Once that’s done, you can use loadStrings() to load the data and split() to break a row into 3 elements which can be converted from string to float.

Once you’ve got value to use, you can store them. You can either create three arrays, each holding a field from the loaded data(one for all the X values, one for all the Y values and one for all the time values) or you can cheat and use a single array of PVector objects. Although PVector is meant for 3D math/linear algebra, you have 2D coordinates, so you can store time as 3rd ‘dimension’/component.

Part two revolves mostly around updating based on time, and this is where millis() comes in handy. You can check the amount of time passed between updates and if it’s greater than a certain (delay) value, it’s time for another update (of the frame/data row index).

The last part you need to worry about is rendering the data on screen. Luckily in your sample data the coordinates are normalized(between 0.0 and 1.0) which makes easy to map to the sketch dimensions(by using simple multiplication). Otherwise the map() function comes in handy.

Here’s a sketch to illustrate the above, data.csv is a text file containing the formatted sample data from above:

PVector[] frames;//keep track of the frame data(position(x,y) and time(store in PVector's z property))
int currentFrame = 0,totalFrames;//keep track of the current frame and total frames from the csv
int now, delay = 1000;//keep track of time and a delay to update frames

void setup(){
  //handle data
  String[] rows = loadStrings("data.csv");//load data
  totalFrames = rows.length-1;//get total number of lines (-1 = sans the header)
  frames = new PVector[totalFrames];//initialize/allocate frame data array 
  for(int i = 1 ; i <= totalFrames; i++){//start parsing data(from 1, skip header)
    String[] frame = rows[i].split(" ");//chop each row into 3 strings(time,x,y)
    frames[i-1] = new PVector(float(frame[1]),float(frame[2]),float(frame[0]));//parse each row(not i-1 to get back to 0 index) and how the PVector's initialized 1,2,0 (x,y,time)
  }
  now = millis();//initialize this to keep track of time
  //render setup, up to you
  size(400,400);smooth();fill(0);strokeWeight(15);
}
void draw(){
  //update
  if(millis() - now >= delay){//if the amount of time between the current millis() and the last time we updated is greater than the delay (i.e. every 'delay' ms)
    currentFrame++;//update the frame index
    if(currentFrame >= totalFrames) currentFrame = 0;//reset to 0 if we reached the end
    now = millis();//finally update our timer/stop-watch variable
  }
  PVector frame = frames[currentFrame];//get the data for the current frame
  //render
  background(255);
  point(frame.x * width,frame.y * height);//draw
  text("frame index: " + currentFrame + " data: " + frame,mouseX,mouseY);
}

There are a couple of extra notes needed:

1. You mentioned moving to the next coordinate after 1 second. From what I can see in your sample data there are 8 updates per second, so 1000/8 would probably work better. It’s up to you how you handle timing though.
2. I assume your full set includes data for a sine wave movement. I’ve mapped to the full coordinates, but in the render part of the draw() loop you can map however you like(e.g. including a height/2 offset, etc.). Also if you’re not familiar with sine waves, have a look at these Processing resources: Daniel Shiffman’s SineWave sample, Ira Greenberg’s trig tutorial.