# Creating variation in grid with random(); & image

**URL:** <https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135>\
**Category:** Coding Questions\
**Created:** [December 12, 2022, 6:26pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135 "2022-12-12T18:26:44Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 16, 2022, 5:51pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/21 "2022-12-16T17:51:01Z")

</div>

Like this?

```auto
  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;
        

      }
    }
  }

```

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 16, 2022, 5:58pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/22 "2022-12-16T17:58:20Z")

</div>

The code is doing something now!! YAY!!! THANK YOU 😊 😃 😂 🤩 I just got shivers ~!

 ![Screen Shot 2022-12-16 at 9.57.44 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/9/8973b0a7cf38d04f90c8990f5b1203ae722d508a.jpeg)

```auto
  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;
        

      }
    }
  }

```

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 16, 2022, 6:03pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/23 "2022-12-16T18:03:57Z")

</div>

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.

 ![Screen Shot 2022-12-16 at 10.02.34 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/c/2c9b00dea21df254b5e25c78c11c8da6ae053ab0.jpeg)

Original image:

 ![b](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/8/48382561aa1efa26f7b745ef097fc713991ba591.jpeg)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 16, 2022, 11:13pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/24 "2022-12-16T23:13:27Z")

</div>

> [@asymmetric](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 17, 2022, 7:13pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/25 "2022-12-17T19:13:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 17, 2022, 7:20pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/26 "2022-12-17T19:20:55Z")

</div>

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

```auto
  // 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)

```

```auto
//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();
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 19, 2022, 12:06pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/27 "2022-12-19T12:06:40Z")

</div>

> [@asymmetric](#):
>
> Would the next step be to map the brightness?

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

> [@asymmetric](#):
>
> 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?

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)

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [December 19, 2022, 7:05pm UTC](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135/28 "2022-12-19T19:05:02Z")

</div>

🤩  
It works!!! Thank you so much for your help, @josephh ! I am filled with joy today 😃

 ![Screen Shot 2022-12-19 at 11.02.16 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/8/d83059bbaa7f6b738dd4d727864e8d298edf7243.jpeg)

YOU RULE!

[Previous page](https://discourse.processing.org/t/creating-variation-in-grid-with-random-image/40135.md?page=1)