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