6.1: While Loop - Processing Tutorial

In this video, I introduce a fundamental concept of programming: The "Loop".

For More Processing Tutorials:

[martinds]

If my college teacher putted just "1 bit" of this excitement to the programming classes, I would be happy. But I'm not, and im watching you.
Thank you. Your videos are awesome. Im from argentina.

[kevnar]

A programmer's wife texted her husband. "While you're out, get milk."

...and she never saw him again.

[robertomerani]

Hello everybody. This is my first line of code where a ball bounces from right to left and moves down after reaching the right and left side of the screen. Thank you Daniel Shiffman for your time and patience. I never get tired of watching your videos.

float x = 0;
float xspeed = 10;
float y = 320;
float yspeed = 10;
float up = 25;

void setup () {
background (127);
size (1280, 640);
}

void draw () {
noStroke ();
fill (0);
ellipse (x, y, 25, 25);
x = x + xspeed;
if (x > width || x < 0) {
y = y + up;
xspeed = xspeed *-1;
}
while (x < 0) {
if (x > width) {
y = y + up;
} else {
x = 0;
noStroke ();
fill (0);
ellipse (x, y, 25, 25);
}
}
}

[haleemulhassan]

@5:37 I really didnt get the part where while loop does NOT draw how we expected, as you mentioned. The first time we go into the while loop, x = 0. Now in the while loop is the command of printing circles using the value of x. So shouldnt it keep drawing circles till the value of x>width within the while loop? Why did you have to put the value of x=0 again before the while loop to see any kind of result.

Basically what Im asking is how is the value of x = width on the very second time in the while loop?

[gg-lult]

If someone still confused about 5:37 (why you have to reset x = 10 inside DRAW) and come across this comment I hope the code below can help explaining a bit more (copy and run it in your program.)
There
beginning of DRAW.
until it reach > 400, then it draw the result)

won't

wrong, but this helped me understand this better. I also hope this could help you guys as well.
Happy coding guys :D

float x = 0;

void setup() {
size(400, 300);
}

void draw() {
background(random(255));

while (x < width) {
x = x + 1;
fill(101);
stroke(255);
ellipse(x, 150, 16, 16);
println("still in WHILE LOOP");
println(x);
delay(10);
}
x = x + 1;
println("outside now");
println(x);
delay(1000);
}

[popcycleism]

Where is your school at? Coding with visual breakdown. I understand the concept better! Thank you for this!

[openopinion]

i have learned alot from your lectures and still learning.your videos are definitely the best on Youtube and of course amusing.thank you sir for these lectures.

[abdulrahmankh]

Thats the 2ed Time i understand nothing from my trash Teacher and watch your Videos before my exam instead and it really helps, i am thankful

[wallaceterra]

I really enjoyed your class! His teaching is fun and very lively! Yes, your video came out perfectly, mistakes happen.
Thanks!

[jamesfilosa]

5:42 - Wouldn't it make more sense to move "background(0);" to setup instead? ...when demonstrating the purpose of the while loop.

[abhishekkattimani]

My all doubts with loops are get cleared thank you so much sir

[blackchan]

please continue to ramble on. those bit make the video more interesting. Thank you!!

[owpeezygaming]

way longer than I expected, hehe i rather watch you even for an hour per episode

[ruchisheth]

At 5:04, when we are putting ellipse inside the while loop, the first time draw is executed,
while function is executed with x being 0, it reaches width n stops but why ain't those circles seen?
The second time draw has x =width so while will not execute but first time while function inside draw executes perfectly so why can't we see circles?

[raphaelmorgan]

"I guess at this point just email if you have a question"
the YouTube comments: am I a joke to you?

[andreacoricciati]

What if I wanna make it go to left once I reach mouseX > 300?? I tried with x = x -1 with an if statement that says if(mouseX > 300 && mouseX < width){x = x-1} but it creates another loop once I reach 300, it doesn't go "turn" the loop fo the left.

[Maha_s]

You are so likeable as a teacher!!! I love your style! Just starting CS50 and although not quite there with the coding language part (I assume this is C?) I feel this will be useful later 🙂

[stephmacindoe]

Love the Dora reference, went to see the new film for my 20th birthday

[jacobwojcik]

I am having an issue with the starting bit of the video with the if statement. If we only run the block of code when x is less than 16 (the width of the ellipse), then wouldn't we get to the point where x = 16? And when evaluated against width (also with the value of 16) we get a false evaluation where we do not run the block of code, and then simply run the ellipse command with x = 16 over and over again. So, from this perspective the eventual coordinate for the ellipse would be (x = 16, y = 150). My expectations were to see the ellipse at that coordinate over and over because 16 (x) is never less than 16 (width), and so you would never update the value because you never run that line of code due to the evaluation being false. Of course, this perspective is wrong, because we clearly get an output that eventually ends with the ellipse coordinate of (x = 400, y = 150). Sorry for the long winded question, but I just can't seem to reason it through on my own. Any clarity would be greatly appreciated. Happy coding!

[debanjanaghosh]

Writing int x=0 as global does nothing. local int x=0 in draw() makes the program run. Why? Please help