How does the var x and var lineY code work?

Question

I have this processing.js code made on khan academy:

background(255, 255, 247);
stroke(173, 222, 237);

for (var i = 0; i < 20; i++) {
    
    var lineY = 20 + (i * 20);
    line(0, lineY, 400, lineY);
    
}

for (var j = 0; j < 20; j++) {
    
    var x = 20 + (j * 20);
    line(x, 0, x, 400);

}

What does the

var lineY = 20 + (i * 20);

code do? And what does the

var x = 20 + (j * 20);

code do?

Im a beginner

Please read the [documentation](//developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/var). This is basic JS syntax. Stack Overflow doesn’t replace a [JS tutorial](//developer.mozilla.org/docs/Web/JavaScript/Guide). See [How much research effort is expected of Stack Overflow users?](//meta.stackoverflow.com/q/261592/4642212). — Sebastian Simon, Mar 14 '22 at 23:04

score 0 · Answer 1 · answered Mar 14 '22 at 23:02

Each one declares (tells javascript to create) a variable (a word), and initializes the value (sets the initial value) to whatever is on the other side of the = sign.

var lineY = 20 + (i * 20);
line(0, lineY, 400, lineY);

is equivalent to

line(0, 20 + (i * 20), 400, 20 + (i * 20));

however, using a variable makes it so you don't have to do the same calculation again (and makes code more readable).

score 0 · Answer 2 · answered Mar 14 '22 at 23:03

var lineY = 20 + (i * 20);

This means that the variable called lineY will be equal to 20 plus the value of i times 20. So if i is 1, then lineY will equal 40.

The variables i and j will be values of 20 or less, based on the maximum value in the for loop.

How does the var x and var lineY code work?

2 Answers2