6.6: Nested Loops - Processing Tutorial

[@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.

[@youtubeaccount0x073]

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.

[@benfrese3573]

Same here. I can go through the loop in my head but when something isn't working I have such a hard time to visualize what effect a change might have. It's really hard to express what my problem is, maybe I am not used enough to the concept. Dont't really know. Probably need more time playing around with them.

[@idcemail123]

@@benfrese3573 same boss.

[@martingracchus1687]

@@benfrese3573 have you started learning recursion yet?

[@benfrese3573]

@@martingracchus1687 Yeah, I find recursions to make a lot more sense since I know how the stack works.

[@martingracchus1687]

@@benfrese3573 I see, I am learning them both at the same time right now so I am a little overwhelmed, but i haven't been able to properly study in the past couple of days and am just now able to buckle down and focus

[@jos9573]

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

[@spezistyle]

some commentary in the code would be helpful

[@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

[@TheCodingTrain]

+Nigel Tiany cool, thanks!

[@Sir_BoazMutatayi]

+Nigel Tiany Woow! amazing

[@nigeltiany]

Thanks Sir. Boaz Mutatay

[@svendunker4494]

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); } } //

[@C204unit]

//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); } } }

[@TheBest-fj4qy]

amazing!!!!! ( :

[@Anton-wc7lb]

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

[@rikeshpatel8903]

Thank You so much, I spent so long trying to figure out how to do this challenge

[@YoshBruh]

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

[@chaoukimachreki6422]

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

[@patriciomendoza2207]

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

[@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.

[@astroneer013]

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

[@evanyoung9714]

// 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!

[@rovewar]

Understandable but that is discussed in a later lesson. There's faster ways of doing things but one needs to get a grasp of the basic stuff first.

[@duck__dodgers__5294]

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.

[@lisafox9026]

after this explain i forgot my name

[@learner5417]

lol

[@angelcaru]

You are Lisa Fox. Hope I helped you. /s

[@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

[@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.

[@boysrock4546]

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

[@50brownbear]

here's one the combines the bouncing ball and shaded distance float pointX; float pointY; float speedX; float speedY; void setup(){ size(500, 500); background(0); strokeWeight(1); stroke(0); pointX=random(width); pointY=random(height); speedX=random(0.0005,0.002); speedY=random(0.0005,0.002); } void draw(){ for (int x = 0; x < width; x = x + 10) { for (int y= 0; y < height; y = y + 10) { fill(dist(x,y,pointX,pointY)); rect(x, y, 10, 10); pointX=pointX+speedX; pointY=pointY+speedY; if((pointXwidth)){ speedX=-speedX; } if((pointYheight)){ speedY=-speedY; } } } }

[@bamkparto]

nice job man, looks cool

[@tianyuzhang6068]

Can i ask what's the reason behind 'speedX=random(0.0005,0.002)'? I tried to change this to 5 and this completely messed up the programme :(

[@matShenron]

Many Thanks ! You enlightened me with your explanation at 4:40 !

[@aldolunabueno2634]

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

[@yorkshire_tea_innit8097]

I heard people using this term and though it was advanced, turns out I've been doing it for ages. Oh well, great explanation though, I like how you didnt get bogged down in the detail.

[@alessandrodonati4755]

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

[@TheCodingTrain]

+Alessandro Donati thanks for watching!

[@yixiliu6181]

My solution for the exercise: size(400,400); background(255); stroke(255); for (int y=0; y< height; y = y+20) { for (int x=0; x

[@taliafranco185]

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

[@TheTechSpaceUS]

Code for the grid without color: float x,y; void setup(){ size(600,400); } void draw(){ background(#ffffff); stroke(#ff0000); fill(#000000); x = 0; while(x

[@Finestimpression29]

hi! so I only learn by playing around. I took a previously shown lesson and this one and mushed them together so create a more fun effect. I left the loop in it. I'm just not sure if it's still considered a nested loop because it is draw. Let me know what you all think. float r= random(100); float g= random(100); float b= random(100); void setup () { size( 400,300); background(0); strokeWeight(2); stroke(255); } //think of x as columns //think of y as rows void draw () { for (int x = 0; x < width; x = x + 20) { rect(x, 0, 20,20); for ( int y = 0; y < height; y = y +20) { rect( x,y, 20,20); r = random ( 233 ); g = random ( 255) ; b = random ( 244) ; fill ( r, g, b); rect ( x, y, 20,20); } } }

[@deevioo]

Very nice videos! float d = 20; background(0); size(500, 500); for (float y = 0; y < height; y = y + d) { for (float x = 0; x < width; x = x + d) { float di = dist(width / 2, height / 2, x, y); fill(di / 2); strokeWeight(0); rect(x, y, d, d); } }

[@6uiti]

the power of a decrementing nested for loop for deletion

[@inaugurated]

Little bit off topic, but I did use stuff from former tutorials. For anybody that knows/likes a bit of math; drawing a sine function with amplitude and frequency modulated by the mouse position: float circleX; float circleY; int circleRad = 4; float sine = 0; float period; float amplitude; void setup() { size(500, 500); } void draw() { background(50); // Set variables // The width of one full wave in pixels, modulated by mouseX. // When mouseX is at full width, there should be one full wave visible. period = (width) * mouseX/width; println("period (pixels): " + period + " period (rads): " + (period/width) *2 *PI + " frequency: " + 500/period); // The amplitude of the wave, modulated by mouseY. // height-mouseY so amplitude goes up when the mouse pointer goes up. amplitude = ((height)/2) * (height- mouseY)/height; // The starting position of the circle. Starting point is the radius of the circle, // so it starts with a full circle. circleX = circleRad; while(circleX < width) { // drawing a sine wave with the correct amplitude and period. sine = amplitude * sin(((circleX)/period)*2*PI); circleY = height/2 + sine; fill(255); ellipse(circleX, circleY, 2 * circleRad, 2 * circleRad); circleX = circleX + 2 * circleRad; } }

[@DavidDaybreakASMR]

Personal project! //CUTE color grid (using alpha channels and for loops); void setup() { size(500, 400); } void draw() { //draw background(255); noStroke(); //logic float x = 0; float y = 0; for (x = 0; x < width; x+= 20) { fill(x, y, mouseY/2, 10); rect(x-width, 0, x, height); } for (y = 0; y < height; y+= 20) { fill(mouseX/2, x, y, 10); rect(0, y-height, width, y); } }

[@RomboutVersluijs]

Wow these tuts are awesome, love your enthusiasm

[@furiouscakeface6964]

i use a for loop like this: for(int i = 0; i < width; i++) { line(x, 0, x, height); }

[@Ambigious]

FurIouScAkefAcE so you copy paste his last video?

[@luisfuentes4824]

very helpful videos....I actually learn more watching your videos than by listening to my professor in my CST 112 class lol.hahaha your videos are great thanks for making them

[@nordini3516]

Thanks Mate , it really helps. Couldnt get it in my own language..

[@Egosumali]

best video on the internet

[@samoh6084]

I did this on my day 3 of learning JavaScript at my bootcamp and my instructor thought I wrote a bizarre code. He literally said it was bizarre. I was lke wtf? I knew this concept would exist. The dude was just intimidated

[@na0m1.10]

How would you make each square a static different colour?

[@VICE-H3RO]

Thank you so much, I finally understand a nested loop :D

[@Calz20Videos]

at 4:22, replace rect() with line.

[@aviralsrivastava3409]

Most of the commands are codes!!!!!!!!!!!! See the effect of your magic DANIEL...! Love you :)

[@naomifox6817]

Hi I tried this and my rects are flashing instead of all just being one random color each they keep flashing my code is the same as yours except they flash some how

[@timeslongpast]

naomi fox did you put them in void draw() if so the random number is changing every frame so they would be flashing

[@andyli1890]

naomi fox if you don't want them to change color, put the "fill()" command inside the nested loop

[@igotapochahontas]

How would I transverse (traverse?) it? Like if I wanted to push only one x or y per row or column into an array, how?

[@amarpreetmanjot706]

I ran the code after random() fill in the rectangles but it keeps on changing the color and doesnt allots a 'still' random color to each rectangle

[@amarpreetmanjot706]

found it, he was running static I was in dynamic by making blocks of void draw()

[@skuul77]

here's mine: int scl = 20; void setup() { size(1920,1080); background(0); } void draw() { for (int i = 0; i < width; i+=scl) { for (int j=0; j < height; j+=scl) { float r = dist(mouseX, mouseY, i, j)/4; float g = dist(mouseX, mouseY, i, j)/5; float b = dist(mouseX, mouseY, i, j)/2; strokeWeight(2); stroke(71); fill(r, g, b); rect(i, j, scl, scl); } } }

[@crvzer]

Great video. Great teaching style. Thanks.

[@here1am1]

// color gradient generator... yup int resolution = 1; // < changes the size of each rect, effectively the resolution of the gradient or more technically, bit depth. in a way I guess size (800, 600); background(0); noStroke(); fill(126); for (int y = 0; y < height; y = y + resolution) { for (int x = 0; x < width; x = x + resolution) { fill(x/(width/255), x/(width/255), y/(height/255)); // ^ ^^^ mixing up x, y, width and height in R, G and B channels will yield different color gradients. rect(x, y, resolution, resolution); } }

[@here1am1]

and yes, I'm a bit late to the party lol.

[@oliviawaters7815]

Can anyone explain how to make the grid checkered? Like alternating colours Thank you!

[@TheCodingTrain]

If you pop by the discord, we can help you there! thecodingtrain.com/discord

[@neham2056]

hi i was working how you woud do this with nested loops? Use 1 loop to produce a row of 5 stars * * * * *

[@blahblah-pl2qd]

i think you might have found an answer already but here it is anyway you do not require two loops a single loop is enough to get it for(int i=1;i

[@shamanshamanite84]

This is a for loop using python to create ***** for star in range(5): print("*",end="")

[@mumberthrax]

man... so i went to try to make it change color depending on the square's distance from the mouse... but also constrained so that the full spectrum was shown between the mouse and the edge of the window. THAT was tricky, figuring out how to tell where the ray from the cursor and the square intersected with the line defining the edge of the window. turned out not as appealing as just setting the end of the range to be the corners of the windows. might try defining some arbitrary points in the window as well and see how that looks.

[@elcurvo]

See "Nested Loops Tutorial" I would like to ask, if I finally get a grid of "900 Rectangles", ---- how can I write the code "" fill (Random (255), Random (255), Random (255) "", ...-- ---, so that each fill was only "" different Reds "", and no Reds were repeated within another rectangle, obtaining 900 variations of Reds only? Thank you for your help----Greetings !!!

[@flopown]

Hi there, I was playing around with the fill() function using the dist() from mouseX, mouseY to the x and y pos. of my rectangle. To do this I used the translate function. But I noticed that the mouseX and mouseY were still being mapped according to the topleft of the screen, instead of the middle of the screen. Might this be a bug in processing? Or is it designed to work this way and did I just miss it?

[@flopown]

Never mind, I found the problem. I had put the translate function within draw() Now that I have put it in setup it works. Still kinda confused on why it is a problem though, while it was in draw, it was in the beginning of the code, so shouldn't it have worked?

[@dhruvsharma2571]

Hey Daniel! Could you help me with this program that I wrote for a rotating circle? I wanted to add an option to increase or decrease the speed of rotation when I clicked and dragged the mouse along the Y axis. Something weird is happening though. float x, y; float rotationSpeed = 1; void settings () { fullScreen (); } void setup () { x = width/8; y = height/3; } void draw () { background (127); noStroke (); fill (100); ellipse (width/2, height/2, x, y); x = x + rotationSpeed; if (x >= width/4 || x

[@isaib.ala7]

shouldn't rows be horizontal lines and columns verticals?

[@TorIvanBoine]

Awesome explanation. Struggled a bit to understand the logic of nested loops. Question: If I have 2 for loops. How do I get it to loop through both at the "same" time? instead of: x y y y ... I would get x y x y x y ....

[@jibranahmad8518]

had the same question. I am guessing it may be a more advanced feature that uses the multi processor power. It probably is in the newer Java

[@gedece]

I'm thinking that for that you'll need another specialized library. for example, in python I would use the itertool library and use the product method. import itertools for i, j in itertools.product(range(x), range(y)):

[@mathoesify]

Love your work. Thanks!

[@badis23]

hello, plz how to fill up the empty spaces with random numbers with no duplication, very urgent

[@vivienneyao8138]

I use the same function but why my pattern is twinkling all the time?

[@lucasreis8657]

wow, just look at it void setup(){ size(500,500); } void draw(){ background(255); for(float x=0;x

[@matiamus2465]

Really need some help with this thing. I wanted to write the same rectangle grid, but using "while" loop. And i got stuck, i don't really understand how to put everything in the right order so it would work normally. :( If someone knows, i would be very grateful for help.

[@blahblah-pl2qd]

the only difference between a while loop and a for loop is the variable assignment and increment while(termination condition){ //statements// } for(assignment ; termination condition; increment){ //statements// } to mimic a for loop using a while loop just place the the termination condition used in "for" loop inside the "while" loop but put the variable assignment right before the start of while loop and the increment right at the end of the while loop eg:- for(i=0;i

[@dchamp296412]

Bro... just what i needed

[@notbarbara2647]

try this code: float tegelGrootte = 50; void setup() { size(400, 400); background(255); strokeWeight(3); rectMode(CENTER); int tegelY = 25; while (tegelY < height ) { tekenRij(tegelY); tegelY += 50; } } void tekenRij(float y) { int tegelX = 25; while (tegelX < width) { tekenTegel(tegelX, y, tegelGrootte); tegelX += 50; } } //deze tekenen alle vierkantjes + de kleuren void tekenTegel(float x, float y, float grootte) { while (grootte > 0) { tekenVierkant(x, y, grootte); grootte -= 10; } } void tekenVierkant(float x, float y, float grootte) { fill(random(255), random(255), random(255)); rect(x, y, grootte, grootte); }

[@MyMar23]

or you could just do this :) void setup () { size (400, 400); rectMode(CENTER); } void draw () { background(255); float rectSize; float xLoc; float yLoc; for (xLoc = 25; xLoc < width; xLoc += 50) { for (yLoc = 25; yLoc < height; yLoc += 50) { for (rectSize = 50; rectSize > 0; rectSize -= 10) { fill(random(255), random(255), random(255)); rect(xLoc, yLoc, rectSize, rectSize); } } } noLoop(); }

[@purplepete123]

can someone explain to me why the first row isn't working and how i could fix it? void setup(){ size(400,400); background(0); strokeWeight(2); stroke(125); } void draw(){ for(int x=0;x

[@kewlfool]

move " fill(dist(x,y,mouseX,mouseY)); " above " rect(x,y,20,20); "

[@tekiero]

what will happen if we add third loop?

[@matteodirollo4037]

My code is not working an it looks the same, I don't know why :/

[@TheCodingTrain]

Hi Matteo! Have you asked in slack?

[@StefWillemse]

How would you do a checker pattern?

[@tentacle_sama3822]

If we do 3 loops is it a cube?

[@Sir_BoazMutatayi]

Hello Mr Daniel! I have watched all your videos so far and sadly you did not cover the trigonometry part. but still Thank you very much.

[@TheCodingTrain]

+Sir. Boaz Mutatay take a look at this playlist kzbin.info/aero/PLRqwX-V7Uu6bR4BcLjHHTopXItSjRA7yG

[@Ayo-PoL0]

How do you generate this 1***** *2**** **3*** ***4** ****5* *****6

[@ChrisTian-ox5nr]

great video!berry helpful!

[@ZekeGaming]

Thank you so much :) You're doing God's work

[@errornotgonatel7185]

Wow thx that makes much sense even tho im doing java

[@lumbybronzearm]

For every column, take off every Zig.

[@rishabhsinha3713]

Here's something I've tried inspired by peoples in the comment. Enjoy. ----------------------------------------------------------------- float darkness =1.5; float randomness=1; void setup() { size(1080,1080); } void draw() { randomness+=1/randomness; strokeWeight(1); stroke(0,0,random(5*randomness)); for(int i=0;i

[@andremuslim9594]

Great explanation :D

[@ColbyCleansStuff]

this was great thx!

[@masbro1901]

i'm sleepy watching this, and my brain get dizzy

[@d34dc0d35]

//There no dist( ); but i do my best float circleX = 0; float circleY = 0; float x = 4; float speedX = x; float y = 4; float speedY = y; boolean pause = true; void setup() { size(640, 360); } void draw() { background(255); strokeWeight(random(1, 3)); stroke(random(255)); if (circleX < width/2 && circleY < height/2) { for(int x = 0; x height/2) { for(int x = width/2; x

[@mosesvalentin1600]

Ehm what programming language is this?

[@samesame9305]

Its based on Java

[@btgsrqlvs]

I wrote this, but it doesnt count right ? :) too much if's instead of loop :/ but i couldnt figure it out how to right with fors. // Hi ! float d; int x; int y; size (800,600); stroke(0); background(0); strokeWeight(2); for(x=0;x

[@btgsrqlvs]

whoops :D he said darker inside brighther outsides but i did excatly the opposite :D idk why.

[@36degreesMars]

i'm really struggling with these exercises

[@QwertyNPC]

Well, here is my solution to make the squares change shade gradually from the centre, maybe someone will find it helpful. It is not a radial gradient though. size(420, 420); background(0); stroke(255); fill(127); int shade = 0; int offset = 0; int shadeDiff = 12; int sizeOfSquare = 20; for (int x = 0; x

[@BenWilliams-ie4wc]

Very nice :)

[@TheChosenFailure]

this works but i Dont know why..... float x ; float y ; float d; void setup(){ size(400,400); background(0); strokeWeight(2); stroke(255); fill(100); } void draw(){ for(int y = 0; y < height; y = y + 20){ for(int x = 0; x < width; x = x + 20){ d = dist(mouseX,mouseY,x,y); fill(d); rect(x,y,20,20); } } println(d); }

[@GinoTheSinner]

Another programming tutorial that already assumes you know how to program I like it.

[@brandonpillay9025]

Great energy

[@noobgamerbtw2701]

bruh!!! I feel like why did i even clicked on this video

[@hidayet191]

I dont know why but if I add "void setup()" and "void draw", it wont work. There are some errors

[@hidayet191]

processing.app.SketchException: unexpected char: '\' at processing.mode.java.JavaBuild.preprocess(JavaBuild.java:361) at processing.mode.java.JavaBuild.preprocess(JavaBuild.java:155) at processing.mode.java.JavaBuild.build(JavaBuild.java:122) at processing.mode.java.JavaBuild.build(JavaBuild.java:104) at processing.mode.java.JavaMode.handleLaunch(JavaMode.java:122) at processing.mode.java.JavaEditor.lambda$0(JavaEditor.java:1097) at java.lang.Thread.run(Thread.java:748) like this.

[@nisargjasani8815]

Thank you very much for sharing your knowledge. I have created a Basic Interactive Chessboard that shrinks and expands using mouseX and mouseY: //Creating 8x8 Chessboard using Nested For Loops //Interactive Chessboard using mouseX and mouseY void setup () { size(400,400); background(0); } void draw () { background(0); strokeWeight(2); stroke(0); for(int i=0; i

[@alloftheabove1653]

i did the whole thing with just one for loop.... then i realised its about a loop in a loop.....

[@ajcics]

Super still don't get it

[@indianadvisor650]

Thanks

[@NandoSantanaMusic]

Was just me that was disturbed by he calls squares as rectangles ? lol

[@tekinuyan4856]

cool video

[@MASTER_ADHD_GIFTED]

Bubble tea code

[@minecraftpapiernik1930]

Fuí el like número 667, que miedo

[@pragatipatel1722]

Ohh I love you.. 😘😘

[@saikatmondal2715]

it is a bad video......anyone van not infer stand....you have shown your style in this vedio..