Mesh trickery in Processing

We’ll start with a grid across the stage. The width and height of the grid units will be based on the size of a variable called scl.
``` int cols; int rows; int scl =20;//scale for the grid squares void setup(){ size(950, 950,P3D); int w =950; //width of canvas int h = 950; // height of canvas cols = w/scl;//size of grid cols rows = h/scl;.//size of grid rows } void draw(){ background(0); for (int x=0; x<cols;x++){ for (int y=0; y<rows;y++){ rect(x*scl,y*scl,scl,scl); } } }```

We’ll use the (TRIANGLE_STRIP) function to create triangular polygons at the vertices

Let’s create the mesh as a flat grid
``` int scl =20;//scale for the grid squares void setup() { size(950, 950, P3D); int w =950; //width of canvas int h = 950; // height of canvas cols = w/scl; rows = h/scl; } void draw() { background(0); stroke(255); noFill(); for (int y=0; y<rows; y++) { beginShape(TRIANGLE_STRIP); for (int x=0; x<cols; x++) { vertex(x*scl, y*scl); vertex(x*scl, (y+1)*scl);//go one down on the y to create vertex for triangle //rect(x*scl, y*scl, scl, scl); } endShape(); } }```

Now, let’s rotate the grid along the x axis using the rotateX function. We’ll translate the coordinates at  the center first; translate(width/2, height/2). Then we’ll rotate it about 60 degrees or PI/3 in radians. We’ll translate the coordinate again to bring in the grid into the right position (-w/2,-h/2).

```int cols; int rows; int scl =20;//scale for the grid squares int w =2200; //width of canvas int h = 2200; // height of canvas float [][] terrain; //data structure (vertext position rows and columns) void setup() { size(950, 950, P3D); cols = w/scl; rows = h/scl; } void draw() { background(0); stroke(255); noFill(); translate(width/2,height/2);//tranlate to the crenter of the window float angleRot1 = PI/3;//60 degrees rotateX(angleRot1); translate(-w/2,-h/2);//translate again, to move all the grid to the top left again for (int y=0; y<rows-1; y++) { beginShape(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]);//go one down on the y to create vertex } endShape(); } }```

Next, we’ll extrude the z values, and add a data set to store our locations within the grid. Since our grid is rotated on the X axis the extrusions will look like terrain elevations.

int cols;
int rows;
int scl =20;//scale for the grid squares
int w =2200; //width of canvas
int h = 2200; // height of canvas
float [][] terrain; //data structure (vertext position rows and columns) for the z
void setup() {
size(950, 950, P3D);
cols = w/scl;
rows = h/scl;
terrain = new float[cols][rows];
for (int y=0; y<rows; y++) {
for (int x=0; x<cols; x++) {
terrain[x][y] = random(-10,10);
}
}
}
void draw() {
background(0);
stroke(255);
noFill();
translate(width/2,height/2);//tranlate to the crenter of the window
float angleRot1 = PI/3;//60 degrees
rotateX(angleRot1);
translate(-w/2,-h/2);//translate again, to move all the grid to the top left again
for (int y=0; y<rows-1; y++) {
beginShape(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]);//go one down on the y to create vertex
}
endShape();
}
}

Let’s use perlin noise instead of the random function. We’ll map two variables with small increments from 0 to 1 to -100 to 100.

``` float yoffset = 0; for (int y=0; y<rows; y++) { float xoffset = 0; for (int x=0; x<cols; x++) { //terrain[x][y] = random(-10,10); terrain[x][y] = map(noise(xoffset,yoffset), 0,1, -100,100); //try perlin noise xoffset+=0.2; } yoffset +=0.2; }```

We can give the illusion of the mesh moving towards us by recalculating the terrain[] inside the draw function. Also, we’ll increment yoff by a factor of -0.1, we’ll store this in a variable called flyin

```int cols; int rows; int scl =20;//scale for the grid squares int w =2200; //width of canvas int h = 2200; // height of canvas float flyin = 0; float [][] terrain; //data structure (vertext position rows and columns) for the z void setup() { size(950, 950, P3D); cols = w/scl; rows = h/scl; terrain = new float[cols][rows]; }```
```void draw() { background(0); stroke(255); noFill(); flyin -= 0.1; //println(flyin); float yoffset = flyin; //float yoffset = 0; for (int y=0; y<rows; y++) { float xoffset = 0; for (int x=0; x<cols; x++) { //terrain[x][y] = random(-10,10); //terrain[x][y] = map(noise(xoffset,yoffset), 0,1, -100,100); //try perlin noise terrain[x][y] = map(noise(xoffset,yoffset), 0,1, -100,100); //try perlin noise xoffset+=0.2; } yoffset +=0.2; } translate(width/2,height/2);//tranlate to the crenter of the window float angleRot1 = PI/3;//60 degrees //println(degrees(angleRot1)); rotateX(angleRot1); translate(-w/2,-h/2);//translate again, to move all the grid to the top left again for (int y=0; y<rows-1; y++) { beginShape(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]);//go one down on the y to create vertex } endShape(); } }```