2021-12-31.fireworks

chaostikum.js

{
  const logo = [
    "xxx x x xxx ### ### ### x x   x x x   x",
    "x   x x x x # # #    #  x x x x x xx xx",
    "x   xxx xxx # # ###  #  x xx  x x x x x",
    "x   x x x x # #   #  #  x x x x x x   x",
    "xxx x x x x ### ###  #  x x x xxx x   x",
  ];

  const colors = {
    x: "rgba(255,0,221,1)",
    "#": "rgba(0,225,255,1)",
  };

  const spacing = 40;
  const offsetY = 120;
  const offsetX = 1080 / 2 - 500;

  for (let iLine = 0; iLine < logo.length; iLine++) {
    const posY = (iLine + 1) * spacing + offsetY;
    const line = logo[iLine];
    for (let iSymbol = 0; iSymbol < line.length; iSymbol++) {
      const posX = (iSymbol + 1) * spacing + offsetX;
      const c = colors[line[iSymbol]];
      if (c) {
        socket.emit("fire", { posX, posY, color: c, pVel: 0 });
        fireworks.push(new Firework(posX, posY, color(c), 0));
      }
    }
  }
}

chaotikum.js

{
  const logo = [
    "   x x x x x   ",
    "   x x x x x   ",
    "  ###########  ",
    "xx#x#####  ##xx",
    "  ##x### ## #  ",
    "xx###x## ####xx",
    "  ####x# ####  ",
    "xx###x## ####xx",
    "  ##x### ## #  ",
    "xx#x#####  ##xx",
    "  ###########  ",
    "xx######xxxx#xx",
    "  ###########  ",
    "   x x x x x   ",
    "   x x x x x   ",
  ];

  const colors = {
    x: "rgba(255,0,221,1)",
    "#": "rgba(0,225,255,1)",
  };

  const spacing = 50;
  const offsetY = 120;
  const offsetX = 1080 / 2;

  for (let iLine = 0; iLine < logo.length; iLine++) {
    const posY = (iLine + 1) * spacing + offsetY;
    const line = logo[iLine];
    for (let iSymbol = 0; iSymbol < line.length; iSymbol++) {
      const posX = (iSymbol + 1) * spacing + offsetX;
      const c = colors[line[iSymbol]];
      if (c) {
        socket.emit("fire", { posX, posY, color: c, pVel: 0 });
        fireworks.push(new Firework(posX, posY, color(c), 0));
      }
    }
  }
}

fire.js

{
  const palette = [
    "rgba(255,0,0,1)",
    "rgba(255,90,0,1)",
    "rgba(255,154,0,1)",
    "rgba(255,206,0,1)",
    "rgba(255,232,8,1)",
  ];

  const getColor = (v) => palette[Math.floor(v * palette.length)];
  const spacing = 100;
  const rows = 5;
  const cols = 10;
  const decay = 0.9;

  let fire = [];
  for (let i = 0; i < rows; i++) fire.push(new Array(cols).fill(0));

  const render = () => {
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const posX = (x + 1) * spacing;
        const posY = (y + 1) * spacing;
        const c = getColor(fire[y][x]);
        socket.emit("fire", { posX, posY, color: c, pVel: 0 });
        fireworks.push(new Firework(posX, posY, color(c), 0));
      }
    }
  };

  const randomBottom = () => {
    fire[rows - 1] = fire[0].map((_) => Math.random());
  };

  const nextFire = (...inputs) => {
    const sum = inputs
      .map((v) => v ?? Math.random())
      .reduce((a, b) => a + b, 0);
    return (sum / inputs.length) * decay;
  };

  const propagate = () => {
    for (let iRow = rows - 1; iRow > 0; iRow--) {
      const [sourceRow, targetRow] = [fire[iRow], fire[iRow - 1]];
      for (let iCell = 0; iCell < targetRow.length; iCell++) {
        targetRow[iCell] = nextFire(
          targetRow[iCell],
          sourceRow[iCell - 1],
          sourceRow[iCell],
          sourceRow[iCell + 1]
        );
      }
    }
  };

  const sleep = (t) => new Promise((resolve) => setTimeout(resolve, t));

  (async () => {
    while (true) {
      randomBottom();
      propagate();
      render();
      await sleep(3000);
    }
  })();
}

mirror.js

{
  const randomColor = () => {
    const [r, g, b] = [Math.random(), Math.random(), Math.random()].map((r) =>
      Math.round(r * 255)
    );

    return `rgba(${r},${g},${b},1)`;
  };

  socket.on("fire", ({ posX, posY, pVel }) => {
    const c = randomColor();
    socket.emit("fire", { posX, posY, pVel, color: c });
    fireworks.push(new Firework(posX, posY, color(c), pVel));
  });
}

spiral.js

{
  const logo = [
    "xxxxxxxxxxxxxxx",
    "              x",
    "############# x",
    "            # x",
    "xxxxxxxxxxx # x",
    "x         x # x",
    "x ####### x # x",
    "x #     # x # x",
    "x # xxx # x # x",
    "x # x ### x # x",
    "x # xxxxxxx # x",
    "x #         # x",
    "x ########### x",
    "x             x",
    "xxxxxxxxxxxxxxx",
  ];

  const colors = {
    x: "rgba(255,0,221,1)",
    "#": "rgba(0,225,255,1)",
  };

  const spacing = 50;
  const offsetY = 120;
  const offsetX = 1080 / 2;

  for (let iLine = 0; iLine < logo.length; iLine++) {
    const posY = (iLine + 1) * spacing + offsetY;
    const line = logo[iLine];
    for (let iSymbol = 0; iSymbol < line.length; iSymbol++) {
      const posX = (iSymbol + 1) * spacing + offsetX;
      const c = colors[line[iSymbol]];
      if (c) {
        socket.emit("fire", { posX, posY, color: c, pVel: 0 });
        fireworks.push(new Firework(posX, posY, color(c), 0));
      }
    }
  }
}

test-1.js

{
  for (let i = 0; i < 100; i++) {
    let z = i * 20;
    socket.emit("fire", {
      posX: z,
      posY: z,
      color: colorPicker.color().toString(),
      pVel: 0,
    });
    fireworks.push(new Firework(z, z, colorPicker.color(), 0));
  }
}