# How to apply gravity to bouncing balls in javascript -

I want to move from having a ball bounce back and forth around a canvas to having some gravity and eventually dropping. I know i need to change the velocity when it reaches the bottom but i have no idea how this should be done and coded.

I am a completely new JS student, with no physics background - how hard is this going to be? I'm quite happy to learn etc. I tried having balls collide and come off at correct angles but that seems way above me for now.

``````var canvas,
ctx,
cx = 100,
cy = 150,
vx = 0,
vy = 5,
radius = 30;

function init() {

canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");

circle();
}

function circle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(circle);

if (cx + radius > canvas.width || cx - radius < 0)
vx = -vx;
if (cy + radius > canvas.height || cy - radius < 0)
vy = -vy;

cx += vx;
cy += vy;
}
``````

I've taken out cx movement just for up/down animation and the circle draw codes for space What would be the next step?

Will i be multiplying its current velocity by a number like 0.8 on collision and where/how?

Forgive basicness/horrible written code - gotta start somewhere!

## Answers: You were very close, think of the gravity as a constant downwards velocity increment, so in each step you need to add that to your `vy` calculation.

"I know i need to change the velocity when it reaches the bottom"`

That is not true because gravity affects objects ALL the time. When you touch the bottom, things like material dampening and surface friction can happen.

``````var canvas,
ctx,
cx = 100,
cy = 100,
vx = 2,
vy = 5,
radius = 5,
gravity = 0.2,
damping = 0.9,
traction = 0.8,
paused = false;
;

function init() {

canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");

canvas.width = 300;
canvas.height = 150;

circle();
}

function circle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!paused)
requestAnimationFrame(circle);

if (cx + radius >= canvas.width) {
vx = -vx * damping;
cx = canvas.width - radius;
} else if (cx - radius <= 0) {
vx = -vx * damping;
cx = radius;
}
if (cy + radius >= canvas.height) {
vy = -vy * damping;
cy = canvas.height - radius;
// traction here
vx *= traction;
} else if (cy - radius <= 0) {
vy = -vy * damping;
cy = radius;
}

vy += gravity; // <--- this is it

cx += vx;
cy += vy;

ctx.beginPath();
ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
}

init();

// fancy/irrelevant mouse grab'n'throw stuff below
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mouseup', handleMouseUp);

function handleMouseDown(e) {
cx = e.pageX - canvas.offsetLeft;
cy = e.pageY - canvas.offsetTop;
vx = vy = 0;
paused = true;
}

function handleMouseUp(e) {
vx = e.pageX - canvas.offsetLeft - cx;
vy = e.pageY - canvas.offsetTop - cy;
paused = false;
circle();
}``````
``````canvas {border: 1px solid black; cursor: crosshair;}
p {margin: 0;}``````
``````<canvas id="gameCanvas"></canvas>
<p>Throw the ball by holding and releasing the left mouse button on the canvas (reverse slingshot)</p>``````

## Top Questions

©2020 All rights reserved.