How to apply gravity to bouncing balls in javascript -
I want to go from having the ball bounce back and forth around the canvas to have some gravity and eventually sink down. I know that I need to change the speed when it hits the bottom, but I have no idea how this should be done and coded.
I'm a brand new JS student with no physical background - how difficult would it be? I am very happy to learn, etc. I tried to get the balls to hit and come off at the right angle, but now it seems taller than me.
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 took out the cx movement just for the up / down animation and circles for drawing a circle What would be the next step?
I will multiply my current speed by a number like 0.8 in a collision, and where / how?
Sorry for the basic / terrible written code - you have to start somewhere!
source to share
You were very close, think of gravity as a constant downward velocity increment, so at each step you need to add this to your calculation vy
.
"I know I need to change the speed when it hits the bottom."
This is not the case because gravity affects objects ALL time. When you touch the bottom, things like wetting of the material and surface friction can occur.
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>
source to share