How to show terrain and 3d grid

Processing Coding Questions
1

@Chrisir

hi

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

jafar121

to this sketch

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

2

jaf

Untitled 53
Untitled 531200×714 61.9 KB

3

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:

:)

1 Like
4

this is it but i can not combine them

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
Untitled 5441200×714 91.3 KB

5

@glv

i think at first that Chrisir answred me

you are giving the forum a nice taste :heart: :heart: :heart:

6

Hi
@glv

i played with your link example

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


}
  }
}
7

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 
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

It had a transparent background that was helpful and considered this fair use.

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
image502×527 64 KB

8

@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

and thank you for answer

9

Hello,

Woops!

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

You should be able to combine these.

Have fun!

1 Like
10

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

Code 
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
image602×627 20.9 KB

11

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

12

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

1 Like
13

@micuat

yes you are true i played with it once

thanks for your care

14

hi

@glv

barely
Close to required

Untitled 55
Untitled 551200×714 164 KB

15

@glv
hi

Untitled 56
Untitled 561200×714 183 KB

Untitled 57
Untitled 571200×714 123 KB

Untitled 64
Untitled 641200×714 111 KB

16

@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
Screenshot_2021-03-14-19-42-57-5221280×800 119 KB
Screenshot_2021-03-14-19-43-56-634
Screenshot_2021-03-14-19-43-56-6341280×800 144 KB
Screenshot_2021-03-14-19-43-23-452
Screenshot_2021-03-14-19-43-23-4521280×800 172 KB
Screenshot_2021-03-14-19-44-45-849
Screenshot_2021-03-14-19-44-45-8491280×800 125 KB
Screenshot_2021-03-14-19-44-14-981
Screenshot_2021-03-14-19-44-14-9811280×800 144 KB
Screenshot_2021-03-14-19-46-30-171
Screenshot_2021-03-14-19-46-30-171800×1280 129 KB
Screenshot_2021-03-14-19-45-23-183
Screenshot_2021-03-14-19-45-23-1831280×800 170 KB
Screenshot_2021-03-14-19-49-13-870
Screenshot_2021-03-14-19-49-13-870800×1280 101 KB
jafal
Screenshot_2021-03-14-19-42-00-966
Screenshot_2021-03-14-19-42-00-9661280×800 125 KB

2 Likes