Processing leckék

A tömb nyomon követ egy több darabot/értéket tartalmazó listát, sorrenben. Hogy ezt vizualizálni tudjuk hozzunk létre egy több-dimenziós adat szerekezetet/tömbböt, ami egy tömbökből álló tömböt jelent.

Az egy-dimenziós tömb lényegében egy lista. Pl. ha az ebédre értelmezzük, ezeket az elemeket tartalmazhatja (paradicsom, saláta, sülthús, krumplipüré, süti, kávé). Vagy lehetugyanezt több-dimenziósan is érttelmezni (paradicsom, saláta) és (sülthús, krumplipüré) és (süti, kávé).

 Kóddal ez a két példaígy fest:

egy-dimenziós tömb:

int[] myArray = {0,1,2,3};

két-dimenziós tömb:

int[][] myArray = {{0,1,2,3},{3,2,1,0},{3,5,6,1},{3,8,3,4}};   

Célunk érdekében jobb ha ezt egy mátrixnak képzeljük el, amit rácsosan rendezett számokként értelmezünk. Kódban leírva:

int[][] myArray = {  {0, 1, 2, 3},
                     {3, 2, 1, 0},
                     {3, 5, 6, 1},
                     {3, 8, 3, 4}  };

Ezt az adat típust felhasználhatjuk információk képbe kódolására. Pl.ha ennek a tömbnekaz elemi helyére egy szürkeárnyalatos színértéket írunk akkor ilyen képet kapunk:

int[][] myArray = {  {236, 189, 189,   0},
                            {236,  80, 189, 189},
                            {236,   0, 189,  80},
                            {236, 189, 189,  80}  };

Hogy kiolvassuk az egy-dimenzióstömb elemeit sorrendben, egy for ciklust használunk.:

int[] myArray = new int[10];
for (int i = 0; i < myArray.length; i++) {
  myArray[i] = 0;
}

Két-dimenziós tömb esetén két for ciklust használunk, esetünkben lesz egy számláló ami a sorokat és egy ami az oszlopokat számolja a mátrixunkban.

int cols = 10;
int rows = 10;
int[][] myArray = new int[cols][rows];

// a 2d tömbben minden pontotvégigveszünk.   
// minden i oszlopnál megviszgálja mindegik j sort 
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    myArray[i][j] = 0;
  }
}

Így különböző szürkeárnyalatos képeket rajzolhatunk:

// Example: 2D Array
size(200,200);
int cols = width;
int rows = height;

// Declare 2D array
int[][] myArray = new int[cols][rows];

// Initialize 2D array values
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    myArray[i][j] = int(random(255));
  }
}

// Draw points
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    stroke(myArray[i][j]);
    point(i,j);
  }
}

A két-dimenziós tömbböket olyan objektumok tárolására is használhatjuk, amik alkalmasak olyan sketchek programozására, amik magukba foglalnak néhány "mátrixot". A következő példa egy Cell-objektumokból álló 2d-tömbböt tartalmaz. Minden cell, egy olyan négyzet aminek a világosságértéke oszcillál/ingadozik 0-255 között, mivel mindegyik érték meghatározott módom változik, egy hullámzó animáció keletkezik a végén:

// 2D Tömb
Cell[][] grid;

// oszlopok és sorok száma a mátrixban
int cols = 10;
int rows = 10;

void setup() {
  size(200,200);
  grid = new Cell[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // Inicializáljuk az objektumokat 
      grid[i][j] = new Cell(i*20,j*20,20,20,i+j);
    }
  }
}

void draw() {
  background(0);
  // A számláló változók i és j szintén oszlopokra és sorokra 
  // vonatkoznak, és a mátrix minden objektumának
  //  konstruktorában használt argumentumai 

  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // Oscillate and display each object
      grid[i][j].oscillate();
      grid[i][j].display();
    }
  }
}

// A Cell objektum
class Cell {
  // A cell objektumnak adott a helye a mátrixban és a mérete,   
  // az x,y,w,h változók által
  float x,y;   // x,y apozíció
  float w,h;   // szélességés magasság
  float angle; // angle, a világosság oszcillálásához

  // Cell konstruktor //utolsó paramétere a float tempAngle){ 
Cell(float tempX,float tempY,float tempW,float tempH,float tempAngle){
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    angle = tempAngle;
  } 
  
  // Oszcilláció az angle változó növelése által jön létre:
  void oscillate() {
    angle += 0.02; 
  }

  void display() {
    stroke(255);
    // Szín kalkuláció a hullámzás létrehozásához: 
    fill(127+127*sin(angle));
    rect(x,y,w,h); 
  }
}

forrás: http://processing.org/learning/2darray/