Launch Scripts

animation.js

window.hudpad = window.hudpad || {};
window.hudpad.scripts = window.hudpad.scripts || [];
window.hudpad.scripts.push({
  name: 'animation',
  title: 'Demo Animation',
  script: function (launch) {
    // launch.showText('Hello There!');
    // launch.showText('My Name is Andrew!');
    // launch.showText('what is your name?');
    let x = 8;
    let v = -0.5;
    const particles = [];
    // throw Error('test')

    launch.overview.update(({ctx, size}) => {
      if (x >= 30) { x = 8; v = Math.abs(v) * -1; }
      if (x <= -8) { x = -8; v = Math.abs(v); }
      x += v;
    });
    launch.overview.draw(({ctx, size}) => {
      ctx.clearRect(0, 0, size, 1);
      // call draw APIs on 8px by 1px canvas ctx
      ctx.fillRect(x, 0, size - 2, 1);
    });

    launch.scene.update(({size}) => {
      if (!particles.length) {
        particles.push({
          w: 2, h: 2,
          x: Math.random() * (size - 1),
          y: Math.random() * (size - 1),
          vx: (Math.random()) - 0.5,
          vy: (Math.random()) - 0.5
        });
      } else {
        const sw = sh = size;
        particles.forEach(b => {
          let {w, h, x, y, vx, vy} = b;
          // air friction
          vx *= 0.98; vy *= 0.98;
          // too slow... boost
          if (Math.abs(vx) < 0.05) { vx = (Math.random()) - 0.5; }
          if (Math.abs(vy) < 0.05) { vy = (Math.random()) - 0.5; }
          // wall bounce
          if (x + w > sw || x < 0) { vx *= -1; }
          if (y + h > sh || y < 0) { vy *= -1; }
          if (x + w > sw) { x = sw - w; }
          if (y + h > sh) { y = sh - h; }
          if (x < 0) { x = 0; }
          if (y < 0) { y = 0; }
          // apply velocity
          x += vx;
          y += vy;
          // finalize changes
          Object.assign(b, {x, y, vx, vy});
        });
      }
    });

    launch.scene.draw(({ctx, size}) => {
      ctx.clearRect(0, 0, size, size);
      ctx.beginPath();
      particles.forEach(b => {
        ctx.rect(b.x, b.y, b.w, b.h);
      });
      ctx.fill();
    });

    launch.pixel.draw(({ctx}) => {
      ctx.fillRect(0, 0, 1, 1);
    });
  }
});