1. The rendering
2. Implementation analysis
Use Canvas to draw balls and ground;
1. The falling process
Physics review: falling objects (regardless of loss) convert gravitational potential energy into kinetic energy
Gravitational potential energy Ep = MGH
The kinetic energy Ek is equal to 1/2 mV squared
Speed increased from 0 right to GT
Here you need to calculate the y coordinates of each browser rendering of the sphere
y = (1/2)gt^2
2. Rebound process
Kinetic energy is converted to gravitational potential energy
The velocity is decreasing to zero
We intended to set y = (1/2)g(t-T1)^2, where t1 is how long it takes to fall or bounce back
But the actual effect is not satisfactory, it should be the rebound displacement calculation error, after repeated thinking fruitless (if anyone has a better way to achieve it, welcome to comment to inform)
So we decided to store the drops in an array and retrieve the assignments one by one as we bounced back
3. Code implementation
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 1);
}
#canvas{
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
<script type="text/javascript"> // Free fall H=(gt^2)/2 kinetic energy Ek=(mv^2)/2 gravitational potential energy :Ep = MGHletX =300,y=60, // minHeight =60, // maxHeight = 446, // maxHeight = dirtrue; //dir trueWhereabouts,falseFor pop-up (function() {let canvas= document.getElementById('canvas');
let ctx = canvas.getContext('2d'); draw(ctx); }) ();function draw(ctx){
letcurrentTime = new Date().getTime(); // Start milliseconds, go back to currentTimeletarr_y = []; / / set the window down displacement of array. RequestAnimationFrame (function init() {if(dir){
if(y >= maxHeight){
dir = false;
currentTime = new Date().getTime();
}else{y = y + math.pow ((new Date().gettime () -currenttime)/1000,2)*10/2; arr_y.push(y); }}else{
if(y <= minHeight){
dir = true;
currentTime = new Date().getTime();
}else{y = arr_y. Splice (1, 1) [0] | | 60; } } drawArc(ctx,x,y); requestAnimationFrame(init); }); } // Draw the sphere and the groundfunctiondrawArc(ctx,x,y){ ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); CTX. Arc (x, y, 50, 0, math.h PI * 2); ctx.fillStyle='#98adf0';
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#ffffff'; CTX. MoveTo (0500); CTX. LineTo (600500); ctx.lineWidth = 4; ctx.stroke(); ctx.closePath(); ctx.save(); } </script> </body> </html>Copy the code
4. Conclusion
Although it was only a simple fall and bounce, it took me 6 days to realize the bounce displacement (mainly thinking about how to calculate the bounce displacement every day).
The main starting point has been focusing on
Falling displacement (parabolic equation on open line)
y = (1/2)gt^2
If you think about the displacement of the rebound, instead of moving the parabola to the right t1 along the X-axis, you get
y = (1/2)g(t-t1)^2
If you’re interested, you can try it out
Browser render rebound effect is not satisfactory, so have not figured out the calculation of displacement method, so use array implementation