File: index.html

package info (click to toggle)
node-canvas-confetti 1.5.1%2B~1.4.3-2
links: PTS, VCS
area: main
in suites: bookworm, forky, sid, trixie
size: 308 kB
sloc: javascript: 1,284; sh: 23; makefile: 2
file content (790 lines) | stat: -rw-r--r-- 23,157 bytes
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Component for drawing confetti on a canvas">
  <meta name="author" content="Kiril Vatev">
  <meta name="keywords" content="canvas,confetti,component,module,animation,javascript,catdad">

  <meta name="theme-color" content="#393939">

  <title>🎊</title>

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary-color: #eeeeee;
      --secondary-color: #363636;
      --secondary-variant-color: #272727;
      --background-color: #212121;
      --inner-color: #ffffff;
      --border-color: #555651;

      /* icons by Google - Material Design
       * https://material.io/resources/icons/?style=baseline
       */
      --switch-moon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-sun-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");

      --theme-switch: var(--switch-moon-white);
    }

    [data-theme="light"] {
      --primary-color: #212121;
      --secondary-color: #ffffff;
      --background-color: #f0f0f0;
      --inner-color: #363636;

      --theme-switch: var(--switch-sun-black);
    }

    [auto-theme] {
      --theme-switch: var(--switch-auto-white);
    }

    [data-theme="light"][auto-theme] {
      --theme-switch: var(--switch-auto-black);
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      background: var(--background-color);
      color: var(--primary-color);
      font-size: 1em;
      font-family: 'Noto Sans', sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .sprite {
      display: none;
    }

    header {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      height: 64px;
    }

    .theme {
      --size: 28px;
      position: relative;
      display: inline-block;
      width: var(--size);
      height: var(--size);
      background: none;
      border: none;
      outline: none;
      margin-right: 12px;
      cursor: pointer;
    }

    .theme:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: var(--size);
      height: var(--size);
      background-repeat: no-repeat;
      background-position: center;
      background: var(--theme-switch);
    }

    .github-icon {
      --size: 36px;
      position: relative;
      display: block;
      width: var(--size);
      height: var(--size);
      margin-right: 12px;
    }

    .github-icon svg.icon {
      fill: var(--primary-color);
    }

    h1, h2, .center {
      text-align: center;
    }

    h1 {
      margin-top: 64px;
    }

    h2 {
      padding: 0;
      margin: 0.25em;
    }

    p {
      margin: 0.5em;
    }

    .container {
      position: relative;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }

    .group {
      position: relative;
      width: 100%;
      margin: 40px 0;
      padding-top: 16px;

      border-top: 1px solid var(--border-color);
      border-radius: 20px;
    }

    .run {
      padding: 10px 6px;
      margin: 0.75em auto;
      max-width: 200px;
      width: 100%;
      display: inline-block;

      background: var(--secondary-color);
      border: none;
      outline: none;

      color: var(--inner-color);
      font-weight: bold;
      cursor: pointer;
      user-select: none;

      opacity: 0.8;
      transition: opacity 100ms ease;
    }

    .group .run:hover {
      opacity: 1;
    }

    .editor {
      position: relative;
      min-height: 100px;
      width: 100%;
    }

    .editor.ace_dark.ace_editor {
      background-color: var(--secondary-color);
    }
    .editor.ace_dark .ace_gutter {
      background: var(--secondary-variant-color);
    }
    .editor.ace_dark .ace_gutter .ace_gutter-cell {
      color: var(--inner-color);
      opacity: 0.6;
    }

    .flex-rows {
      position: relative;
      display: block;
      width: 100%;
      padding-bottom: 1em;
    }

    .description {
      width: 94%;
      margin: 10px auto;
      padding: 0;

      align-items: center;
      line-height: 1.5;
    }

    .left {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    a.anchor {
      position: relative;
      color: currentColor;
      text-decoration: none;
    }

    a.anchor:hover::before {
      content: "🔗";
      color: currentColor;
      position: absolute;
      left: -2rem;
      top: 0;
      transform: scale(0.75, 0.75);
    }

    footer {
      font-size: 0.9rem;
      text-align: center;
      line-height: 2;

      background: var(--secondary-color);
    }

    footer span {
      vertical-align: middle;
    }

    span.icon {
      position: relative;
      display: inline-block;
      height: 1em;
      width: 1em;
    }
    svg.icon {
      position: absolute;
      pointer-events: none;
      left: 0;
      width: 100%;
      height: 100%;

      fill: var(--inner-color);
    }

    footer a {
      text-decoration: none;
      color: var(--inner-color);
      opacity: 0.85;
      will-change: opacity;
    }

    footer a:hover {
      opacity: 1;
    }

    .custom-canvas {
      margin-top: 30px;
      width: 100%;
      max-width: 1000px;
      height: 380px;
      background: var(--secondary-color);
    }

    @media (min-width: 44em) {
      .container {
        width: 95%;
      }

      .flex-rows {
        display: flex;
        flex-direction: row;
      }

      .description {
        width: 66%;
        padding: 0 0 0 1em;
      }
    }
  </style>

  <script>
    // this page is a demo that is not built, so fudge the module.exports support
    // define a global `module` so that the actual source file can use it
    window.module = {};
  </script>
  <script src="src/confetti.js"></script>
  <script>
    // define the `module.exports` as the `confetti` global, the way that the
    // cdn distributed file would
    window.confetti = module.exports;
  </script>

  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.0/ace.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
</head>
<body>

  <svg class="sprite" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="code" viewBox="0 0 14 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z"/>
      </symbol>

      <symbol id="heart" viewBox="0 0 12 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z"/>
      </symbol>

      <symbol id="run" viewBox="0 0 10 10">
        <path d="M2 2L8 6L2 10" />
      </symbol>

      <symbol id="octo" viewBox="0 0 16 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <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"/>
      </symbol>
    </defs>
  </svg>

  <header>
    <button id="themeToggle" title="Switch Theme" class="theme"></button>
    <a class="github-icon" title="Visit on GitHub" href="https://github.com/catdad/canvas-confetti" aria-label="View source on Github">
      <svg class="icon"><use xlink:href="#octo"></use></svg>
    </a>
  </header>

  <h1>Canvas Confetti</h1>

  <div class="container">
    <div class="group" data-name="cannon">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#basic" id="basic" class="anchor">Basic Cannon</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            The default mode... just your regular basic average blast of confetti. But it's still
            a little cool, right?
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="random">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#random" id="random" class="anchor">Random Direction</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Go crazy with some randomness. Shoot a random amount of confetti in random directions.
            (Go ahead... you know you want to click that button more than once.)
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="realistic">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#realistic" id="realistic" class="anchor">Realistic Look</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            If you happened to get curious and changed the particle count to 400 or so, you saw
            something disappointing. An even "flattened cone" look to the confetti, making it look
            way too perfect and ruining the illusion. We can fix that by mixing a few effects together.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="fireworks">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#fireworks" id="fireworks" class="anchor">Fireworks</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Why click a button repeatedly when you can have code do it for you? Shoot some firework
            of confetti from the sides of page so you can still read the content in the center.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="snow">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#snow" id="snow" class="anchor">Snow</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            The effect is not limited to crazy rapid fire of confetti though. You can create a
            wintery mood with gently falling particles across the entire page.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="continuous">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#continuous" id="continuous" class="anchor">School Pride</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            But if you are into crazy rapid fire of confetti, what could be a better use than
            to show everyone what you are all about? Tell people where you are from with two
            confetti cannons from either side of the page.
          </p>
          <p class="center">🌰 Go Buckeyes! 🌰</p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="custom">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#custom-canvas" id="custom-canvas" class="anchor">Custom Canvas</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            But if you just hate confetti all over the place, there's something here for you
            as well. You can limit where the confetti appear by providing your own canvas element.
          </p>
        </div>
      </div>
      <div class="editor"></div>
      <div class="flex-rows">
        <canvas id="my-canvas" class="custom-canvas"></canvas>
      </div>
    </div>
  </div>

  <footer>
    <a href="https://github.com/catdad">
      <span class="icon">
        <svg class="icon"><use xlink:href="#code"></use></svg>
      </span>
      <span> with </span>
      <span class="icon">
        <svg class="icon"><use xlink:href="#heart"></use></svg>
      </span>
      <span> by <b>catdad</b></span>
    </a>
  </footer>

  <script>
    var editors = [];
    var activeTheme = 'dark';
    var currentStep = parseInt(localStorage.getItem('canvas-confetti/theme'), 10) || 0;
    var prefersLightTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)');
    var themes = {
      light: 'ace/theme/xcode',
      dark: 'ace/theme/monokai'
    };

    var getPreferedTheme = function () {
      return prefersLightTheme ? prefersLightTheme.matches ? 'light' : 'dark' : 'dark';
    };

    var setTheme = function (isAuto, theme) {
      if (isAuto) {
        document.body.setAttribute('auto-theme', true);
        activeTheme = getPreferedTheme();
      } else {
        document.body.removeAttribute('auto-theme');
        activeTheme = theme;
      }

      document.body.setAttribute('data-theme', activeTheme);

      editors.forEach(function(editor) {
        editor.setTheme(themes[activeTheme]);
      });
    };

    var updateTheme = function (step) {
      currentStep = step;

      switch (step) {
        case 0:
          setTheme(true);
          prefersLightTheme && prefersLightTheme.addEventListener('change', setTheme);
          break;
        case 1:
        case 2:
          setTheme(false, step === 1 ? 'dark' : 'light');
          prefersLightTheme && prefersLightTheme.removeListener(setTheme);
          break;
      }

      localStorage.setItem('canvas-confetti/theme', currentStep);
    }

    updateTheme(currentStep);

    document.getElementById('themeToggle').addEventListener('click', function (event) {
      updateTheme(++currentStep % 3);
    });

    var modes = {
      cannon: function cannon() {
        confetti({
          particleCount: 100,
          spread: 70,
          origin: { y: 0.6 }
        });
      },
      random: function random() {
        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        confetti({
          angle: randomInRange(55, 125),
          spread: randomInRange(50, 70),
          particleCount: randomInRange(50, 100),
          origin: { y: 0.6 }
        });
      },
      realistic: function realistic() {
        var count = 200;
        var defaults = {
          origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
          confetti(Object.assign({}, defaults, opts, {
            particleCount: Math.floor(count * particleRatio)
          }));
        }

        fire(0.25, {
          spread: 26,
          startVelocity: 55,
        });
        fire(0.2, {
          spread: 60,
        });
        fire(0.35, {
          spread: 100,
          decay: 0.91,
          scalar: 0.8
        });
        fire(0.1, {
          spread: 120,
          startVelocity: 25,
          decay: 0.92,
          scalar: 1.2
        });
        fire(0.1, {
          spread: 120,
          startVelocity: 45,
        });
      },
      fireworks: function fireworks() {
        var duration = 15 * 1000;
        var animationEnd = Date.now() + duration;
        var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        var interval = setInterval(function () {
          var timeLeft = animationEnd - Date.now();

          if (timeLeft <= 0) {
            return clearInterval(interval);
          }

          var particleCount = 50 * (timeLeft / duration);
          // since particles fall down, start a bit higher than random
          confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
          confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
        }, 250);
      },
      snow: function snow() {
        var duration = 15 * 1000;
        var animationEnd = Date.now() + duration;
        var skew = 1;

        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        (function frame() {
          var timeLeft = animationEnd - Date.now();
          var ticks = Math.max(200, 500 * (timeLeft / duration));
          skew = Math.max(0.8, skew - 0.001);

          confetti({
            particleCount: 1,
            startVelocity: 0,
            ticks: ticks,
            origin: {
              x: Math.random(),
              // since particles fall down, skew start toward the top
              y: (Math.random() * skew) - 0.2
            },
            colors: ['#ffffff'],
            shapes: ['circle'],
            gravity: randomInRange(0.4, 0.6),
            scalar: randomInRange(0.4, 1),
            drift: randomInRange(-0.4, 0.4)
          });

          if (timeLeft > 0) {
            requestAnimationFrame(frame);
          }
        }());
      },
      continuous: function continuous() {
        var end = Date.now() + (15 * 1000);

        // go Buckeyes!
        var colors = ['#bb0000', '#ffffff'];

        (function frame() {
          confetti({
            particleCount: 2,
            angle: 60,
            spread: 55,
            origin: { x: 0 },
            colors: colors
          });
          confetti({
            particleCount: 2,
            angle: 120,
            spread: 55,
            origin: { x: 1 },
            colors: colors
          });

          if (Date.now() < end) {
            requestAnimationFrame(frame);
          }
        }());
      },
      custom: function() {
        var canvas = document.getElementById('my-canvas');

        // you should  only initialize a canvas once, so save this function
        // we'll save it to the canvas itself for the purpose of this demo
        canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });

        canvas.confetti({
          spread: 70,
          origin: { y: 1.2 }
        });
      }
    };

    function pretty(val) {
      return js_beautify(val, { indent_size: 2, brace_style: 'preserve-inline', });
    }

    function getCode(name) {
      // pretty-print the code, since we will use minified code in production
      var code = pretty(modes[name].toString());
      // take out the function wrapper, trim all whitespace
      code = code.split('\n').slice(1).slice(0, -1).map(function (s) {
        return s.trim();
      }).join('\n');
      // pretty-print again
      return pretty(code);
    }

    window.onload = function () {
      [].forEach.call(document.querySelectorAll('.group'), function (group) {
        var name = group.getAttribute('data-name');
        var button = group.querySelector('.run');
        var codeElem = group.querySelector('.editor');

        var editor = ace.edit(codeElem);
        editor.setTheme(themes[activeTheme]);
        editor.session.setMode('ace/mode/javascript');
        editor.session.setUseSoftTabs(true);
        editor.session.setTabSize(2);

        editor.session.setValue(getCode(name));

        var count = editor.session.getLength();

        // set height so that all code is visible
        codeElem.style.minHeight = (14 * count) + 1 + 'px';
        codeElem.style.height = (count) + 'rem';

        button.onclick = function (ev) {
          // stop mobile browsers from zooming when clicking
          // buttons repeatedly really fast
          ev.preventDefault();

          try {
            eval(editor.getValue());
          } catch (e) {
            console.error(e);
          }
        };

        editors.push(editor);
      });
    };
  </script>

  <script src="/analytics.js" async></script>
</body>
</html>