# rose learns.to('code');

## For Loop

for(/*initialization*/ ;/*condition*/ ;/*afterthought*/)
{
//action that will run in loop
}

//example
for(var i=0; i < 10; i+=1)
{
console.log("Hello world");
}
//this code above will run 10 times, i=0, i=1, , , i=9

It tells the computer what to do, and how to do it.

• Initialization – it happens at the very beginning of the for loop
• Condition – determines when the for loop ends
• Afterthought – happens after the loop ends
function setup()
{
createCanvas(800,800);

for(var i = 0; i < 100; i += 1)
{
//console.log("Hello World!");
fill(random(0, 255));
ellipse(random(100, 800), random(100, 800), 100, 100);
}
}
function draw()
{
background(255);
for(var i = 0; i < mouseX; i += 1)
{
//console.log("Hello World!");
fill(random(0, 255));
ellipse(random(0, 800), random(0, 800), 100, 100);
}
}

Draw does a self-loop, so this continuously does the loop.

//From Exercises

var sum = 0;

function setup()
{
createCanvas(800,800);

for(var i = 0; i < 10; i += 1)
{
//console.log("Hello World!");
//        fill(random(0, 255));
//        ellipse(random(100, 800), random(100, 800), 100, 100);
//        rect(random(100), random(100), 10, 10);
//        ellipse(random(width), 100, 50, 50);
//        line(0, 0, random(width), random(height));
sum = sum + 1;
}

for(var i = 100; i > 0; i -= 1)
{
sum = sum - 1;
}

console.log(sum);
}

//function draw()
//{
////    background(255);
////    for(var i = 0; i < mouseX; i += 1)
////    {
////        //console.log("Hello World!");
////        fill(random(0, 255));
////        ellipse(random(0, 800), random(0, 800), 100, 100);
////    }
////}

Example from the lesson today, that I wanted to review more later:

var x_pos;

function setup()
{
createCanvas(800,800);

}

function draw()
{
background(0);
x_pos = random(1,100);
fill(255, 0, 255);
for(var i=0; i < 20; i ++ /*same as i +=1*/)
{
ellipse(x_pos, 100, 20, 20);
x_pos += 30;
console.log(x_pos);
}
}

var x_pos;
var y_pos

function setup()
{
createCanvas(800,800);

}

function draw()
{
background(0);
x_pos = 100;
y_pos = 100;
fill(255, 0, 255);
for(var i=0; i < 20; i ++ /*same as i +=1*/)
{
ellipse(x_pos, y_pos, 20, 20);
x_pos += 30;
y_pos += 30;
console.log(x_pos);
}
}

## Variable i or index variable

var x_pos;
var y_pos

function setup()
{
createCanvas(800,800);

}

function draw()
{
background(0);
x_pos = 100;
y_pos = 100;
fill(255, 0, 255);
for(var i=0; i < 20; i ++ /*same as i +=1*/)
{
ellipse(100 + i * 30, 100 + i * 30, 20, 20); //no brackets needed, MDAS was followed
//        x_pos += 30;
//        y_pos += 30;
//        console.log(x_pos);
}
}

10×10 grid square

    for(var i = 0; i < 11; i ++)
{
line(i * 10, 0, i * 10, 100);
line(0, i * 10, 100, i * 10);
}

# Combining for loops with conditional statements

function setup()
{
createCanvas(800,600);
strokeWeight(2);
}

function draw()
{
background(235);
noFill();
stroke(150);

for(var i = 0; i < 9; i++)
{
var r = 0;
if(i > 7)
{
stroke(220, 200, 255);
}
else if(i > 3)
{
stroke(255, 100, 0);
r = 20;
}
else if(i > 1)
{
stroke(155, 0, 100);
r = 5;
}
else
{
stroke(150);
}
rect(80+i*80 + random(-r, r), 80 + random(-r, r), 60, 60); // the width of the square is 60px, which gives an exact 20px distance in between squares
console.log(80+i*80); //the x point is every 80*(1, 2, 3, 4)
}
for(var i = 0; i < 9; i++)
{
var r = 0;
if(i > 6)
{
stroke(220, 200, 255);
}
else if(i > 4)
{
stroke(255, 100, 0);
r = 20;
}
else if(i > 0)
{
stroke(155, 0, 100);
r = 5;
}
else
{
stroke(150);
}
rect(80+i*80 + random(-r, r), 160 + random(-r, r), 60, 60); // the width of the square is 60px, which gives an exact 20px distance in between squares
console.log(80+i*80); //the x point is every 80*(1, 2, 3, 4)
}

}

## Exercises to Explain

    var x = 0;
var y = 0;

var len = 100;
for(var i = 0; i < len; i++)
{
if(i < len / 2)
{
x++;
}
else
{
y++;
}
}
console.log("(" + x + ", " + y + ")")
    for(var i = 1; i <= 300; i++)
{
if(i < 100)
{
stroke(255, 0, 0);
}
else if(i < 200)
{
stroke(0, 255, 0);
}
else
{
stroke(0, 0, 255);
}
point(i, 0);
console.log(i);
}
    for(var i = 1; i < 1000; i++) //999 iterations
{
if(i < 200) // 1-199 = 199
{
ellipse(random(width), random(height), 20, 20);
}
else // 999 iterations - 199 (i < 200) = 800
{
rect(random(width), random(height), 20, 20);
}
if(i >= 800) // 800 to 999 = 199
{
ellipse(random(width), random(height), 20, 20);
}
//        point(i, 0);
}