# 4.2: Nested Loops – p5.js Tutorial

This video looks at loops nested in loops. What does it mean to have a for loop in the draw() loop? How do you draw a grid of shapes with two loops?

Next video:

Support this channel on Patreon:

Contact:

Send me your questions and coding challenges!:

p5.js:

For More p5.js Videos:

Help us caption & translate this video!

Posted

in

by

Tags:

### 12 responses to “4.2: Nested Loops – p5.js Tutorial”

1. So how do I make the color strobing stop? How do I set fill to only run once, like the placement of the circles?

2. function setup() {
createCanvas(590,390)
}

function draw() {
background (0);
frameRate(2);

for (var x = 10; x <= width-20; x +=25){
for (var y = 10; y <= height-20; y +=25){
fill(random(265), random(265), random(265))
rect (random(x, x+5),random(y, y+5), 20,20)
}
}

}

3. i liked and subscribed to you

4. very nice video

5. Half way through the playlist now! 😀

6. for (var x = 0; x <= width; x += 50) {
for (var y = 0; y <= height; y += 50) {
fill(random(255), 0, random(255));
ellipse(random(x, x+2) , random(y, y+2), 25, 25);
}
}

7. nice work The Coding Train

8. suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper

9. TO anyone who wants epilepsy! (is it spelled right?)
Run this code!:

var screenWidth=600;
var screenHeigth=600;
var rectsize=40;
function setup() {
createCanvas(screenWidth,screenHeigth);
}function draw() {
for(var x=0; x<=screenWidth; x+=rectsize) {
for(var y=0; y<=screenHeigth; y+=rectsize) {
fill(random(255),random(255),random(255));
rect(x,y,rectsize,rectsize);
}
}
}

10. Can you tell me why this doesn't work?:

function setup() {
createCanvas(640,480);

}function draw() {
background(100,100,100);
fill(150,150,150);
rect(499,0,140,479);
fill(50,100,150);
rect(520,40,40,40);
fill(0,0,0);
textSize(40);
text("H", 525,75);
drawH();

}function drawH() {
while(0) {
for( (mouseIsPressed) && (mouseX <= 500) ) {
rect(100,100,50,50);
}
}
}

It says that the Problem is in line 19 :

for( (mouseIsPressed) && (mouseX <= 500) ) {

11. 12. 