How to divide a sketch - Beginner math question (rows of graphic)

My efforts to learn Processing always seem to get tripped up by my poor math skills. I am also not sure if I’m using the correct terminology, so I’m hoping someone can either help me, or at least point me toward the correct question to ask. (Or search for)

I’m trying to divide a sketch vertically into even horizontal bands. I’m starting out playing by drawing random vertical lines throughout a band, and I’d like there to be multiple bands of these vertical lines. For example, if I put in hard values for only 3 bands I’d do:

  for (int i = 0; i < width; i++) {
    float p = random(width);
    line(p, 0, p, height/3);
  }
  
  for (int j = 0; j < width; j++) {
    float q = random(width);
    line(q, height/3, q, 2*height/3);
  }
  
  for (int k = 0; k < width; k++) {
    float r = random(width);
    line(r, 2*height/3, r, height);
  }

I get into trouble when I’d like to just be able to specify how many bands I want, and let loops do the job for me. I don’t understand how the math would work.

My instinct is to try something like:

int bands = 3;

for (int n = 0; n < bands-1; n++) {
  for (int i = 0; i < width; i++) {
    float p = random(width);
    line(p, ??????, p, ??????);
  }
}

But I can’t get my head around how to setup the Y coordinates for the lines so it would work with any number of bands I choose. Am I at least on the right track? Is there a simpler way?

I’m just starting out on my coding journey so any suggestions at all would be much appreciated.
Thank you for reading!

1 Like
size(200, 600);

int bands = 6;
int heightBand = height / bands; 

for (int n = 0; n < bands; n++) {
  for (int i = 0; i < width; i++) { // width here can also be 100 or 10 or 1000
    // calc 
    float randomXposition = random(width);
    float yPosition = n * heightBand;
    // draw 
    line(randomXposition, yPosition, 
      randomXposition, yPosition + heightBand );
  }
}

1 Like

Hi,

Welcome to the forum! :wink:

The key part is here as written by Chrisir : if the total height is the height variable then using a simple division by the number of bands, you get the spacing between them.

Then in a for loop, you can get the y location of the starting of a band by multiplying the index by the value of the spacing

1 Like

I am more worried about this.

As I stated the number width ; i < width is not very meaningful here.

Could as well be 200 or 400 because in theory, float p = random(width); can every time give you

  • 14 or
  • width/2 times 16 and the other half 33.

So the number of lines you see is not really connected to the i < width.

Wow. Thank you for explaining that.
It seems so simple now.

I realize this is a bigger, complex issue, but do you have any advice on how to brush up on the skills that would help me ‘see’ solutions like this? As I study code, I feel like I get the syntax down fairly quickly, but I get into trouble trying to apply it because I have difficulty with problems like this. I’ve always been a bit slow with math. Is it math? A specific field of math? Or logic? What should I be researching? (I just get so frustrated!)

At any rate… again, thank you so much! This was really helpful.

1 Like

Thank you so much for your help!
You probably can’t imagine how stuck I was. I had no idea how to proceed.
This was a very simple solution, and really helped me out.

As for i < width;
Yes, I realized the lines can draw on top of each other - leaving me with far fewer than width number of lines.
Is that what you’re saying?
I used width because I thought it’d be a simple way of making the number of lines be somewhat proportional to the size of the sketch. The total number of lines isn’t as important to me as the overall look, and I thought using width would allow the sketch to look similar at 100 pixels wide as it would at 1400 pixels wide.

Was this approach not a good idea?

Again, I truly appreciate your help. Thank you!

2 Likes

Yes

It’s okay. It’s not totally efficient but okay!

I guess it’s a matter of practice

There is a textual tutorial on the website of processing, the last one, showing some thought process

1 Like

Programming is mostly logic and math but you don’t need to master mathematics to code.

For me code is architecture and logic, you need to understand how to build things with simple operations (conditions, loops, variables, data structures…).

You also need some basic algorithmic notions in order to solve problems. You learn them by looking at others code online.

Anyway I recommend following the tutorials on the Processing webpage : processing.org/tutorials/

And of course Daniel Shiffman’s tutorials on YouTube :

3 Likes