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

**URL:** <https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144>\
**Category:** Beginners\
**Created:** [February 28, 2021, 6:01pm UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144 "2021-02-28T18:01:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [February 28, 2021, 6:01pm UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/1 "2021-02-28T18:01:18Z")

</div>

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:

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

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 28, 2021, 11:03pm UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/2 "2021-02-28T23:03:11Z")

</div>

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

```

---

<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:** [February 28, 2021, 11:06pm UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/3 "2021-02-28T23:06:41Z")

</div>

Hi,

Welcome to the forum! 😉

> [@Chrisir](#):
>
> `int heightBand = height / bands;`

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 28, 2021, 11:10pm UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/4 "2021-02-28T23:10:30Z")

</div>

> [@leatherbird](#):
>
> ```auto
> for (int i = 0; i < width; i++) {
> float p = random(width);
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 1, 2021, 5:46am UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/5 "2021-03-01T05:46:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 1, 2021, 6:01am UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/6 "2021-03-01T06:01:12Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 1, 2021, 7:15am UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/7 "2021-03-01T07:15:39Z")

</div>

> [@leatherbird](#):
>
> Is that what you’re saying?

Yes

> [@leatherbird](#):
>
> Was this approach not a good idea?

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 1, 2021, 8:02am UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/8 "2021-03-01T08:02:30Z")

</div>

> [@leatherbird](#):
>
> any advice on how to brush up on the skills that would help me ‘see’ solutions like this?

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

---

<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:** [March 1, 2021, 8:09am UTC](https://discourse.processing.org/t/how-to-divide-a-sketch-beginner-math-question-rows-of-graphic/28144/9 "2021-03-01T08:09:36Z")

</div>

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

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 : [Tutorials / Processing.org](http://processing.org/tutorials/)

And of course Daniel Shiffman’s tutorials on YouTube :

https://www.youtube.com/embed/2VLaIr5Ckbs?feature=oembed&wmode=opaque&list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e