What do the x and y values mean here? Can you show in a figure?

  • JavaScript
  • Thread starter shivajikobardan
  • Start date
  • Tags
    Figure Mean
In summary, the code checks to see if the ball is within the boundaries of the canvas. If it is not, it moves the ball according to its speed and gravity.
  • #1
shivajikobardan
674
54
TL;DR Summary
HTML5 canvas javascript
JavaScript:
function checkBoundaryCollision() {

  if (x - ballRadius <= 0 || x + ballRadius >= canvasWidth) {

    dx = -dx;

  }

  if (y - ballRadius <= 0 || y + ballRadius >= canvasHeight) {

    dy = -dy;

  }

}

A5gv62pzDoiMQslngM79oB_Hgmk3H9r2Sk5yoMTIcnPHPvE1Xg.png


Full code here:
 
Technology news on Phys.org
  • #2
x and y are the current positions of the ball.
x ranges from 0 (far left) to canvasWidth.
y ranges from 0 to canvasHeight.
dx and dy and the x and y increments - so on each cycle you would execute x=x+dx; y=y+dy;

I also recommend the use of parenthesis as follows:
Code:
function checkBoundaryCollision() {
  if ( ((x - ballRadius) <= 0) || ((x + ballRadius) >= canvasWidth)) {
    dx = -dx;
  }
  if ( ((y - ballRadius) <= 0) || ((y + ballRadius) >= canvasHeight)) {
    dy = -dy;
  }
}
 
  • #3
.Scott said:
x and y are the current positions of the ball.
x ranges from 0 (far left) to canvasWidth.
y ranges from 0 to canvasHeight.
dx and dy and the x and y increments - so on each cycle you would execute x=x+dx; y=y+dy;

Those are reasonable guesses, but it may have been better to tell the OP to look elsewhere in the code for the definitions of these variables, since they aren't defined in the extract they have posted.

Give a man a fish, etc.
 
  • #4
.Scott said:
I also recommend the use of parenthesis as follows:
Code:
function checkBoundaryCollision() {
  if ( ((x - ballRadius) <= 0) || ((x + ballRadius) >= canvasWidth)) {
    dx = -dx;
  }
  if ( ((y - ballRadius) <= 0) || ((y + ballRadius) >= canvasHeight)) {
    dy = -dy;
  }
}
Nothing wrong with your recommendation, but IMO the following is just as clear. In my version I've written each of the four comparisons such as (x - ballRadius <= 0) without parentheses around these expressions. Since addition and subtraction are of higher precedence in Javascript (and other languages derived from C) than any of the comparison operators, all four comparisons in the code above will be evaluated after the subtractions or additions are performed. See http://www.devdoc.net/web/developer...t=Table Precedence ,( … ) 46 more rows

One could also remove the parentheses around the comparison expressions, since logical AND and logical OR are at considerably lower comparisons, but I've left the parentheses in. My reasoning is that programmers with at least a little experience are aware of the precedence levels of the arithmetic operators vs. the comparison operators, but might not be as aware of how the logical operators fit into the precedence relationships.
JavaScript:
function checkBoundaryCollision() {
  if ( (x - ballRadius <= 0) || (x + ballRadius >= canvasWidth) ) {
    dx = -dx;
  }
  if ( (y - ballRadius <= 0) || (y + ballRadius >= canvasHeight) ) {
    dy = -dy;
  }
}
 
  • #5
My rule with parentheses is to only put them in where they are needed, otherwise you have to spend time working out what they are doing, only to find that they aren't doing anything. In practice I leave decisions like this up to https://prettier.io/, which takes the same view. In a decent text editor this makes it pretty easy to see what is going on.

1674148854096.png
 
  • #6
pasmith said:
Those are reasonable guesses, but it may have been better to tell the OP to look elsewhere in the code for the definitions of these variables, since they aren't defined in the extract they have posted.

Give a man a fish, etc.
.. and you'll end up wanting to give him a bigger fish.
Code:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;

var ballX = Array();
ballX.speed = 2.4;
ballX.vel   = ballX.speed;
ballX.rad   = ballRadius;
ballX.limit = canvas.width;
ballX.pos   = 20;

var ballY = Array();
ballY.speed = 1.7;
ballY.vel   = ballY.speed;
ballY.rad   = ballRadius;
ballY.limit = canvas.height;
ballY.pos   = 20;

function CheckWalls(ball) {
  if(ball.pos<0) {
    ball.pos = -ball.pos;
    ball.vel = ball.speed;
  }
  if(ball.pos>ball.limit) {
    ball.pos = (2*ball.limit)-ball.pos;
    ball.vel = -ball.speed;
  }
  if(ball.pos<ball.rad) {
    ball.erad = (ball.pos+ball.rad)/2;
    ball.epos = ball.erad;
  } else if((ball.limit-ball.pos)<ball.rad) {
    ball.erad = (ball.limit-ball.pos+ball.rad)/2;
    ball.epos = ball.limit-ball.erad;
  } else {
    ball.erad = ball.rad;
    ball.epos = ball.pos;
  };
  return ball;
}

function draw() {
  // Draw the puck
  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  CheckWalls(ballX);
  CheckWalls(ballY);
  ctx.ellipse(ballX.epos, ballY.epos, ballX.erad, ballY.erad, 0, 0, Math.PI * 2);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.closePath();
  ballX.pos = ballX.pos + ballX.vel;
  ballY.pos = ballY.pos + ballY.vel;
}
setInterval(draw, 12);
 
  • #7
.Scott said:
.. and you'll end up wanting to give him a bigger fish.
Yes, particularly as the OP has taken a step backwards with setInterval this time round; his last question used requestAnimationFrame, which is the right way to do animations in JavaScript.
 

Similar threads

  • Programming and Computer Science
Replies
1
Views
958
  • Programming and Computer Science
Replies
1
Views
2K
  • Programming and Computer Science
Replies
11
Views
1K
  • Programming and Computer Science
Replies
1
Views
802
  • Programming and Computer Science
Replies
4
Views
4K
  • Programming and Computer Science
Replies
1
Views
2K
  • Programming and Computer Science
Replies
1
Views
1K
  • Calculus and Beyond Homework Help
Replies
19
Views
820
  • Programming and Computer Science
Replies
9
Views
1K
  • Programming and Computer Science
Replies
1
Views
755
Back
Top