6.6: Nested Loops - Processing Tutorial

This video looks at nested loops, i.e. a loop inside a loop.

For More Processing Tutorials:

Help us caption & translate this video!

[redisred]

I just want to say, thank you for making these videos! I've tried several times to learn programming in various ways, and for whatever reason your quirky videos on processing make more sense to me than everything else I've gone through. I've never made it this far! Thank you for doing this.

[youtubeaccountx]

This is honestly the hardest thing it took me to wrap around my head over anything in java. Nothing else is harder than nester for loops.

[nigeltiany]

//To whoever cares... A nice simple Click the box to change color with processing
// Thanks for these awesome tutorials Mr Shiffman.

//rectangle spacing
int spacing = 30;
//rectangle size : should be equal to spacing so it works well :-)
int rectSize = 30;
void setup(){
//must be a square screen, width = height for this case
size(700, 700);
fill(255);
stroke(25);
strokeWeight(0.9);
for(int x=0;x<width;x=x+spacing){
for(int y=0;y<width;y=y+spacing){
rect(x, y, rectSize, rectSize);
}
}
}

void draw(){
if(mousePressed){
fill(random(255), random(255), random(255));

//rect(mouseX-valueSoThat it is a multiple of 30, ...) 30 being rectSize
//mouseX % 20 = remainder
//mouseX - remainder = a mouseX multiple of 30
/* mouseX = 331, mouseY = 334
* 331 % 30 = 1, 334 % 30 = 4
* mouseX - (331 % 30) = 330. mouseY - (334 % 30) = 330
*/

int multiX = mouseX - (mouseX % rectSize);
int multiY = mouseY - (mouseY % rectSize);

rect(multiX, multiY, rectSize, rectSize);
}
}

[jos]

dist() is pretty cool!

Here's what I made, but don't run it if you suffer from PSE:

int squareSize = 20;
float brushSize = 1.5;

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

void draw() {
for (int x = 0; x < width; x = x + squareSize) {
for (int y = 0; y < height; y = y + squareSize) {
float c = dist(x, y, mouseX, mouseY);
noStroke();
fill(c / brushSize, random(255), random(255));
rect(x, y, squareSize, squareSize);
}
}
}

[Cunit]

//The dist() function used to control the dimensions of the rectangles close to the mouse
// Such fun! :)

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

void draw() {
background(255, 125, 0);
stroke(255);
strokeWeight(2);


for (int x = 0; x < width; x = x + 40) {
for (int y = 0; y < height; y = y + 40) {
float distance = dist(x, y, mouseX, mouseY) / 8;
rect(x, y, distance, distance);
fill(255, 220, 190);
}
}

}

[svendunker]

even though the video is years old, here is my version of the rectangles. Inside dark outside light.

I love this channel. the code is attached ..
//
size(1000, 600);

background(0);
strokeWeight(2);
stroke(127);

float size=20; //rect size

for (int x = 0; x < width; x+=size) {
for (int y = 0; y < height; y+=size) {
float distance = dist(x, y, width/2, height/2);
println(distance);
float maxvalue = dist(0, 0, width/2, height/2);
println(maxvalue);
float gray =map(distance, 0, maxvalue, 0, 255);
println(gray);
fill(gray);
rect(x, y, size, size);
}
}
//

[Abaramotorai]

I finally understood nested loops. Thank you. If you need any translation to Portuguese I am actually an English teacher (Brazilian/ Portuguese speaker native). That would be my way to pay. Because you deserve it. Congrats.

[YoshBruh]

Gotta say that that was a real fun challenge you came up with on the spot!

[Anton-wclb]

Here's a solution to your challenge! Thanks for the tutorial :)

void setup() {
size(400, 300);
background(0);
strokeWeight(2);
stroke(255);
}

void draw () {
for (int x = 0; x < width; x = x + 20) {
for (int y = 0; y < height; y = y + 20) {
float d = dist(mouseX, mouseY, x, y);
fill(d);
rect(x, y, 20, 20);
}
}
}

[chaoukimachreki]

I love the glitches between the two screens, creates some suspense XD god bless you bro.

[patriciomendoza]

For Loop Video : "You can actually skip this video"
Nested Loops Video: "Yeah, lets actually make both of these for loops"

[duck__dodgers__]

Didn't see any other comments like the question I had so here it is.




What confused me the most about this concept is that making a grid can be done by just filling in all of the rows or vice versa by filling in all of the columns. (If you manually wrote on a piece of paper and drew squares from left to right it would make a grid). I finally wrapped my head around the fact that it starts with the y value and proceeds to the nested loop until the x value termination condition is met (In this case if x > width go to the outside loop). It will then go to the next y value which would be y = 20 and do the same thing. Basically this is making a grid with the function rect but drawing them across the screen from left to right.

[evanyoung]

// Instead of writing:
myVariable = myVariable + 1
// You could just write:
myVariable++;
// Or if you want to use larger incraments,
myVariable += 1;
myVariable += 2;
myVariable += 3;
// It also works with other operators:
myVariable *= 4;
myVariable -= 5;
myVariable /= 6;
myVariable %= 7;
println(myVariable);
// Anyway, just some simple shortcuts that I think he should have explained.
// That said, THANK YOU FOR THESE AMAZING TUTORIALS!

[mahikamihan]

I OVERTHOUGHT THE EXERCISE AT THE END FOR THE LAST THREE HOURS BEFORE I FINALLY UNDERSTOOD AND GOT IT WITHOUT LOOKING AT THE COMMENTS OH MY GOD THAT'S SO FRUSTRATING BUT ALSO PRETTY ACCOMPLISHING

[astroneer]

made this sweet little aura around the mouse using a nested loop and mapping a max distance from the mouse to a fill color



int maxDist = 200;

void setup() {
size(640, 360);
strokeWeight(2);
}

void draw() {
background(0);



for (int i = 0; i < width; i += 20) {
for (int j = 0; j < height; j +=20) {
float auraDist = dist(i, j, mouseX, mouseY);
if (auraDist < maxDist) {
fill(map(auraDist, 0, maxDist, 150, 51), 0, map(auraDist, 0, maxDist, 255, 51));
} else {
fill(51);
}
rect(i, j, 20, 20);
}
}
}

[boysrock]

This is the most difficult concept I've come across so far

[riversplitter]

I think of it like this an assembly line. You repeat the same process over and over.


For each customer make a hamburger.
For each hamburger, add bun, meat, toppings.


In these kind of real world cases, it is easy to understand why we want to iterate over a set of instructions multiple times.

[taliafranco]

Thanks for explaining loops crystal clear!!! I finally understand!!! God bless u!:) <3

[alessandrodonati]

You're absolutely amazing! Thanks for your lessons...very helpful!

[aldolunabueno]

It helped me a lot, thanks. This is waht i made:

float l=20, c=0, d=0, max_d=dist(0, 0, width/2, height/2);

void setup(){
fullScreen();
background(0);
}
void draw(){
for(int y=0;y<=height;y=y+20)
for(int x=0;x<=width;x=x+20){
d = dist(x, y, width/2, height/2);
c = random((d/max_d)*60*mouseX/width, (d/max_d)*60);
fill(c);
stroke(c);
rect(x, y, l, l);
}

}