nizika/scripts/main.js

const canvas = document.getElementById ('canvas');
const ctx = canvas.getContext ('2d');

const bg = (function ()
    {
      const _ = document.createElement('canvas');
      const img = new Image ();

      _.width = 1920;
      _.height = 1080;

      const ctx = _.getContext ('2d');

      img.onload = (function ()
          {
            ctx.drawImage (img, 0, 0);
          });

      img.src = './assets/bg.jpg';

      return _;
    }) ();

const nizikaList = Array (24).fill ().map (function (__, i)
    {
      const _ = document.createElement('canvas');
      const img = new Image ();

      _.width = 300;
      _.height = 300;

      const ctx = _.getContext ('2d');

      img.onload = (function ()
          {
            ctx.drawImage (img, 0, 0);
            replaceColorWithTransparent (_);
          });

      img.src = `./assets/nizika/${String (i + 1).padStart (3, '0')}.png`;

      return _;
    });

const kitaList = Array (40).fill ().map (function (__, i)
    {
      const _ = document.createElement('canvas');
      const img = new Image ();

      _.width = 428;
      _.height = 240;

      const ctx = _.getContext ('2d');

      img.onload = (function ()
          {
            ctx.drawImage (img, 0, 0);
          });

      img.src = `./assets/kita/${String (i + 41).padStart (3, '0')}.png`;

      return _;
    });

const runawayGuitar = new Audio ('./assets/kita.wav');

let canvasX;
let canvasY;
let frame = 0;

let nizikaData = [];

preprocess ();

window.setInterval (() => reDraw (), 16);


function
preprocess ()
{
  canvas.addEventListener ('click', function ()
      {
        runawayGuitar.play ();
      });

  reDraw ();
}


function
reDraw ()
{
  canvasX = window.innerWidth;
  canvasY = window.innerHeight;

  canvas.width = canvasX;
  canvas.height = canvasY;

  ctx.drawImage (bg, 0, 0, canvasX, canvasY);

  nizikaData.push ({x: Math.random () * canvasX - 150,
                    y: Math.random () * canvasY - 150});

  if (nizikaData.length > 100)
    nizikaData.shift ();

  nizikaData.forEach (function (nizika)
      {
        ctx.drawImage (nizikaList[frame % 24], nizika.x, nizika.y);
      });

  ++frame;
}


function
replaceColorWithTransparent (canvas)
{
  const context = canvas.getContext ('2d');
  const imageData = context.getImageData (0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;

  for (let i = 0; i < pixels.length; i += 4)
    {
      const r = pixels[i];
      const g = pixels[i + 1];
      const b = pixels[i + 2];

      if (r < 64 && g >= 96 && b < 96)
        pixels[i + 3] = 0;
    }

  context.putImageData (imageData, 0, 0);
}