P5 js coordinates [x, y]

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?

Answers

  • 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

  • edited February 2017 Answer ✓

    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

  • edited February 2017

    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

  • 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?

  • Answer ✓

    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

  • 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:-)

Sign In or Register to comment.