# What does the x and y value mean here? Can you show in a figure?

**URL:** https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395
**Category:** web dev
**Created:** [January 19, 2023, 2:38pm UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395 "2023-01-19T14:38:50Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)
#### Post date: [January 19, 2023, 2:38pm UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395/1 "2023-01-19T14:38:51Z")

</div>

```auto
function checkBoundaryCollision() {

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

dx = -dx;

}

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

dy = -dy;

}

}

```

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/7/2/7283defd45fc90a30c5f5fe7141256a89971f0eb.png)

Full code here: [https://codepen.io/pelko/pen/gOjXdaq](https://codepen.io/pelko/pen/gOjXdaq)

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 19, 2023, 5:27pm UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395/2 "2023-01-19T17:27:58Z")

</div>

X and Y are the center positions of the circle. Take a look at the following diagram:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/2/9/29d0fbd39fde7a13f264fdfd1c0d26a5565fb3a9.png)

If you didn’t account for `ballRadius` on the left/top/right/bottom edges, the ball would go beyond the boundaries until the center point of (x, y) hits the edge instead. We don’t want that, for that’s not how we would expect a ball to bounce in real life. In real life, the moment an edge of the ball hits a surface, the ball will compress and start to bounce back.

🎈

---

<div class="post-metadata">

### Author: ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)
#### Post date: [January 20, 2023, 3:24am UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395/3 "2023-01-20T03:24:55Z")

</div>

thank you for the information

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 20, 2023, 3:43am UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395/4 "2023-01-20T03:43:45Z")

</div>

How are you finding the canvas for drawing and building out some of these interactions? 🙂

Not sure if you have seen this or need it, but I have a bunch of Canvas-related content here:

> **[Working with the Canvas](https://www.kirupa.com/canvas/index.htm)**
>
> Learn all about this thing called the canvas and how it helps bring pixels to life using just JavaScript!

---

<div class="post-metadata">

### Author: ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)
#### Post date: [January 20, 2023, 9:05am UTC](https://forum.kirupa.com/t/what-does-the-x-and-y-value-mean-here-can-you-show-in-a-figure/656395/5 "2023-01-20T09:05:57Z")

</div>

kirupa…programming doesn’t enter my head…I think too much and go to much details and it causes slow learning and giving up…Any suggestions?