Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
    • Arrays and lists for visual grids
    • Exercises
    • Modifying distribution along width and height
    • Modifying rotation by distribution
    • Modifying scale with distribution
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)

/
Arrays and lists for visual grids

Arrays and lists for visual grids

Nov 07, 2017

Using arrays for organising visual grids:

 

int gridW = 10;
int gridH = 10;
int stepX = 60; // horizontal distance between shapes
int stepY = 60; // vertical distance between shapes
int shapeWidth = 40;
int shapeHeight = 40;

Graphic[][] GraphicArray;

void setup()
{
  size(800, 800);
  noStroke();
  fill(0);
  background(255);
  GraphicArray = new Graphic[gridW][gridH];
  // translate graphic to the center of the screen
  translate((width-(stepX*gridW))/2, (height-(stepY*gridH))/2);

  for (int i=0; i < gridW; i++)
  {
    for (int j = 0; j < gridH; j++)
    {
      GraphicArray[i][j] = new Graphic(i * stepX, j * stepY, shapeWidth, shapeHeight);

      GraphicArray[i][j].draw();
    }
  }
}


class Graphic
{
  PVector _pos;
  int _shapeWidth;
  int _shapeHeight;

  Graphic(int x, int y, int shapeW, int shapeH)
  {
    _pos = new PVector(x, y);
    _shapeWidth = shapeW;
    _shapeHeight = shapeH;
  }

  void draw()
  {
    pushStyle();
    stroke(0);
    fill(0);
    rect(_pos.x, _pos.y, _shapeWidth, _shapeHeight);
    popStyle();
  }
}

 

The same example using lists:

int gridW = 10;
int gridH = 10;
int stepX = 60; // horizontal distance between shapes
int stepY = 60; // vertical distance between shapes
int shapeWidth = 40;
int shapeHeight = 40;
ArrayList<Graphic> graphicList = new ArrayList<Graphic>();

void setup()
{
  size(800, 800);
  noStroke();
  fill(0);
  for (int i=0; i < gridH; i++)
  {
    for (int j = 0; j < gridW; j++)
    {
      graphicList.add(new Graphic(i * stepX, j * stepY, shapeWidth, shapeHeight));
    }
  }
}

void draw()
{
  background(255);
  translate((width-(stepX*gridW))/2, (height-(stepY*gridH))/2);
  for (int i=0; i < graphicList.size(); i++)
    graphicList.get(i).draw();
}


class Graphic
{
  PVector _pos;
  int _shapeWidth;
  int _shapeHeight;

  Graphic(int x, int y, int shapeW, int shapeH)
  {
    _pos = new PVector(x, y);
    _shapeWidth = shapeW;
    _shapeHeight = shapeH;
  }

  void draw()
  {
    pushStyle();
    stroke(0);
    fill(0);
    rect(_pos.x, _pos.y, _shapeWidth, _shapeHeight);
    popStyle();
  }
}

, multiple selections available,
{"serverDuration": 46, "requestCorrelationId": "2dba1defa4294e7dae4b01b24d550e31"}