P5 js coordinates [x, y]

dayogreats

Yes i understand that canvass origin [0,0] is at the top-left and while [width-1, height-1] is at bottom-right of the container.

However, i am having challenges in understanding some codes below.

Pls can someone help me explain these lines of codes?

function draw() { background(0); // Set the background to black y = y - 1; if (y < 0) { y = height; } line(0, y, width, y);

My issues is, what is validated here when 'y' is a positive number?

if (y < 0) // e.g -1, -3 -7 etc are less than 0

or y = y - 1 means 1 is substracted from what the value of height is?

or y = y - 1 is just a symbolic representation?

kfrajer

It is drawing lines from the bottom to the top. The line's length is the width of the screen. If y is initialized to zero when the program begins, then the if statement will force it to start from the bottom.

Kf

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Considering y is height now, line(0, y, width, y); would draw a line starting at the left-bottom (0, y) to the right-bottom (width, y):

http://p5js.org/reference/#/p5/line

GoToLoop

Here's video about Cartesian coordinates and how to use them w/ point() & line(): O:-)

https://Vimeo.com/69759159
http://FunProgramming.org/2-Download-Processing-Use-point-and-line.html

dayogreats

My issues is, what is validated here when 'y' is a positive number?

if (y < 0) // e.g -1, -3 -7 etc are less than 0

or y = y - 1 means 1 is substracted from what the value of height is?

or y = y - 1 is just a symbolic representation?

kfrajer

The value of y decreases every time y=y-1 is called. This lines gets called multiple times. To draw a line, in only makes sense to draw it within your sketch area, where x and y positions can have values between 0 and width, height resp. What your function does is to wrap around drawing the line in your sketch. Lines are draw from bottom to top. When it reaches the top, the value of y is reset back to height and the lines begin to be drawn again at the bottom. That is the function of the conditional statement in your code.

Kf

dayogreats

Tnx @kfrajer.

Now i know what the problem is now.

i over thought (thinking to much) the whole thing.

Thanks for resetting my memory and that fixes the bug there O:-)