Changing row-size of dynamic grid

Processing Coding Questions
1

Hello!
I’m encountering a problem with a grid-sketch. The answer seems rather simple, yet I can’t wrap my head around it for several days now.
The idea is simple: I wanted to make a grid of rectangles which alter in width over time. I have that working!

int index;
float cols, rows;
float scl = 30;
float yoff;

float b;

void setup() {
  size(500, 500, P2D);
  cols = width/scl;
  rows = height/scl;
  index = int(cols*rows);
}

void draw() {
  background(0);
  b+= .05;
  
  ellipseMode(CORNER);
  noFill();
  stroke(255);

  for (int y = 0; y < rows; y++) {      
    for (int x = 0; x < cols; x++) {
      float start = map(y, 0, rows, 0, b);
      float aMap = map(sin(start), -1, 1, -10, 10);
      rect(x*(scl+aMap), y*scl, scl+aMap, scl);
    }
  }
}

The idea that I have failed to get working is that I would like to alter the height of each row of rectangles in a similar fashion. I thought this could be done with a similar approach, but this results in rectangles overlapping:

  yoff = 0;
  for (int y = 0; y < rows; y++) {  
    for (int x = 0; x < cols; x++) {
      float start = map(y, 0, rows, 0, b);
      float startH = map(yoff,0,rows,0,b);
      float changeW = map(sin(start), -1, 1, -10, 10);
      float changeH = map(sin(startH), -1, 1, -10, 10);
      rect(x*(scl+changeW), y*(scl+(changeH/10)), scl+changeW, (scl+changeH));
    }
    yoff+=1;
  }
}

I understand why the above code doesn’t work. I have made several sketches on paper, and ‘looped’ through iterations of the code whilst writing everything down. It’s clear to me that the code behaves the way it does.
Seeing as the idea is really simple, and I’m able to implement it correctly for one dimension, I feel like I’m very close to the solution of my problem. I unfortunately just seem to be unable to see what adjustments I need to make, or how to approach it so that it works the way I want it to.
I’ve tried more complex set-ups with objects in an array or ArrayList, and have also tried to solve it by using two-dimensional arrays. The problem stays the same however, and the solution stays unclear to me.
I hope someone here could help me by pointing me in the right direction. I’m eager to learn what solution is right for my problem.

Thanks in advance!
Namrad

2

not sure this does what you need?

// easy grid of rectangles,
int x = 10, y = x, w = 10, h = w, off = 5, grid = 3, many = grid*grid;

void setup() {
  size(500, 500);
}

void draw() {
  background(200,200,0);
  drawGrid();
  w++;
  h=w;
}

void drawGrid() {
  println("x "+x+" y "+y+" w "+w+" h "+h+" off "+off+" grid "+grid+" many "+many);
  for (int i = 0; i < many; i++)
    rect(x+(i%grid)*(w+off), y+(floor(i/grid))*(h+off), w, h);   // or any other shape/text on that position
}
2 Likes
3

Thanks kll! This is more or less exactly what I’m looking for.
It was that easy, huh?
I’m studying your code right now to see how this is different from what I’m doing.

1 Like
4

After studying and trying things out with your code I don’t think it offers me what I was looking for. It did teach me a new method of building grids with loops, so thank you for that!
For the idea I had I want every row to (be able to) change size on its own. It’s based of a sketch by David Mrugala. When I start to implement variables to the sketch-example you gave above, I recieve the same problem. Rectangles start to overlap and to separate in unorderly ways: Screenshot 2019-12-19 at 18.09.47

As stated earlier, I think I understand why this happens (the way I generate numbers to create this altercation of sizes causes these ‘jumps’ from row to row). I can’t wrap my head around how to solve that problem however: how to make them vary in height per row, yet still make them connect per row.

I hope my question and my examples are clear. I also hope you or someone else can still help me!

Thanks for your efforts nontheless!

1 Like
5

When you’re using a nested loop to draw a grid, remember you’re drawing in ‘chunks’. You don’t draw a single grid cell (rectangle) each loop. Instead you use two loops: one to decide the y position, the other to decide the x position and drawing a chunk of grid cells.

In your first sketch you seem to try and do everything, including the y positioning of each grid cell, in the second for loop. Seeing that all rectangles of each row are going to have the same y position anyway, why not make use of that? You could use translate to decide the y position for the row, and then draw all of the rectangles on y = 0.

Other suggestions:

  • You can place drawing settings such as ellipseMode and stroke in the setup since these don’t change throughout your sketch.
  • The values of float start and float aMap change based on y, meaning they can be moved up a level in the loop chain.

Hope that helps!

2 Likes
6

In theory, store the y-Position of the cell and add its individual height in a variable named nextYPos or so

Use it when drawing the next row

1 Like
7

It hasn’t guided me towards the end result I wanted, but I appreciate your advice nontheless considering you made some good points regarding my code structure (even though it was kind of a rough draft). I painstakingly managed to figure it out a way of reaching my desired result over the last two days.

Dank voor je hulp Tiemen. :wink:

8

I think your comment nudged me to the solution of my problem. It made me realise I was not utilizing the nested loop effectively. I made it work by recalculating the y-location and height of each rectangle every iterations of the outer(y-)loop.
Probably made it harder for myself than necessary, but this is how you learn. Thanks for helping me out Chrisir! :smiley:

1 Like
9

Brillant!

Nice to hear this!

1 Like
10

Good to hear you figured it out. Is it close to what I had in mind with my suggestions?

int index;
float cols, rows, scl = 30, yoff, b;

void setup() {
  size(500, 500, P2D);
  ellipseMode(CORNER);
  noFill();
  stroke(255);
  cols = width / scl;
  rows = height / scl;
  index = int(cols * rows);
}

void draw() {
  background(0);
  b += .05;
  for (int y = 0; y < rows; y++) {  
    float start = map(y, 0, rows, 0, b);
    float aMap = map(sin(start), -1, 1, -10, 10);
    float xBla = scl + aMap;
    for (int x = 0; x < cols; x++) {
      float xPos = x * xBla;
      rect(xPos, 0, xBla, xBla);
    }
    translate(0, xBla);
  }
}