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 upperKita = document.createElement ('canvas');

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

let canvasX;
let canvasY;
let frame = 0;

let nizikaData = [];
let kitaData = [];

const nizikaVel = 5;

let runawayFlag = false;
let runawayFrame = 0;

preprocess ();

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


function
preprocess ()
{
  canvas.addEventListener ('click',
      function f (e)
      {
        this.removeEventListener ('click', f);

        kitaData.push ({x: e.clientX,
                        y: e.clientY});

        runawayFlag = true;
        runawayFrame = frame;

        runawayGuitar.play ();
      });

  upperKita.width = 428;
  upperKita.height = 240;

  reDraw ();
}


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

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

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

  if (!(runawayFlag))
    {
      nizikaData.push ({x: Math.random () * canvasX,
                        y: Math.random () * canvasY});
    }

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

  kitaData.forEach (
      function (kita)
      {
        ctx.drawImage (kitaList[frame % 40], kita.x - 214, kita.y - 120);
      });

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

        if (runawayFlag)
          {
            const l = Math.sqrt (Math.pow (kitaData[0].x - nizika.x, 2)
                                 + Math.pow (kitaData[0].y - nizika.y, 2));
            const t = Math.atan2 (kitaData[0].y - nizika.y,
                                  kitaData[0].x - nizika.x);

            nizika.x += nizikaVel * Math.cos (t);
            nizika.y += nizikaVel * Math.sin (t);
          }
      });

  if (runawayFlag)
    {
      changeAlpha (upperKita, kitaList[frame % 40],
                   Math.max (runawayFrame - frame + 85, 0) * 3);
      ctx.drawImage (upperKita, kitaData[0].x - 214, kitaData[0].y - 120);
    }

  ++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);
}


function
changeAlpha (toCanvas, canvas, alpha)
{
  const toCtx = toCanvas.getContext ('2d');

  const ctx = canvas.getContext ('2d');
  const imageData = ctx.getImageData (0, 0, canvas.width, canvas.height);
  const pxs = imageData.data;

  for (let i = 0; i < pxs.length; i += 4)
    pxs[i + 3] = alpha;

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