Object building practice(Very simple question, I promise)

MDN Learn
#1

Object building practice

js

I don’t know how Canvas(math too, if truth be told …) works, but it should not be:

if the y coordinate is greater than the height of the canvas (the ball is going off the top edge).
if the y coordinate is smaller than 0 (the ball is going off the bottom edge).

Can you please explain?
Thank you.

#2

Hello @Ti_awer

not sure if i got your question right or not so sorry if i miss understand it

first

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

will get the canvas width and height

then we want to make sure the ball to bounce once it’s edge touch the edge of the canvas

so we do that

Ball.prototype.update = function() {
  if ((this.x + this.size) >= width) {       // this will get the current x coordinate of the center of the ball  and also it's size and check if it greater than or equal to the  width of the canvas if yes then it set the velocity to the negative sign of it which mean each time we add velocity it inverse it's movement 
    this.velX = -(this.velX);
  }

  if ((this.x - this.size) <= 0) {   // this same as above but it check if the ball go to the start of the canvas
    this.velX = -(this.velX);
  }

  if ((this.y + this.size) >= height) {  //same thing for the y coordinate
    this.velY = -(this.velY);
  }

  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }

  this.x += this.velX;    // this will update the coordinate of the center of the ball by adding velx to it's value notice that velx could be negative which it would mean this.x -= this.velx but since we change the sign of vlex above then we do not need that here
  this.y += this.velY; // same thing as this.x
}

hope that help and have a nice day :slight_smile:

1 Like
#3

Oh … I have no problem with the code as such. I’m guessing I’m misunderstanding the canvas(and maybe not only it) rendering system.

I’ll try to explain:
Assuming canvas size 100x100 (px)
Since the canvas width starts from the left (start, 0 px) and goes to the right (to the end of the width, 100 px)
therefore, if the x coordinate is greater than the width of the canvas, then the ball extends beyond the right edge (past the 100px mark).
if the x coordinate is less than the width of the canvas, then the ball goes beyond the left edge (passes the 0 px width mark)
Hope this is correct …

Then, since the height starts at the bottom (start, 0 px) and goes up (to the end of the height, 100 px)
therefore, if the y coordinate is greater than the height of the canvas, then the ball extends past the top edge (past the 100px height mark).
if the y coordinate is less than the canvas height, then the ball goes past the bottom edge (passes the 0 px height mark)
But the lesson says the opposite …

My best guess at the moment is that the calculation of the height in the canvas (everywhere?) Goes from top to bottom. But I’m not sure and I wanted clarification on this score.

Thanks for your time and have a nice day.

#4

this is right but you have to consider the size of the ball cause x is the center of the ball

it should compared to zero 0 not the width as you know and you said earlier that the canvas start from left

so that start point coordinate is (0,0)

width mean the number of px from 0 coordinate to the left edge of the canvas

also consider the size of the ball that why it compare the x coordinate + the size of the ball to zero

cause if you compared only the x coordinate you would see that ball (if it big and move in slow rate) that half of it or less outside the edge of the canvas

for the y coordinate and your questions
it same as the x one
canvas start from top left corner

as said in this part of the page

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice#modeling_a_ball_in_our_program

x and y coordinates — the horizontal and vertical coordinates where the ball starts on the screen. This can range between 0 (top left hand corner) to the width and height of the browser viewport (bottom right hand corner).
also check this link it will say that canvas start from top left corner

https://www.w3schools.com/graphics/canvas_coordinates.asp

hope that help and you very welcome and have a nice day :slight_smile:

1 Like