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!
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 );
}
}
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
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.
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.
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.
