Arrays and Rows/Colums

Jonasan

Hello,

For my project (https://forum.processing.org/two/discussion/comment/60203) I have 4 x 4 objects. I use an array to define the 16 objects, but somehow it seems easier if I could use indexes that refer to the row and colum each object is in.

Someting like this: object11, object12, object13, object14 object21, object22, object23, ...

Is this easy doable? If yes, how?

Thank you ;-)

GoToLoop

Either go w/ a 2D array or apply some formula which translates flat index to a row x column pair and vice-versa. You can find those 2 conversion functions in this other recent forum thread: :-bd

https://forum.Processing.org/two/discussion/14609/what-is-returned-by-this-function-colors

P.S.: Treat (x, y) parameter pair there as (column, row) pair. :ar!
And (w) as the number of columns. ~O)

Jonasan

I think I'll go with the 2D array :-) I've read about that, but forgot. And in the reference, it's not mentioned...

Thanks a lot!

Chrisir

there is a tutorial on 2D arrays

Chrisir

https://processing.org/tutorials/2darray/

Jonasan

Yes, I found that. I already reworked my sketch that way. Now I think I 'm going to use arrays for each property as well, but I' m going to sleep a night about that...

Thanks for your advice anyway.

Chrisir

for properties you can use a class - see tutorial on objects

ah, you have this, ok....

idea

you now have a 2d array representing your grid - good.

this is a layer near to the hardware

now think of a 2nd layer above this which is doing the actual work.

it could be a class Sequence or Event or configuration

then make a ArrayList of that class.

loop (or go) through the ArrayList and do each step

class Sequence holds :

• millis we start at

• millis we stop it at (or duration in millis)

• then... eg. an grid of your globes that holds the color for each globe.

GoToLoop

... I 'm going to use arrays for each property as well, ...

http://forum.Processing.org/two/discussion/8081/from-several-arrays-to-classes

Jonasan

@Chrisir, the second class I should make, the one "doing the actual work", that would be a class which receives or calculates all the parameters, right? Why an Arraylist in stead of an array? And why the loop? When I call that class from within a "draw", isn't it looped already? And why the millis? You think I need a timeline? (Sorry, I guess I'm asking to much questions, that's because I'm quite new to Processing and programming in general. I"ll start with making that second class, with all the features of the lineglobes, then I get back, if I still don't get it).

@GoToLoop I guess your remark is attended if I use Chrisir's method? In stead of a lot of Arrays, I'll put those parameters in one class and then make an array or array list of those class.

Is each element in that second array, a different line-globe? I would think so, but maybe it's a time-sequence, what Chrisir means?

Jonasan

Maybe I can post the code I have until now:

Lineglobe [][] lineGlobe = new Lineglobe[4][4];

void setup() {
  size(640, 480);
  background(0);

  int xSpace = width/5;                  // xSpace is the distance between each lineGlobe, for 4 lineGlobes
  int ySpace = height/5;

  int xPos = xSpace;
  int yPos = ySpace;

    for(int row=0; row<4; row+=1){

      for(int column=0; column<4; column+=1){

      // colour (red - green - blue), transparancy, x-position, y-position, diameter globe, line thickness, line length, line degree
      lineGlobe[row][column] = new Lineglobe((int)random(0,255), (int)random(0,255), (int)random(0,255), (int)random(120,255), xPos, yPos, (int)random(30,130), (int)random(20,40), (int)random(20,180), (int)random(0,359));
      xPos+=xSpace;

   }

  xPos = xSpace;
  yPos+= ySpace;

  }

}

void draw() {

  for(int row=0; row<4; row+=1){
    for(int column=0; column<4; column+=1){

      lineGlobe[row][column].display();

    }
  }

}


class Lineglobe {                  // a Lineglobe is a globe with an arm
  float red, green, blue, transparancy;
  float xcorglobe, ycorglobe;      // center-coördinates of the lineglobe
  float diam;                      // diameter of the globe
  float xcorline, ycorline;
  float linelength, linethickness, lineturningdegree, lineturning; // properties of the line

 Lineglobe (float tempred, float tempgreen, float tempblue, float temptransparancy, float tempxcorglobe, float tempycorglobe, float tempdiam, float templinethickness, float templinelength, float templineturningdegree) {
  red = tempred;
  green = tempgreen;
  blue = tempblue;
  transparancy = temptransparancy;
  xcorglobe = tempxcorglobe; 
  ycorglobe = tempycorglobe;
  diam = tempdiam;
  linelength = templinelength;
  linethickness = templinethickness;
  lineturningdegree = templineturningdegree;

  // calculate additional variables (turning degree of the line, begin-coördinates of the line)

  lineturning = radians(lineturningdegree);
  xcorline = linelength * cos(lineturning) + xcorglobe;
  ycorline = linelength * sin(lineturning) + ycorglobe;
}

 void display() {

  // draw the circle
  noStroke();
  fill(red, green, blue, transparancy);
  ellipse(xcorglobe, ycorglobe, diam, diam);

  // draw the line
  stroke(red, green, blue, transparancy);
  strokeWeight(linethickness);
  line(xcorglobe, ycorglobe, xcorline, ycorline);

  } 
}

GoToLoop

I guess your remark is attended if I use Chrisir's method?

