# Question: Running multiple draw loops simultaneously in a grid

**URL:** <https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927>\
**Category:** Coding Questions\
**Created:** [May 7, 2021, 1:37am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927 "2021-05-07T01:37:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![markcburke](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@markcburke](https://discourse.processing.org/u/markcburke)\
**Post date:** [May 7, 2021, 1:37am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/1 "2021-05-07T01:37:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 7, 2021, 1:51am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/2 "2021-05-07T01:51:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![markcburke](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@markcburke](https://discourse.processing.org/u/markcburke)\
**Post date:** [May 7, 2021, 2:10am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/3 "2021-05-07T02:10:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 7, 2021, 2:35am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/4 "2021-05-07T02:35:24Z")

</div>

here are two examples of a grid sketch

I use classes to simplify things visually.

```auto
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);
  };
  
};

```

```auto
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?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 7, 2021, 2:50am UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/5 "2021-05-07T02:50:49Z")

</div>

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

```auto
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

```auto
//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.

```auto
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.

```auto
//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

```auto
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.

---

<div class="post-metadata">

**Author:** ![markcburke](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@markcburke](https://discourse.processing.org/u/markcburke)\
**Post date:** [May 7, 2021, 1:29pm UTC](https://discourse.processing.org/t/question-running-multiple-draw-loops-simultaneously-in-a-grid/29927/6 "2021-05-07T13:29:54Z")

</div>

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.