index-javascript.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-063933E3C2"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-063933E3C2");
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bouncing Ball: a physics playground with gravity, bounciness and squash and stretch</title>
    <meta
      name="description"
      content="Bouncing Ball: drop, grab and throw a basketball, a tennis ball, a ping-pong ball or a bowling ball, on Earth, the Moon, Mars or Jupiter. Tune the bounciness and the air drag, and watch the height of each bounce shrink."
    />
    <meta
      name="keywords"
      content="bouncing ball, physics, javascript, canvas, animation, gravity, coefficient of restitution, air drag, squash and stretch, bounce, simulation, moon, jupiter"
    />
    <meta name="author" content="Olivier Giulieri" />
    <meta name="robots" content="index, follow" />
    <link
      rel="canonical"
      href="https://evoluteur.github.io/bouncing-ball/index-javascript.html"
    />
    <link rel="icon" type="image/png" href="favicon.png" />
    <meta name="theme-color" content="#0288d1" />
    <meta property="og:site_name" content="Bouncing Ball" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Bouncing Ball" />
    <meta
      property="og:description"
      content="A physics playground: drop, grab and throw balls, change the gravity, the bounciness and the air drag."
    />
    <meta
      property="og:url"
      content="https://evoluteur.github.io/bouncing-ball/index-javascript.html"
    />
    <meta property="og:image" content="https://evoluteur.github.io/bouncing-ball/bouncing-ball.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Bouncing Ball" />
    <meta
      name="twitter:description"
      content="A physics playground: drop, grab and throw balls, change the gravity, the bounciness and the air drag."
    />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Overpass"
    />
    <link id="omg-core-css" rel="stylesheet" href="css/core.css" />
    <script>
      // Themes (dark, light, evol-blue) are copies of omg-themes; set OMG_THEMES_BASE to link the hosted ones instead.
      window.OMG_THEMES_BASE = "";
      window.OMG_DEFAULT_THEME = "evol-blue";
      (function () {
        var t = window.OMG_DEFAULT_THEME;
        try {
          t = localStorage.getItem("omg-theme") || t;
        } catch (e) {}
        if (t !== "dark" && t !== "light" && t !== "evol-blue")
          t = window.OMG_DEFAULT_THEME;
        document.documentElement.setAttribute("data-theme", t);
        // written here (not in the markup) so the saved theme loads before first paint
        document.write(
          '<link id="omg-theme-css" rel="stylesheet" href="' +
            window.OMG_THEMES_BASE +
            "css/themes/" +
            t +
            "/" +
            t +
            '.css" />',
        );
      })();
    </script>
    <link id="omg-density-css" rel="stylesheet" href="css/densities.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/bouncing-ball.css" />

    <script src="js/omg.js"></script>
    <script src="js/bouncing-ball.js"></script>
  </head>

  <body
    onload="
      setupPage('home');
      initBouncingBall();
    "
    id="omg-body"
    class="medium"
  >
    <div id="omg-header">
      <h1>Bouncing Ball</h1>
      <div id="omg-header-tools">
        <div id="omg-theme-picker"></div>
        <a
          id="omg-github"
          href="https://github.com/evoluteur/bouncing-ball"
          target="_blank"
          rel="noopener"
          title="Bouncing Ball on GitHub"
          aria-label="Bouncing Ball on GitHub"
          ><svg viewBox="0 0 16 16" aria-hidden="true">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg
        ></a>
      </div>
    </div>
    <h2>What makes a bounce feel real</h2>
    <div class="content">
      <div class="app-layout">
        <div class="art-col">
          <div class="art-wrap" id="bb-wrap">
            <canvas id="bb-canvas" aria-label="Bouncing balls"></canvas>
          </div>
          <canvas id="bb-graph" aria-label="Height of the ball over time"></canvas>
          <p id="bb-stats"></p>
          <div class="buttons">
            <button type="button" id="bb-drop">Drop</button>
            <button type="button" id="bb-add" class="secondary">Add a ball</button>
            <button type="button" id="bb-clear" class="secondary">Clear</button>
            <button type="button" id="bb-pause" class="secondary">Pause</button>
            <button type="button" id="bb-png" class="secondary">Download PNG</button>
          </div>
        </div>
        <div class="controls">
          <label>Ball <select id="bb-ball"></select></label>
          <label
            ><span>Gravity <b id="bb-g-val"></b></span>
            <select id="bb-planet"></select
          ></label>
          <label
            ><span>Bounciness <b id="bb-e-val"></b></span>
            <input id="bb-e" type="range" min="0" max="1" step="0.01" value="0.78"
          /></label>
          <label
            ><span>Air drag <b id="bb-k-val"></b></span>
            <input id="bb-k" type="range" min="0" max="0.15" step="0.001" value="0.008"
          /></label>
          <div class="checks">
            <label class="check"><input id="bb-squash" type="checkbox" checked /> Squash and stretch</label>
            <label class="check"><input id="bb-trail" type="checkbox" checked /> Trail</label>
            <label class="check"><input id="bb-slow" type="checkbox" /> Slow motion</label>
            <label class="check"><input id="bb-sound" type="checkbox" /> Sound</label>
          </div>
          <p class="hint">
            Click to drop a ball, or grab one and throw it. The graph follows
            the last ball you touched. The address of the page keeps the
            settings, to share them.
          </p>
        </div>
      </div>

      <h3>Each bounce a little lower</h3>
      <div class="explain">
        <p>
          When a ball hits the floor, it comes back up slower than it came
          down. The ratio of the two speeds is its <em>bounciness</em>
          (physicists call it the coefficient of restitution, <em>e</em>):
          about 0.9 for a super ball, 0.75 for a basketball or a tennis
          ball, almost nothing for a ball of clay. The height a ball reaches
          grows with the square of its speed, so each bounce rises to
          <em>e²</em> of the one before: a basketball keeps about 60% of its
          height every time. The graph under the room measures it.
        </p>
        <p>
          The bounces also get shorter, by <em>e</em> each time. In theory
          a ball bounces forever, but all those bounces add up to a finite
          time, like Zeno's arrow that never reaches its target but does:
          dropped from 2 meters, a basketball should be done in about 5
          seconds. In practice, the last tiny hops are lost in the
          vibrations of the floor, and the ball rolls.
        </p>
        <p>
          Air matters too. Its drag grows with the square of the speed and
          weighs most on light balls: a ping-pong ball falls a lot slower
          than a golf ball of the same size, and hardly slows a bowling
          ball. Change the gravity to see the same ball float on the Moon
          or slam down on Jupiter.
        </p>
        <p>
          <em>Squash and stretch</em> is not physics but the first of the
          twelve principles of animation from the Disney studio: a ball
          that flattens when it lands and stretches when it falls fast
          feels heavier and livelier than a perfect circle. Turn it off to
          compare. For the same bounce in a few lines of CSS, with no
          JavaScript, see the <a href="./index.html">CSS bouncing ball</a>.
        </p>
      </div>

      <div class="footer">
        <p>
          Bouncing Ball is open source on
          <a href="https://github.com/evoluteur/bouncing-ball">GitHub</a>
          with an MIT license.
        </p>
        <p>
          Had fun browsing the app?
          <a href="https://github.com/sponsors/evoluteur"
            >Buy me a coffee by becoming a sponsor</a
          >.
        </p>
        <p>
          You may also enjoy
          <a href="https://evoluteur.github.io/harmonograph-maker/">Harmonograph Maker</a>,
          <a href="https://evoluteur.github.io/cymatics/">Cymatics</a>
          and
          <a href="https://evoluteur.github.io/strange-attractors/">Strange Attractors</a>.
        </p>
        <p class="copyright">
          &#169; 2020–2026
          <a href="https://evoluteur.github.io/">Olivier Giulieri</a>
        </p>
      </div>
    </div>
  </body>
</html>