How to show terrain and 3d grid

@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

jaf

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

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

@glv

i think at first that Chrisir answred me

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

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


}
  }
}

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:

@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

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

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!

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

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

@micuat

yes you are true i played with it once

thanks for your care

hi

@glv

barely
Close to required

@glv
hi

@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

jafal

2 Likes