# Creating variation in grid with random();

**URL:** <https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175>\
**Category:** Coding Questions\
**Created:** [July 31, 2022, 7:31pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175 "2022-07-31T19:31:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [July 31, 2022, 7:31pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/1 "2022-07-31T19:31:10Z")

</div>

Hi!

I’m wondering how I can go about creating a grid like the  
example in the screenshot below. I’m interested in morphing the grid with randomness. How do I go about designing varying cells and joining them together as a grid image? Can I use the random(); with (TRIANGLE\_STRIP),(QUAD\_STRIP) to create a variation?

 ![IMG_5476.PNG](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/3/d31ec7924fb168b3ee559992ad57b187a73d2ed3.jpeg)

```auto
float x = 0;
float y = 0;

float spacing = 10;

void setup() {
  size(1000,1000);
  
}

void draw(){
  background(0);
  
  // spacing = spacing + random(-2,2);
  stroke(255);
  strokeWeight(2);
  
  x = 0;
  while (x < width) {
    line(x,0,x,height);
    x = x + spacing;
  }
  
  for (int y = 0; y < height; y = y + 10) { // initialization condition, boolean expression, incrementation opporation
  line(0, y, width, y);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 31, 2022, 10:21pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/2 "2022-07-31T22:21:33Z")

</div>

Hello @asymmetric,

I recycled some code from your other topics…

This creates an array of _PVectors_ with some randomness that can be used to draw a grid:

```auto
int cols, rows;

PVector[][] terrain;

void setup()
  {
  size(1000, 1000);  
  terrain = new PVector [30][30];
  
  cols = 20;  
  rows = 20;
  for (int y = 0; y < rows; y++) 
    {
    for (int x = 0; x< cols; x++) 
      {   
      terrain[x][y] = new PVector(x*50 + random(-5, 5), y*50 + random(-5, 5));
      }
    } 
  noLoop();
  }

```

You will have to complete the _draw()_ cycle to generate a grid.  
See your previous topics.

After drawing a grid with (QUAD\_STRIP) I wrote a few lines of code to draw a line from one corner to the opposite corner; the direction was decided by a random 0 or 1.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/2/f29b0ec3811fbc1e82188a290247f10f6e903ac0.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/1/215829569be32499dca1593dab62f5765c98b6e1.png)

References:  
[https://processing.org/tutorials/pvector](https://processing.org/tutorials/pvector)  
[https://processing.org/reference/PVector.html](https://processing.org/reference/PVector.html)

`:)`

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 1, 2022, 4:34am UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/3 "2022-08-01T04:34:22Z")

</div>

Thank you @glv ! Again, this is exactly what I was looking for. When I follow your directions I end up with a black screen after running the code. What am I missing?

```auto
int cols, rows;

PVector[][] terrain;

void setup()
  {
  size(1000, 1000);  
  terrain = new PVector [30][30];
  
  cols = 20;  
  rows = 20;
  for (int y = 0; y < rows; y++) 
    {
    for (int x = 0; x< cols; x++) 
      {   
      terrain[x][y] = new PVector(x*50 + random(-5, 5), y*50 + random(-5, 5));
      }
    } 
  noLoop();
  }
  
void draw(){
  background(0);
  stroke(255);
  smooth();
  noFill(); 
  
  translate(width/2, height/2); //rotate perspective
  translate(-width/2,-height/2); //perspective 
  
  for (int y = 0; y < rows-1; y++) {
    beginShape(QUAD_STRIP); // OR beginShape(QUAD_STRIP), (TRIANGLE_STRIP)
    for (int x = 0; x< cols; x++) {
      //vertex(x*scl, y*scl, terrain[x][y]);
      //vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
      
       }
         endShape();
    }
}
  

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 1, 2022, 10:11am UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/4 "2022-08-01T10:11:49Z")

</div>

Hi @asymmetric,

this code which [posted above](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/3) is not ending up with a black screen, as it is not running at all !?

see:

> **[Reference](https://processing.org/reference/vertex_.html)**
>
> All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively withi…

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 1, 2022, 5:10pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/5 "2022-08-01T17:10:17Z")

</div>

Hi @glv ! I’m still having a disconnect with the code that you provided. I am watching the coding train tutorials and reading processing books, but I’m unable to connect the dots with the code you wrote.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 1, 2022, 7:01pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/6 "2022-08-01T19:01:19Z")

</div>

Hello,

Keep it simple at first…

Use the loop that generated the array of PVectors to display them in the console:

```auto
float vx = terrain[x][y].x; // See tutorials and references to understand this.
float vy = terrain[x][y].y; // See tutorials and references to understand this.
println(vx, vy);

```

Then try replacing the `println()` with `point()` and a `strokeWeight()` that is visible such as 5.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/2/d2dbf5695932d4791114a119f6c87a94fe2e7a0b.png)

Another PVector reference:  
[https://natureofcode.com/book/chapter-1-vectors/](https://natureofcode.com/book/chapter-1-vectors/)

There is a learning curve to all of this and you need to take it in steps.

Once you progress from understanding PVectors and plotting points then take the next step to vertices.

`:)`

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 2, 2022, 7:23pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/9 "2022-08-02T19:23:48Z")

