3

The for loop does not run like I would expect it to. I would expect the for loop to run only once, but when I run it, it shows an animation.

The programming environment I am using: https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain

var xPositions = [200];
var yPositions = [0];

draw = function() {
    background(204, 247, 255);

    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(0, 200, 255);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        yPositions[i] += 5;
    }

};

When we say i++ then the condition i < xPositions.length is no longer true.

So why does the the loop run more than once?

I was told that because the draw function is called forever, the loop will also get called forever.

But, the second time the loop tries to run, the condition of the for loop is not met and therefore should not run.

Thanks.

Blockquote

.

Blockquote

Bob Smith
  • 75
  • 9
  • 3
    Well adding `console.log(xPositions[i])` to the top of the loop would be helpful to see whether some other code somewhere is modifying that array. – Pointy Aug 27 '19 at 19:27
  • 2
    In processing, draw function is executed forever until the program stops – Norhther Aug 27 '19 at 19:29
  • 1
    BTW, Processing.js is discontinued, you should use p5.js instead. – Barmar Aug 27 '19 at 19:30
  • may be it runs file. But 'draw' function gets executed many times? How do you use it? – Alex Vovchuk Aug 27 '19 at 19:30
  • Yes, but yPositions[i] += 5 is in the for loop, so the draw function wont repeat it – Bob Smith Aug 27 '19 at 19:30
  • 2
    The point is that the function is being called repeatedly. Each time it's called it only loops once, but every time that happens it increases `yPositions[0]`. – Barmar Aug 27 '19 at 19:31
  • 1
    Please provide a [mcve]. In particular, show how `draw` is used. I suspect that `draw` is called more than once. The loop only iterates once **per function call**. – Code-Apprentice Aug 27 '19 at 19:31
  • https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain – Bob Smith Aug 27 '19 at 19:53
  • Thats the programming environment that I use. I am still confused because when the draw function is called a second time, why should the value of i be reset? – Bob Smith Aug 27 '19 at 19:53
  • 1
    You're using Javascript, so that `var i` is scoped to (i.e. "only exists inside") the function. It doesn't exist before the function runs, it exists while the function runs, and it gets destroyed when the function finishes. So every time `draw` runs (which is 60 times per second by default, as per Processing convention) a _fresh_ variable `i` gets created and set to 0, because that's what you programmed to happen. – Mike 'Pomax' Kamermans Sep 03 '19 at 23:23

2 Answers2

5

I would expect the for loop to run only once

This is the correct expectation...with one addtion: the for loop will only run once per function call. If draw() is called more than once, then it will execute the loop every time you call the function.

draw() creates a single frame of the animation. In this case, you move the rain drop down 5 pixels and then render the frame with it at the new position. But to get the animation, you need to call draw() several times a second. This is similar to flipping the corners of your notebook with a slightly different version of a stick man drawn on each page to create an illusion of motion. The repeated calls to draw() are taken care of in your programming environment.

The for loop you write inside of draw() is intended to iterate over each raindrop. In this case, you only have one. I suggest adding 3 or 4 raindrops at different positions. Then you will see how the for loop iterates over each raindrop, moving them each down 5 pixels. Then your programming environment on Kahn Academy will call draw() several time per second for each frame in the animation.

Code-Apprentice
  • 81,660
  • 23
  • 145
  • 268
  • https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain – Bob Smith Aug 27 '19 at 19:51
  • Thats the programming environment that I use.I am still confused because when the draw function is called a second time, why should the value of i be reset? – Bob Smith Aug 27 '19 at 19:52
  • @BobSmith Because you delcare `i` as a local variable inside `draw()`. Each time `draw` is called, you do `var i = 0` which creates a new variable named `i` and sets its value to 0. – Code-Apprentice Aug 27 '19 at 20:56
  • This is missing a bit that explains that in Processing (and ports of that language), the _default behaviour_ is to first run `setup()`, and then continuously trigger `draw()` - at 60 calls per second, unless otherwise specified by using `noLoop()` (to turn off the animation loop) or by issuing a `frameRate(...)` call to change the number of `draw` calls per second. – Mike 'Pomax' Kamermans Sep 03 '19 at 23:28
  • 1
    @Mike'Pomax'Kamermans The OP is using a development environment on Khan Academy (see the link in the question). That environment appears to use Processing under the hood, but these details are hidden from the OP. The OP is expected to fill in the details of the `draw()` function without worrying about allthe nitty gritty details. As a learning environment, this makes a lot of sense. – Code-Apprentice Sep 04 '19 at 15:59
  • How a sketch runs is not a "nitty gritty detail", it's a fundamental fact about Processing, and how your sketch runs in your KA course. Anyone who's working on a KA processing assignment and hints at not being aware of this should absolutely be told about the fact that this is how things universally work in the KA code editor, if they don't already know. – Mike 'Pomax' Kamermans Sep 04 '19 at 16:11
2

The loop should run only once, but in processing js, the draw function is called forever.

Aggs123
  • 171
  • 8
  • No, it shouldn't "run only once" at all. Unless `noLoop()` is issued, Processing (not just the discontinued Processing.js but _all_ ports of Processing and the principal language itself) runs `setup` once, and `draw` at 60 fps for the lifetime of the sketch. – Mike 'Pomax' Kamermans Sep 03 '19 at 23:25