Question: Running multiple draw loops simultaneously in a grid

Processing Coding Questions
1

I’m quite new to processing and am interested in using it to generate grids of semi-randomized objects of various kinds. I’ve managed to produce code that can generate the kind of objects that I want, but I don’t know how to run multiple identical draw loops in a grid at the same time.

My ideal situation would be to run a relatively simple draw loop within a 4X4 grid. Apologies if this is an obvious question or one that has already been answered - I haven’t been able to find an answer using my limited knowledge.

2

What do you mean by draw loop.

Sketches have a draw method which loops, and within the draw loop you would draw your grid using a for loop. You seem to be suggesting you want to try the opposite and draw grids which use draw loops, which doesnt seem quite right, am i understanding you correctly?

Are you looking to run multiple draw loops in parallel, ie threading or is it something else?

If you want to draw grids there are lots of examples on the forum a quick search should return lots of them.

3

Thanks for the quick response! I do want to do it in the opposite direction: I want to construct a rectangular grid, and then, in each cell of the grid, run a separate instance of an identical semi-randomized draw loop.

My idea is to have each cell in the grid act as a kind of separate seed for the object-generating draw loop, so that the end result is a grid of different objects produced by the same starting parameters in each cell.

Apologies if that isn’t clear, I’m coming to processing from a non-programming background.

1 Like
4

here are two examples of a grid sketch

I use classes to simplify things visually.

class grid{
  color [][]grid;
  float x,y, xres,yres,flying;
  int w,h,cols,rows;
  PImage grid2,g1;
  boolean update;
  
  grid(float x,float y,int w,int h,int resx,int resy){
    
    this.w = w;
    this.h = h;
    this.x = x;
    this.y = y;
    this.xres = resx;
    this.yres = resy;
    grid2 = createImage(w,h,RGB);
    cols = floor((w-x)/resx);
    rows = floor((h-y)/resy);
    grid = new color[cols][rows];
    
    for(int i=0;i<cols;i++){
      for(int j=0;j<rows;j++){
        
        grid[i][j] = color(random(255),random(255),random(255));
        
    }}
    
    
  };
  
  void draw(){
    if(mousePressed)update = true;
    else update = false;
    if(g1 == null||update){
      for(int i=0;i<grid.length;i++){
        for(int j=0;j<grid[0].length;j++){
          
          
          if(update)grid[i][j] = color(random(255),random(255),random(255));
          color a = grid[i][j];
          fill(a);
          noStroke();
          rect(x + xres * i, y + yres * j,xres,yres);
        }}
        
       //g1 = createImage(g.w,g.h,RGB);
       g1 = get(0,0,g.w,g.h);
       //
    }
    else {
      image(g1,x,y);
    }
  };
  
  void drawPerlin(){
    
    float yoff = flying;
    if(g1==null||update){
      for (int y = 0; y < rows; y++) {
        float xoff = 0;
        for (int x = 0; x < cols; x++) {
          float d = map(noise(xoff, yoff), 0, 1, 0, 255);
          
          xoff += 0.2;
          color c = 0;
          
          if(d<60)c = color(0,0,255);
          if(d>60)c = color(189, 189, 23);
          if(d>100)c = color(31, 138, 29);
          if(d>160)c = color(84, 94, 84);
          if(d>200)c = color(255);
          noStroke();
          fill(c);
          rect(x*xres,y*yres,xres,yres);
        }
        yoff += 0.2;
      }
      g1 = get(0,0,w,h);
      update = false;
    }else image(g1,x,y);
  };
  
};

grid g;
void setup(){
  size(1200,600);
  g = new grid(100,100,1200-100,600-100,10,10);
  
};


void draw(){
  
  background(0);
  g.drawPerlin();
  //g.draw();
  fill(255,0,0);
  textSize(20);
  text(frameRate,10,20);
};

try both methods in the sketch, ie uncomment the g.draw() method and see what it does.

Pressing the mouse with g.draw() will randomize the colours.

Is this the kind of thing you are looking for?

5

With perlin noise you can set the seed so that the same grid can be set each time.

float xoff = 0.0;

void setup() {
  noiseSeed(2);
  stroke(0, 10);
};

void draw() {
  xoff = xoff + .01;
  float n = noise(xoff) * width;
  line(n, 0, n, height);
};

we can combine this with the first sketch to produce the same output each time. Adding noiseSeed(some Integer);in setup you can specify which seed to use and therefore which grid to draw.

to further breakdown the code. By using the following

//new grid creates a new instance of grid
//it requires an x and y position, a width and height and resolution for x and y components
// g = grid instance
g = new grid(100,100,1200-100,600-100,10,10);

The grid class can store a number of different variables which we can then access in later functions.

class grid{
//an array of colours to store the color of the cell
  color [][]grid;
//the x and y position, and the x and y resolution
  float x,y, xres,yres,flying;
  int w,h,cols,rows;
// a PImage to store our grid once created so that we don't need to run through the loop each time
  PImage grid2,g1;
//a boolean we can use to check if we want to update the grid
  boolean update;

in the constructor we also add the random colours to our grid.

//loop through all rows
for(int i=0;i<cols;i++){
//loop through all colums
      for(int j=0;j<rows;j++){
        //assign a random colour to the cell
        grid[i][j] = color(random(255),random(255),random(255));
        
    }}

then in draw

void draw(){
    if(mousePressed)update = true;
    else update = false;
//we first check if we need to update the grid
    if(g1 == null||update){
      for(int i=0;i<grid.length;i++){
        for(int j=0;j<grid[0].length;j++){
          
          
          grid[i][j] = color(random(255),random(255),random(255));
          color a = grid[i][j];
          fill(a);
          noStroke();
          rect(x + xres * i, y + yres * j,xres,yres);
        }}
        //we save the grid 
       g1 = get(x,y,g.w,g.h);
    }
//if the grid has been updated draw the image
    else {
      image(g1,0,0);
    }
  };

you can use this base class to store shared variables for the grid which can then be used to control the output of the grid.

6

Wow, thank you so much for the thorough response, examples, and explanation. I’m going to work through this right now and see if I can combine it with what I’ve been doing. Based on what you have here, I think I was just conceptualizing the problem incorrectly.

1 Like