</div>

Hi @glv and @mnse ! I figured out how to make a dot grid with PVectors after watching the coding train and reading The Nature of Code chapter on Vectors. How do I continue onto the next step to make my end target of creating randomness in a grid using QUAD\_STRIP?

```auto

PVector[][] grid;
int width=400;
int height=500;
int spacing = 20;
int rows = height/2;
int cols = width/2;

void setup() {
  colorMode(HSB, 255);
  size(1000,1000);
  smooth();
  grid = new PVector[cols][rows];
  for (int i = 0; i < cols; i ++ ) {
    for (int j = 0; j < rows; j ++ ) {
      // Initialize each object
      grid[i][j] = new PVector(i*(spacing),j*(spacing));
    }
  }

}

void draw() {
  background(255);
  
  PVector line = new PVector();
  
  for (int i = 0; i < cols; i ++ ) {     
    for (int j = 0; j < rows; j ++ ) {
      
      
      PVector v = PVector.sub(grid[i][j], line);
      color pointColor = color((random(255)), 255, 0, 100);
      drawVector(v,grid[i][j],0.1, pointColor);
    }
  }
  
  
  
  

}

void drawVector(PVector v, PVector loc, float scayl, color arrowpoint) {
  pushMatrix();
  translate(loc.x,loc.y);
  stroke(arrowpoint);
  strokeWeight(2);
  point(0,0);
  popMatrix();
}
}

```

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 2, 2022, 7:59pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/10 "2022-08-02T19:59:37Z")

</div>

I’m able to use beginShape(POINTS); but not beginShape(QUAD\_STRIP); . Why isn’t beginShape(QUAD\_STRIP); working here?

```auto

PVector[][] grid;
int width=400;
int height=500;
int spacing = 20;
int rows = height/2;
int cols = width/2;

void setup() {
  colorMode(HSB, 255);
  size(1000,1000);
  smooth();
  grid = new PVector[cols][rows];
  for (int i = 0; i < cols; i ++ ) {
    for (int j = 0; j < rows; j ++ ) {
      // Initialize each object
      grid[i][j] = new PVector(i*(spacing),j*(spacing));
    }
  }

}

void draw() {
  background(0);
  
  PVector line = new PVector();
  
  for (int i = 0; i < cols; i ++ ) {     
    for (int j = 0; j < rows; j ++ ) {
   
      
      PVector v = PVector.sub(grid[i][j], line);
      color pointColor = color(255);
      drawVector(v,grid[i][j],0.1, pointColor);
    }
  }
  
  
  
  

}

void drawVector(PVector v, PVector loc, float scayl, color arrowpoint) {
  pushMatrix();
  translate(loc.x,loc.y);
  stroke(arrowpoint);
  strokeWeight(2);
  beginShape(POINTS);
  vertex(0,0);
  popMatrix();
  endShape();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 3, 2022, 11:06am UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random/38175/11 "2022-08-03T11:06:04Z")

</div>

> [@asymmetric](#):
>
> I’m able to use beginShape(POINTS); but not beginShape(QUAD\_STRIP); . Why isn’t beginShape(QUAD\_STRIP); working here?

Your shape is only one point:

```auto
  beginShape(POINTS);
  vertex(0,0);
  endShape();

```

You need at least 4 points for a `QUAD_STRIP`.

> [@glv](#):
>
> You will have to complete the _draw()_ cycle to generate a grid.  
> See your previous topics.

This is what I _adapted_ (not just a cut and paste) from your previous topic:

```auto
  for (int y = 0; y < rows-1; y++) 
    {
    beginShape(QUAD_STRIP); // OR beginShape(QUAD_STRIP), (TRIANGLE_STRIP)
    for (int x = 0; x< cols; x++) 
      {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
      }
    endShape();
    }

```

The above code is drawing _ **rows** _ of shapes with `QUAD_STRIP`s _ **one row at at a time** _.

You need to create the shape directly with vertices… your code is translating a single shape (one vertex) to a point defined by the PVector location.

Take a look at the syntax of these:  
[https://processing.org/reference/point\_.html](https://processing.org/reference/point_.html)  
[https://processing.org/reference/vertex\_.html](https://processing.org/reference/vertex_.html)

_Both P2D and P3D utilize a software specification called OpenGL_:

> **[Render Techniques](https://processing.org/tutorials/rendering/)**
>
> Tools for rendering geometries in Processing.

_OpenGL provides ten different primitive types for drawing points, lines, and polygons, as shown in Figure 2-1._:

> **[Section 2.1. OpenGL Primitives | OpenGL Distilled](https://flylib.com/books/en/2.789.1.24/1/)**
>
> OpenGL Distilled,2007, (isbn 0321336798, ean 0321336798), by Martz P.

I gave you some ideas based on your previous code to show that this was achievable. The rest is up to you…

Start simple and build on that… starting from scratch is sometimes part of the process.

`:)`