6.5: Loop vs. Draw – Processing Tutorial

[ad_1]
This video discusses how draw() is also a loop.
When does it make sense to have a for or while loop in draw() vs. just use the fact that draw() itself loops?

Support this channel on Patreon:

Contact:

Send me your questions and coding challenges!:

Link to code on Github:

Processing:
Processing Foundation:
Learning Processing Book:

For More Processing Tutorials:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

20 responses to “6.5: Loop vs. Draw – Processing Tutorial”

  1. Sergio Corrente Avatar

    I love the way you teach.

  2. ammar shahin Avatar

    I have been debugging a program for two days with and couldn't find what's wrong until I watched that video
    no thanks in the world can be enough xD

  3. Frederico Ludwig Avatar

    your videos are so grat man, i cant even say how much it helps me. But how i make the lines desapeare when it gets on the edge?

  4. ryanshaver Avatar

    Thanks Dan for all the videos, extremely helpful for getting started.

    I have a query for anyone willing; I've been able to populate the lines up to the widths end…but I'm having trouble figuring out how to make them go back.

    https://www.openprocessing.org/sketch/431119

    Here is the code I have thus far. I've finally got it stuck going back down between 640 and 620…not sure how to proceed.

  5. spezi1337 Avatar

    i would have just used a for-loop, so the amount of lines that will be drawn each loop increments every time

  6. vignesh padmanabhan Avatar

    how about we use frameRate(); ?

  7. Ghenady Kuznetsov Avatar

    the draw() function is invoked by a timer

  8. BAM & PARTO Avatar

    HI Daniel, I have an issue with this excercise. I wanted to run the loop as you did but manually by mousePressed.
    However, this is showing up all of the lines, with just ONE mousePressed. I want to show up each line for each mouse press. What am I doing wrong??? Thanks a lot !!

    float endX =0;

    void setup() {
    size(400, 400);
    background(51);
    }
    void draw() {
    stroke(255);
    strokeWeight(2);
    int x = 0;
    for (x=0; x<endX; x=x+width/10) {

    if (mousePressed) {
    line (x, 0, x, height);

    }
    }
    endX = endX+width/10;
    }

  9. Tim Glenn Avatar

    The program keeps looping the content of the while loop until it's done before it moves on to the code below it

  10. Khaled Zarif Avatar

    Hi Daniel,

    I just need to clarify few things with myself if you could help me.

    When the program is executed the setup() function is executed first, then the draw() function and thencit goes through the while() loop which increments by 1 and then goes back to draw() function runs the code in draw() and then goes back into the while() loop and vice versa until the condition is false then goes onto the next following codes, if there are any existing codes. Essentially, is that how the logic of loop vs draw() works?

  11. The Tech Space Avatar

    Using a For Loop Solution:
    float x,x1,y1,y2;
    void setup(){
    size(600,400);
    }
    void draw(){
    background(#ffffff);
    for(int x=0;x<width;x=x+20){
    stroke(#ff0000);
    fill(#000000);
    line(x,0,x,600);
    }
    }

  12. login211 Avatar

    Useful stuff. Thanks!

  13. SilenceOfThought Avatar

    you can simply delete "while" function for this to work

  14. MrDonald911 Avatar

    How can we simulate Draw() with other languages like C or Java ? Obviously, while and for loops are much faster, so what would be the delay ? Thanks

  15. Leonardo Lajanz Avatar

    Hey, Daniel… But, as the x is increasing and the check is made at each "turn", how is it possible, that the "thing" (or, x) is being less than the "endX", which is only increasing by 1? This is something very confusing; no doubt. I say that, because, even if we do not reset the x [inside of draw()] the result is still the same. -.-

  16. Alonso Sandoval Gomez Avatar

    Hey Dan, great lecture but I'm a bit stuck. I'm attempting to bring Euclid's Elements to life in processing and this seems like this is the appropriate lecture to learn how to animate a line being drawn or even an arc.

    However my reasoning isn't bearing any fruit. I'm in a size(800,600) I have an x, y, and an endX. I've initialised x = 300, y = 350 and endX = 0. I'm saying if x < endX then draw a line (x, y, endX ,y) } endX = endX + 1. I realised this wouldn't work because the statement is never met so on my next attempt I initialised endX at 301 and still nada.

    If you could help me it would be much appreciated, cheers Dan. Oh btw almost everyone in my Creative Technologies degree in New Zealand watches your vids and we think you're cool

  17. Brett L Avatar

    My approach to animating the lines was using an if conditional inside of the draw() loop. I guess that effectively turns the draw loop into a while loop, because it only draws that part when that condition is true. Nice clarification of a confusing topic.

  18. Sir. Boaz Mutatay Avatar

    In Brief, There is a difference between animating and repeating. Thank You Sir

  19. beca Cruz Avatar

    Very cleared! Awesome video.

Leave a Reply

Your email address will not be published. Required fields are marked *