# How to show terrain and 3d grid

**URL:** <https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491>\
**Category:** Coding Questions\
**Created:** [March 13, 2021, 10:12am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491 "2021-03-13T10:12:56Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 10:12am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/1 "2021-03-13T10:12:56Z")

</div>

@[Chrisir](https://discourse.processing.org/u/Chrisir)

hi

i need some help if you kind i want to add this 3d rects

![jafar121](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e348fad687ba86e7c9c34025e33238531e88ce85.jpeg)

to this sketch

```auto
int cols, rows;
int scl = 26;
int w = 2800;
int h = 2600;

boolean showImage = true; 
PImage img;

void setup() {
  size(800, 800, P3D);
  cols = w / scl;
  rows = h/ scl;

  img = loadImage( "jaf.png");

  texture(img);
  noStroke();
}

float ax, ay;

void draw() {
  lights();
  

  background(64);
 
  translate(width/2, height/2);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, width, -PI, PI));
  scale(0.2);
  if (showImage) image(img, 220, 0);  
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
   if (showImage) image(img, 220, 0);  
    beginShape(TRIANGLE_STRIP);
    if (showImage) image(img, 220, 0);  
    texture(img);

    for (int x = 0; x < cols; x++) {
      ax = map(x, 0, cols, 0, img.width);
      ay = map(y, 0, rows, 0, img.height);

      vertex(x*scl, y*scl, map(brightness(img.get(int(ax), int(ay))), 320, 255, 0, 200), ax, ay );

      ax = map(x, 0, cols, 0, img.width);
      ay = map(y+1, 0, rows, 0, img.height);

      vertex(x*scl, (y+1)*scl, map(brightness(img.get(int(ax), int(ay))), 320, 255, 0, 200), ax, ay );
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();
  }
}

void mousePressed() {

  showImage = !showImage;
}

```

how to include this sketch to the 3d grid rects  
thanks in advance

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 10:15am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/2 "2021-03-13T10:15:41Z")

</div>

![jaf](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7f6fb76a42aaadee1b2293d99dd1c48a3cd7a812.png)

 ![Untitled 53](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b17e8fc8167d75fafbf851701c1c6f433c57203a.jpeg)

---

<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:** [March 13, 2021, 10:29am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/3 "2021-03-13T10:29:51Z")

</div>

Hello,

To get you started…

You will be working in 3D.

Start with one grid in the XY plane and then you should be able to modify this for the XZ and YZ planes.

Resources:

- [P3D / Processing.org](https://processing.org/tutorials/p3d/)
- [https://www.youtube.com/watch?v=esKLU3dJo70](https://www.youtube.com/watch?v=esKLU3dJo70)
- [Grid | Learning Processing 2nd Edition](http://learningprocessing.com/examples/chp16/example-16-06-Grid)

`:)`

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 10:34am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/4 "2021-03-13T10:34:32Z")

</div>

this is it but i can not combine them

```auto
void setup() {
  size(600, 600, P3D);
  stroke(255);
  strokeWeight(2);
}

void draw() {
  background(0);
  translate(width/2, height/2, 0);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, height, -HALF_PI, HALF_PI));
  translate(-100,100,-100);
  for (int i = 0; i<11; i++) {
    line( 0, 0, 20*i, 0, -200, 20*i );
    line( 0, -20*i, 0, 0, -20*i, 200 );
    line( 0, -20*i, 0, 200, -20*i, 0 );
    line( 20*i, 0, 0, 20*i, -200, 0 );
    line( 0, 0, 20*i, 200, 0, 20*i );
    line( 20*i, 0, 0, 20*i, 0, 200 );
  }
}

```

 ![Untitled 544](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4b8e632ed998d36812257040fd55d28dd7db695c.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 10:39am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/5 "2021-03-13T10:39:03Z")

</div>

@glv

i think at first that [Chrisir](https://discourse.processing.org/u/Chrisir) answred me

you are giving the forum a nice taste ❤ ❤ ❤

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 11:38am UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/6 "2021-03-13T11:38:19Z")

</div>

Hi  
@[glv](https://discourse.processing.org/u/glv)

i played with your link example

```auto
int videoScale =8;

int cols, rows;

void setup() {
  size(600, 600, OPENGL);
  
 cols = width/videoScale;
  rows = height/videoScale;
}
 
void draw() {
  background(0);
 
  lights();
 
  translate(width/2, height/2, 0);
 
  scale(3);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(-map(mouseY, 0, height, -PI, PI));
 
 
 
  stroke(255, 0, 0);
  fill(255, 0, 0, 128);
  plane();
 
  stroke(0, 255, 0);
  fill(0, 255, 0, 128);
  rotateX(HALF_PI);
  plane();
 
stroke(0, 0, 255);
 fill(0, 0, 255, 128);
rotateY(HALF_PI);
  plane();
}
 
void plane() {

   
  // Begin loop for columns
  for (int i = 0; i < cols; i++) {
    // Begin loop for rows
    for (int j = 0; j < rows; j++) {

      // Scaling up to draw a rectangle at (x,y)
      int x = i*videoScale;
      int y = j*videoScale;
      fill(255);
      stroke(0);
      // For every column and row, a rectangle is drawn at an (x,y) location scaled and sized by videoScale.
      rect(x, y, videoScale, videoScale); 
  

}
  }
}

```

---

<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:** [March 13, 2021, 12:07pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/7 "2021-03-13T12:07:45Z")

</div>

Hello,

It looks like that original picture was an actual 3D plot.

If you want to put a 2D picture of a 3D plot on a grid it gets complicated.

This is a quick exploration of this with code you provided and some embellishments:

> **Code**
>
> ```auto
> PImage img;
> 
> void setup() {
> size(500, 500, P3D);
> stroke(128);
> strokeWeight(1);
>   
> img = loadImage("3d_transp.png");
> println(img.width, img.height);
> img.resize(img.width/3, img.height/2);
> }
> 
> void draw() {
> background(0);
> 
> push();
> //rotateY(map(mouseX, 0, width, -PI, PI));
> //rotateX(map(mouseY, 0, height, -HALF_PI, HALF_PI));
> //translate(-100, 100,-100);
>   
> //perspective();
> ortho();
>   
> translate(width/2, height/2, -100); 
> rotateX(-TAU/8);
> rotateY(-TAU/8);
> 
> for (int i = 0; i<11; i++) {
> line( 0, 0, 20*i, 0, -200, 20*i );
> line( 0, -20*i, 0, 0, -20*i, 200 );
> line( 0, -20*i, 0, 200, -20*i, 0 );
> line( 20*i, 0, 0, 20*i, -200, 0 );
> line( 0, 0, 20*i, 200, 0, 20*i );
> line( 20*i, 0, 0, 20*i, 0, 200 );
> }
> pop();
> 
> push();
> translate(width/2, height/2, 150); 
> //perspective();
> ortho();
> imageMode(CENTER);
> image(img, 0, 50);
> pop();
> }
> 
> ```

You have to consider perspective of image and grid and Z when doing this.  
I may be close but do not have the details of original 3D image.

Image is from:  
_[3D Terrain Mapping - Terrabotics](https://www.terrabotics.co.uk/products/3d-terrain-mapping/)_

It had a transparent background that was helpful and considered this [fair use](https://support.google.com/legal/answer/3463239?hl=en-GB).

You can also draw the background grid in P2D and overlay an image.  
I just did this but will not be sharing that code; it is achievable.

I leave the rest of the exploration of this to you.

`:)`

This is from the code I provided:

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 12:44pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/8 "2021-03-13T12:44:34Z")

</div>

@[glv](https://discourse.processing.org/u/glv)

hi and thanks for your lighting

i do not want to add pic to the 3d rect gird i want to combine the 3d sketch with the rect grid to look like this pic

![jafar121](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e348fad687ba86e7c9c34025e33238531e88ce85.jpeg)

and thank you for answer

---

<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:** [March 13, 2021, 12:55pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/9 "2021-03-13T12:55:44Z")

</div>

Hello,

Woops!

I did not look at full code but had fun playing with this.

You should be able to combine these.

Have fun!

---

<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:** [March 13, 2021, 1:29pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/10 "2021-03-13T13:29:45Z")

</div>

Here is a very quick first effort (uncommented) to combine these that will need more work:

> **Code**
>
> ```auto
> int cols, rows;
> int scl = 26;
> int w = 2800;
> int h = 2600;
> 
> float ax, ay;
> 
> boolean showImage = true; 
> PImage img;
> 
> void settings() 
> {  
> size(600, 600, P3D);
> }
> 
> void setup() 
> {
> stroke(255);
> strokeWeight(2);
> 
> cols = w / scl;
> rows = h/ scl;
> 
> img = loadImage( "test.png");
> 
> texture(img);
> noStroke();
> }
> 
> void draw() {
> background(0);
> translate(width/2, height/2, 0);
> rotateY(map(mouseX, 0, width, -PI, PI));
> rotateX(map(mouseY, 0, height, -HALF_PI, HALF_PI));
> 
> scale(1);
>   
> stroke(255);
> strokeWeight(2);
> translate(-100, 100, -100);
> for (int i = 0; i<11; i++) {
> line( 0, 0, 20*i, 0, -200, 20*i );
> line( 0, -20*i, 0, 0, -20*i, 200 );
> line( 0, -20*i, 0, 200, -20*i, 0 );
> line( 20*i, 0, 0, 20*i, -200, 0 );
> line( 0, 0, 20*i, 200, 0, 20*i );
> line( 20*i, 0, 0, 20*i, 0, 200 );
> }
> 
> push();
> scale(0.1);
> 
> if (showImage) image(img, 220, 0);  
> translate(-w/2, -h/2);
> for (int y = 0; y < rows-1; y++) {
> if (showImage) image(img, 220, 0);  
> beginShape(TRIANGLE_STRIP);
> if (showImage) image(img, 220, 0);  
> texture(img);
> 
> for (int x = 0; x < cols; x++) {
> ax = map(x, 0, cols, 0, img.width);
> ay = map(y, 0, rows, 0, img.height);
> 
> vertex(x*scl, y*scl, map(brightness(img.get(PApplet.parseInt(ax), PApplet.parseInt(ay))), 320, 255, 0, 200), ax, ay );
> 
> ax = map(x, 0, cols, 0, img.width);
> ay = map(y+1, 0, rows, 0, img.height);
> 
> vertex(x*scl, (y+1)*scl, map(brightness(img.get(PApplet.parseInt(ax), PApplet.parseInt(ay))), 320, 255, 0, 200), ax, ay );
> //rect(x*scl, y*scl, scl, scl);
> }
> endShape();
> }
> pop();
> }
> 
> void mousePressed() 
> {
> showImage = !showImage;
> }
> 
> ```

It also crashed on me so you may see extra code in from restoration that is unfamiliar.

You have to give consideration to the `scale()` when you are combining these and origins.

You may even want to rethink this after working through it a bit.

If you are not familiar with `push()` and `pop()` look these up and the related references.

Have fun!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/61e1810d06b546cb32caeedd09e66ab9c10f9d3f.png)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 1:52pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/11 "2021-03-13T13:52:55Z")

</div>

thanks i am going to try to enhance it as my demand if i can

do you remember the android and Bluetooth at first i took so long to understand it but now i can deal with it so easy and solve any stuck i got into

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 13, 2021, 2:29pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/12 "2021-03-13T14:29:44Z")

</div>

It seems you figured something out, but also Dan’s video on noise terrain can be helpful to understand how to draw such a model in Processing

> **[3D Terrain Generation with Perlin Noise in Processing](https://thecodingtrain.com/CodingChallenges/011-perlinnoiseterrain.html)**
>
> In this coding challenge, I create a 3D procedural terrain using Perlin Noise and the beginShape() function in Processing.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 2:37pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/13 "2021-03-13T14:37:22Z")

</div>

@[micuat](https://discourse.processing.org/u/micuat)

yes you are true i played with it once

> [@How to add image to terrain sketch](https://discourse.processing.org/t/how-to-add-image-to-terrain-sketch/28158/2):
>
> int cols, rows; int scl = 20; int w = 2000; int h = 1600; float flying = 0; float[][] terrain; PImage img; void setup() { size(600, 600, P3D); cols = w / scl; rows = h/ scl; terrain = new float[cols][rows]; //String = img; img = loadImage( "vv.png"); texture(img); } void draw() { flying -= 0.1; float yoff = flying; for (int y = 0; y \< rows; y++) { float xoff = 0; for (int x = 0; x \< cols; x++) { terrain[x][y] = map(noise(xoff, yoff), 0, 1, -10…

thanks for your care

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 2:42pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/14 "2021-03-13T14:42:16Z")

</div>

hi

@[glv](https://discourse.processing.org/u/glv)

barely  
Close to required

 ![Untitled 55](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b18ba54dcba4e56352010112b6feb6ff5adadd8.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 13, 2021, 6:45pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/15 "2021-03-13T18:45:53Z")

</div>

@[glv](https://discourse.processing.org/u/glv)  
hi

 ![Untitled 56](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/06ab77484e039f990b2b2752deb79d8872cc3673.jpeg)

 ![Untitled 57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b612618d8cc4b3e2634a757d3c30a175cd37b90.jpeg)

 ![Untitled 64](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1041567237046038197854a8eb1bbf172e5e49f6.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 14, 2021, 5:52pm UTC](https://discourse.processing.org/t/how-to-show-terrain-and-3d-grid/28491/16 "2021-03-14T17:52:32Z")

</div>

@[glv](https://discourse.processing.org/u/glv)  
hi

i run it with all conditions zooming and scale the grid and scale the image and control the image x y z position inside the grid and converted the image to 3d

 ![Screenshot_2021-03-14-19-42-57-522](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/69cb56a4913a8601ed36f4e635c892f33d80d697.jpeg) ![Screenshot_2021-03-14-19-43-56-634](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8ecdf721e9088be6f3925d74f27383dd32ff3f7d.jpeg) ![Screenshot_2021-03-14-19-43-23-452](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1f0bb79170814da64e583f8a9f4dd8f844bb7243.jpeg) ![Screenshot_2021-03-14-19-44-45-849](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/02c056d8f54a30016706b2ada3c361981abbe53d.jpeg) ![Screenshot_2021-03-14-19-44-14-981](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1ce989fb2b57af9cae01608927e094357a6e9083.jpeg) ![Screenshot_2021-03-14-19-46-30-171](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d48e2d919a2b90f2450a039129e9de13884e2854.jpeg) ![Screenshot_2021-03-14-19-45-23-183](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/66ec1b976040e0d61ea19dffd47349c5ee31cd15.jpeg) ![Screenshot_2021-03-14-19-49-13-870](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e728cd2980276aeaecbbff588422eb325d56f05f.jpeg) ![jafal](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cad0c271d7440b9bf7307fb8888814a13ac16736.png) ![Screenshot_2021-03-14-19-42-00-966](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d81f73149512460da51ddd072e322a2d0116cc22.jpeg)