Not necessarily! It's just a very important general OOP programming concept! >-)
If we got a set of properties which describe some entity, the OOP way is to put them inside a class.
Rather than having 1 container for each property of an object, instead we have 1 class w/ those properties inside and 1 container outside to hold each instance of that class.

Chrisir

the second class I should make, the one "doing the actual work", that would be a class which receives or calculates all the parameters, right?

yes

Why an Arraylist instead of an array?

in my experience it's better to use Arraylist since you can expand them more easily

And why the loop? When I call that class from within a "draw", isn't it looped already?

true... I mean at the end you could start all over again... then it's loop...

And why the millis? You think I need a timeline?

yes, it's a time line.

remark

this :

float red, green, blue, transparancy;

is

color colGlobe;

int transparency

draft

class Timeline {

    int startsAt;  // millis 
    int stopsAt; 

    color [][] grid = new color[4][4];


}

then

ArrayList<Timeline> steps = new ArrayList(); 



if (millis()>=steps.get(indexSteps).stopsAt) {
     indexSteps++;
}

concepts and architecture

there are probably different ways to do this.

• I mean above I have the colors for the entire grid

• you could also only hold a list inside class Timeline with the indices (!) for only the lineGlobes that are ON at that time period (and their colors)

• OR you just store a list with the indices for lineGlobe for those globes that change in that step (then you could use commands like fadeIn fadeOut Blink colorTransition... which would be methods in class Lineglobe that could be triggered by class Timeline)

Jonasan

the second class I should make, the one "doing the actual work", that would be a class which receives or calculates all the parameters, right?

You delete the receive option, but the aim is that later I can control the parameters with MIDI or at least my keyboard, so somehow that class with parameters should "receive" that input.

float red, green, blue, transparancy;

is

color colGlobe; int transparency

at first, I did use the "color" way, but because you should be able to control red, green and blue by MIDI or keyboard (or whatever input, I hope it can react to sound as well, in the end), I changed it to separate RGB-variables. If know it's doable with color as well, but it seemed more complicated that way...

    class Timeline {

        int startsAt;  // millis 
        int stopsAt; 

        color [][] grid = new color[4][4];

    }

ArrayList<Timeline> steps = new ArrayList(); 

if (millis()>=steps.get(indexSteps).stopsAt) {
     indexSteps++;
}

I'll work further on that!

Chrisir

I see

GoToLoop

... be able to control red, green and blue by MIDI or keyboard...
... I changed it to separate RGB-variables.

I've implemented a Colour class about 1 year ago here:
https://forum.Processing.org/two/discussion/10362/help-with-a-multidimensional-array

It's a class w/ 3 fields: r, g, b. We just need to call its method toColour() in order to get the corresponding color. :D

Use its method set() in order to modify the 3 field properties at the same time.
Or read or modify them individually. Just be careful not to store a value > 255 there. :-S

Jonasan

And using that class, is better why? Is it a better way of coding? Faster? Better to manipulate later in the sketch?

(By the way, I didn't have time to REALLY work on my sketch, or study the links you gave, but I plan to do that. For now, I feel a little awkward getting all this advice and not being able to use it. So, I want to assure you: I WILL get back on this ;-) )

GoToLoop

And using that class, is better why?

It's a matter of encapsulation: Rather than having 3 variables on the loose, they stay in 1 place.
That is, inside an instance of the Colour class, 1 object.
It's like having 1 variable which in turn accesses 3 other variables: :-bd

final Colour myColor = new Colour().randomRGB();
println(myColor, ENTER);

println("Red:\t", myColor.red());
println("Green:\t", myColor.green());
println("Blue:\t", myColor.blue(), ENTER);

exit();

As you can see above, variable myColor has access to fields r, g & b.
Or use the latest "getter" methods: red(), green() & blue(). Much easier and tidy! :D

Jonasan

Ok, thanks!

I'm still reading, but I made a flowchart. I had it in my head, but not on paper. I already made this tool with Quartz Composer, but that began to run too slow. And for the finalisation, I didn't feel like Quartz was good, or not good for me.

Chrisir

This has been done

Just google it in the Forum

Jonasan

Great! Then I can learn from that. I guess it's not COMPLETELY the same (I hope my circle-line object is original :-) ). I didn't find it yet though, I tried looking for VJ, for Pattern, for Matrix. I keep looking. If you remember under what name it was mentioned in the forum... would be great :-)

Chrisir

actually not the same but it should be similar

it's a gui for creating laser show files.

colouredmirrorball gives the download of his sketch

It's for creating laser show files. They can be imported into a program that sends them to a laser over a controller, or put on an SD card and inserted into some compatible projectors.

https://forum.processing.org/two/discussion/12577/making-a-drag-and-drop-gui

quote::::::::::::::

I gave more explanation here: http://forum.processing.org/two/discussion/10015/modular-design-patterns, I feel like the core of what's going on is explained pretty well there.

Here's the program itself for the brave: https://drive.google.com/file/d/0B9pl7YpJfMS1bE5FV0p0Z0dhUEk/view?usp=sharing

(compiled for Windows 64 bit, only works with Processing 2.2.1 or similar, needs ControlP5, Peasycam and SDrop)

Jonasan

I think I do what someone advices in the first example: practice first with some simpler sketches. I just discovered open processing.org, I'm going to post my own creations there and learn form the others!

And I will study the examples above. And come back with a lot of questions, probably :-)

Thank you Chrisir