Loading...
Logo
Processing Forum

Hi ,  I wonder if there is a way to create a grid with arrays, instead of for loops ?


For example  this simple Grid is done with for loops, but .... Is there a way to acrually create a Grid with arrays ?


Copy code
  1. int cols = 10;
  2. int rows = 10;

  3. void setup () {
  4.   size ( 600, 600);
  5.   background ( 0);
  6.   smooth ();
  7. }

  8. void draw () {

  9.   for ( int i=1; i<cols; i++) {
  10.     for ( int j=1; j<rows; j++) {
  11.       fill ( 255);
  12.       ellipse ( i*(width/cols), j*(height/rows), 30, 30);
  13.     }
  14.   }
  15. }





Thanx !

Replies(5)

Three possiblities.
1) Have two arrays, one to store the x position for each column and the other the y position of each row
2) Have a single 2D array to hold the x/y coordinates for each ellipse
The third possibility requires knowledge of object orientated programming.
3) Create a class called Dot with 2 attributes for the x/y coordinates then have a single array of Dot(s)

In all three cases you still need loops to iterate over the array(s) and draw the dots.

Loops are essential for processibg arrays


Also, an Array (or ArrayList) of PVector.
 
And, yeah, for loops are pretty much essential. Become their friend.
Even if you have an array of data, you'd still need to use for loops to iterate over that array...
Here's an example of using a simple 2D array to track the color for each circle. Notice that even thought I am using an array to remember something about each circle, I still use for loops to access each element of the array in order.

Copy code
  1. int cols = 10;
  2. int rows = 10;
  3. color[][] colors;
  4. void setup() {
  5.   size(600, 600);
  6.   smooth();
  7.   noStroke();
  8.   colors = new color[rows][cols];
  9.   for(int i=1;i<rows;i++) {
  10.     for(int j=1;j<cols;j++) {
  11.       colors[i][j] = color( (25*i), (12*(i+j)), (25*j) );
  12.     }
  13.   }
  14. }
  15. void draw() {
  16.   background(0);
  17.   for(int i=1;i<rows;i++) {
  18.     for(int j=1;j<cols;j++) {
  19.       fill(colors[i][j]);
  20.       ellipse(i*(width/cols), j*(height/rows), 30, 30);
  21.     }
  22.   }
  23. }
Yes, but even on that case, you are actually usingthe for loops to create the actuall array of ellipses.


I thought that the actual Grid of ellipses was made with arrays, but no.. its made with for loops,then if you wanna change some data in it you can use the arrays,  but you dont actually use the array to create the grid of ellpises itslef right ?
Here's Joshua Davis' GridLayout from his HypeFramework for AS3. I don't even know if a class like this is necessary, but I transcribed it to Processing anyway.

Of course, you'll still have to use for loops to get all the points you want.

public class GridLayout 
{
    int index = 0;
    float x;
    float y;
    float xSpace;
    float ySpace;
    int columns;

    public GridLayout(float x, float y, float gridSpace, int columns) {
        this(x, y, gridSpace, gridSpace, columns);
    }

    public GridLayout(float x, float y, float xSpace, float ySpace, int columns) {
        this.x = x;
        this.y = y;
        this.xSpace = xSpace;
        this.ySpace = ySpace;
        this.columns = columns;
    }

    public PVector getNextPVector() {
        int col = index % columns;
        int row = index / columns;

        float gridX = x + (col * xSpace);
        float gridY = y + (row * ySpace);
        index++;

        return new PVector(gridX, gridY);
    }
    
    public void reset() {
        index = 0;
    }
}