code.org for-loop not drawing lines javascript

Question

Okay, so in code.org's game lab, they offer a pre-made function called "line();" which should draw a line stemming from a given x1 y1, and x2 y2 coordinate. When I attempted to create a for-loop that would allow me to draw 3 line segments on the same y pixel, the for-loop simply ran forever inside the draw loop, (but not correctly, it just moved the x2 and y2 to the right infinitely), so I moved it outside of the draw loop and now I'm getting no output at all...

var spaceXPos = 70;
var spaceXPos2 = spaceXPos + 25;

for (var i = 0; i < 4; i++){
  stroke(rgb(255, 255, 255));
  strokeWeight(2);
  line(spaceXPos, 200, spaceXPos2, 200);
  spaceXPos = spaceXPos + 20;
}

function draw() {
  background("wheat");
}

This is for an independent project, I'm using code.org because it offers an easy-to-use screen for animations and drawing, and I'm also taking an AP CompSci class through it as well.

Here's a link to this code in the Game Lab https://studio.code.org/projects/gamelab/_w391nq3oEo62S3WOOpWg6NrMrMHNvo8n20gVMDu5hg

Answer 1

When your line() command is outside of the draw loop, as in the sample code you posted, the following happens, in order:

• Setup (once): Your setup code (everything outside of your draw loop) runs first. This includes your for loop, which ends up calling line() four times.
• Draw (every 33ms): Your draw() function calls background("wheat"), painting over the output of your setup code. This happens many times each second.

So you see no output (except for the background color) because your draw() function is painting over the lines your for loop drew.

If, as you describe above, you move the for loop into draw() so that your code looks like this:

var spaceXPos = 70;
var spaceXPos2 = spaceXPos + 25;

function draw() {
  background("wheat");

  for (var i = 0; i < 4; i++){
    stroke(rgb(255, 255, 255));
    strokeWeight(2);
    line(spaceXPos, 200, spaceXPos2, 200);
    spaceXPos = spaceXPos + 20;
  }
}

...then the following happens:

• Setup (once): spaceXPos is set to 70 and spaceXPos2 is set to 95.

• Draw (first time): The background is drawn, and then your lines are drawn. Every time you draw a line you are adding 20 to spaceXPos, but spaceXPos2 is not changing, so the four lines drawn in the first draw call are:

  1. line(70, 200, 95, 200)
  2. line(90, 200, 95, 200)
  3. line(110, 200, 95, 200)
  4. line(130, 200, 95, 200)

• Draw (second time): The background is drawn again, and then your lines are drawn again. However, the value of spaceXPos didn't get reset, so it keeps moving to the right. Notice that the x2 value 95 hasn't changed, so one end of the line is staying in the same place.

  1. line(150, 200, 95, 200)
  2. line(170, 200, 95, 200)
  3. line(190, 200, 95, 200)
  4. line(210, 200, 95, 200)

• Draw (and so on): One end of the line keeps moving to the right until it's off the screen, and no more changes are visible, so you end up with something like this:

If your goal is to draw three line segments in a row, you'll need to make sure both the x1 and x2 values change for each call, and make sure they start in the same place on every draw call. Here's one way to do that:

var START_X = 70;
var FIXED_Y = 200;
var WIDTH = 20;
var GAP = 5;

function draw() {
  background("wheat");

  stroke(rgb(255, 255, 255));
  strokeWeight(2);
  for (var i = 0; i < 3; i++){
    line(
      (WIDTH + GAP) * i + START_X,
      FIXED_Y,
      (WIDTH + GAP) * i + START_X + WIDTH,
      FIXED_Y
    );
  }
}