Creating variation in grid with random();

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?

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

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:

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.

References:
https://processing.org/tutorials/pvector
https://processing.org/reference/PVector.html

:)

2 Likes

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?

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();
    }
}
  

Hi @asymmetric,

this code which posted above is not ending up with a black screen, as it is not running at all !?

see:

Cheers
— mnse

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.

Hello,

Keep it simple at first…

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

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.

Another PVector reference:
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.

:)

1 Like

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?


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();
}
}


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


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();
}


Your shape is only one point:

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

You need at least 4 points for a QUAD_STRIP.

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

  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_STRIPs 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/vertex_.html

Both P2D and P3D utilize a software specification called OpenGL:

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

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.

:)