Creating variation in grid with random(); & image

Like this?

  Grid(int resolution, int borderGap) {
    points = new PVector[resolution][resolution];
    diagonals = new boolean[resolution][resolution];

    float spaceBetweenPoints = (float) (width - (2 * borderGap)) / (resolution - 1);

    img = loadImage("b.png");
    img.loadPixels();
    img.resize(1000,1000);
    // Construct points
    for (int i = 0; i < resolution; i++) {
      float x = borderGap + i * spaceBetweenPoints;
      for (int j = 0; j < resolution; j++) {
        float y = borderGap + j * spaceBetweenPoints;
        float pointHeight = brightness(img.get(i,j));
        points[i][j] = new PVector(x, y, pointHeight);
        
        // Store diagonal info, with 1/2 flip
        diagonals[i][j] = random(1) < 0.5;
        

      }
    }
  }

The code is doing something now!! YAY!!! THANK YOU :blush: :smiley: :joy: :star_struck: I just got shivers ~!

  Grid(int resolution, int borderGap) {
    points = new PVector[resolution][resolution];
    diagonals = new boolean[resolution][resolution];

    float spaceBetweenPoints = (float) (width - (2 * borderGap)) / (resolution - 1);

    img = loadImage("b.png");
    img.loadPixels();
    img.resize(1000,1000);
    // Construct points
    for (int i = 0; i < resolution; i++) {
      float x = borderGap + i * spaceBetweenPoints;
      for (int j = 0; j < resolution; j++) {
        float y = borderGap + j * spaceBetweenPoints;
        float pointHeight = 10 *(brightness(img.get(i,j)));
        points[i][j] = new PVector(x, y, pointHeight);
        
        // Store diagonal info, with 1/2 flip
        diagonals[i][j] = random(1) < 0.5;
        

      }
    }
  }
1 Like

How do I zoom out so I can see the entire height map image? The code is only creating a height map for a corner of the image.

Original image:

Yay! Check the borderGap global variable, it’s the size of the border between the grid and the canvas.

Also the value produced by brightness is between 0 and 255 so it might be too much and overflowing the camera view.

Would the next step be to map the brightness?

When I zoom out with the global variable borderGap, I can see that the code is only making a height map of the corner of the image still?

I added the following but my code is still only making a height map of the corner?

  // set the origin to the center of the screen, and move it 400px far away on z-axis
  translate(halfWidth, halfHeight, 0.05);  // zoom in (lower numbers) zoom out (higher numbers around 200)
//GLOBAL VARIABLES
PImage img;

int borderGap = 30;
int resolution = 100;
//int maxHeight = 0;

float halfWidth, halfHeight;

Grid grid;

void vertexP(PVector P) {
  vertex(P.x, P.y, P.z);
}


void setup() {
  size(1000, 1000, P3D);
  halfWidth  = width/2.;
  halfHeight = height/2.;

  grid = new Grid(resolution, borderGap);
  
  smooth(8);
}

void draw() {
  background(0);

  grid.display();
  // set the origin to the center of the screen, and move it 400px far away on z-axis
  translate(halfWidth, halfHeight, 0.05);  // zoom in (lower numbers) zoom out (higher numbers around 200)
  noLoop();
}

Yes map or just divide the brightness by some amount so it’s weaker.

Your height image resolution should match the number of points in the grid or the best solution is to sample pixels in the image with regular spacing.

What you are seeing right now is the corner of your image because it’s taking the pixels in the [0, 0] to [70, 70] region.

Another solution is to resize your image using the resolution variable (controlling the number of points in the x and y direction)

:star_struck:
It works!!! Thank you so much for your help, @josephh ! I am filled with joy today :smiley:

YOU RULE!

1 Like