Displaying a multidimensional array as a graphical timeline

General Discussion Other

drowned

Displaying a multidimensional array as a graphical timeline

in General Discussion • Other • 26 days ago

I'm currently working on a larger project, but I'll break down my question into a simple example

I have a 2-dimensional array of integers that stores data on what volume level to play at certain points in time. One of the dimensions stores a time in milliseconds, and the other dimension stores the volume level.

I loop through this array, checking when each change in volume should occur.

All of that is done.

My goal is to visualize this in a horizontal timeline, similar to a channel on a sequencer like this:

http://co.native-instruments.com/uploads/pics/sequencer_02.jpg

I'd display the volume at each point in time. I'd also want to be able to click on the points so I could trigger some other code I have to change the value.

I know it would be too large (horizontally) for my screen, so I'd have to come up with a scroll bar and maybe some way to pre-buffer the data.

Has anyone done anything like this and have any tips?

Replies(1)

Chrisir

Re: Displaying a multidimensional array as a graphical timeline

26 days ago

I have a 2-dimensional array of integers that stores data on what volume level to play at certain points in time. One of the dimensions stores a time in milliseconds, and the other dimension stores the volume level.

Are you sure about the definition of two-dimensional here?

Because in my book a 2-dimensional array of integer is a checkers board.
One index is the xpos (col), the other ypos (row).

So on a chess board you have

board[x][y] = figure1;

and x can run from A..H (or 1..8) and y from 1..8
but the value you get at the position is different, e.g. a field: is it black or white, value, has it a figure if so which one etc.
See also p.s. for 2 small examples.

So for your case:
When you have millis as x-value and volume as y, what do you actually store (the chess figure)?? yes or no for volume? That makes no sense (to me).

From your image I expect millis as x-value and kind of instrument as y, and stored is the volume.

you probably got it all correct, but I am just having a hard time getting it.

Maybe you can clarify or post some of your code showing the 2D array.

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

this is a 2D array

//

final int maxMillis = 30;
final int maxVolume = 30;
float [][] array2D = new float [maxMillis][maxVolume];

void setup() {
size( 960, 600 );
background(0);

for (int m=0; m < maxMillis; m++) {
    for (int v=0; v < maxVolume; v++) {
      array2D[m][v] = m*v;
    }
}
}

void draw () {
background(0);
stroke(244);
strokeWeight(1);

// loop
for (int m=0; m < maxMillis; m++) {
    for (int v=0; v < maxVolume; v++) {
      println (m+","+v);
      stroke(255);
      fill(array2D[m][v], 0, m);
      rect(m*8+12, v*8+12, 4, 4);
    }
} // for
} // func

// ======================================

and this

//

final int maxMillis = 10;
final int maxVolume = 10;
float [][] array2D = new float [maxMillis][maxVolume];

void setup() {
size( 960, 600 );
background(0);
//
// loop
for (int m=0; m < maxMillis; m++) {
    for (int v=0; v < maxVolume; v++) {
      array2D[m][v] = m*v;
    }
}
}

void draw () {
background(0);
stroke(244);
strokeWeight(1);
//
// loop
for (int m=0; m < maxMillis; m++) {
    for (int v=0; v < maxVolume; v++) {
      println (m+","+v + " has the value " + array2D[m][v] );
      stroke(255);
      fill(array2D[m][v], 0, m);
      fill(255);
      //rect(m*8+12, v*8+12, 4, 4);
      text(int(array2D[m][v]), m*28+32, v*28+32);
    }
} // for
} // func

//

Top Reply