# Dividing a grid into sections using noise

**URL:** <https://discourse.processing.org/t/dividing-a-grid-into-sections-using-noise/36127>\
**Category:** Coding Questions\
**Created:** [April 5, 2022, 12:47pm UTC](https://discourse.processing.org/t/dividing-a-grid-into-sections-using-noise/36127 "2022-04-05T12:47:11Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [April 8, 2022, 7:15am UTC](https://discourse.processing.org/t/dividing-a-grid-into-sections-using-noise/36127/3 "2022-04-08T07:15:56Z")

</div>

Hi again,

found a few minutes to go on and re-build the example from the insta link with also the heights included.

```auto
// class representing a cell
class Cell {
  PVector p;
  PVector s;
  float v;

  public Cell() {
    p = new PVector();
    s = new PVector();
    v = 0;
  }

  void updateValue(float pv) {
    v = pv;
  }

  void updateBoxes(Cell l, Cell t, float sx, float syh) {
    s.x=v*sx;
    s.y=syh;
    p.x = l != null ? l.p.x+l.s.x : 0;
    p.y = t != null ? t.p.y+t.s.y : 0;
  }

  public void render() {
    stroke(0);
    fill(map(v, 0, 1, 0, 255));
    rect(p.x, p.y, s.x, s.y);
  }
}

// main sketch
float scl = 15.;
int rows;
int cols;
Cell[][] grid;

float zVal = 0;
float zShift = 0.03;

void setup() {
  size(600, 600);

  rows = floor(height/scl);
  cols = floor(width/scl);
  grid= new Cell[rows][cols];

  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      grid[y][x] = new Cell();
    }
  }
}

void draw() {
  background(0);

  // update values
  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      grid[y][x].updateValue(noise(x*0.05, y*0.05, zVal));
    }
  }
  zVal+=zShift;

  // determine ScalingFactor for each row height and col width
  float[] xfact = new float[rows];
  float[] yfacth = new float[rows];
  float yfact = 0;
  float vmax = 0;
  for (int y = 0; y < rows; y++) {
    vmax = 0;
    float vmaxh = 0;
    for (int x = 0; x < cols; x++) {
      vmax += grid[y][x].v;
      if (vmaxh < grid[y][x].v) {
        vmaxh = grid[y][x].v;
      }
    }
    xfact[y] = width/vmax;
    yfacth[y] = vmaxh;
  }
  vmax=0;
  for (int y = 0; y < rows; y++) {
    vmax += yfacth[y];
  }
  yfact = height/vmax;

  // update boxes and render
  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      Cell l = x>0 ? grid[y][x-1] : null;
      Cell t = y>0 ? grid[y-1][x] : null;
      grid[y][x].updateBoxes(l, t, xfact[y], yfacth[y] * yfact);
      grid[y][x].render();
    }
  }
}

```

Have fun!  
— mnse

PS: short vid as demo  
 ![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/7/c7053da6d734f9c8bc5a31bbce25c21a22fc0ae8.webp)

---

_[View the full topic](https://discourse.processing.org/t/dividing-a-grid-into-sections-using-noise/36127)._