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