88x31 canvas

2024-08-23 18:42:45 +10:00 · 2024-08-23 18:42:45 +10:00 · e0dd99472e
commit e0dd99472e
parent 2fb5c22a54
1 changed files with 87 additions and 0 deletions
--- a/src/88x31.html
+++ b/src/88x31.html
@ -0,0 +1,87 @@
+<html>
+  <body>
+    <canvas
+      id="canvas"
+      width="88"
+      height="31"
+      style="image-rendering: pixelated"
+    ></canvas>
+  </body>
+  <script>
+    // 76x26
+    const logo =
+      "iVBORw0KGgoAAAANSUhEUgAAAEwAAAAaCAYAAAAdQLrBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB50lEQVRYCdVXi26EMAwb0/7/lzcZ4ZPnSx+0KXBIU9vEdpxcQdr2te75LUhvhfhdYfrs8tUFGuiEJkBFDT0zhvWOx73QQ9csvolOXNVQZCKKJZZvSqH+sIefpnwOYNhgTvk8lRU3LM/dA5WyB6av4wPbnbcUvZJsmq8Rz6jG2HzldQrqd9SzavzrmQcF9LRCHrE9fHBqOGpGGOZYL1qd5/Vco4XXGi+uiyqotX+JHEA3QH4PzjHgQi+KU1dXre2cUk7jqlXa77r4hmHjRUBinCti+njBkoZysI9wjnFtz+tZsT3ayvU9ey3qnPnoF0W86oeeu/qLPvp39Itb4ob9HPnS2xXlEevRKXHf4mdu2Bt5IlBromcIE6XnqHcNrOW6NtAWd2n+zoH5UB59s/gr3DkweMge2vKhnxnYcjPHr+hDRBi1+XfA9iXCaj59XxtYa0BXmXUffvahRIONYs7rOmvTLSMuqFzkSnzHuY7yIqzmyXVchCGWq3JK+BZmqwGQi4SVQzMRjjmsEUfz5JdwzLe0FEd914wwxFK/iFExB2lOBVfsWfvKmkN91L5hQ4ITpMcPC709aWATs76OevX/knz12CFuFWIfcbtgmjfMG0EuiiGe+VxRI9PvPrCa6Vouy8jH3C40/AdInUY6Yxg1wwAAAABJRU5ErkJggg==";
+    const img = new Image();
+    img.src = `data:image/png;base64, ${logo}`;
+
+    const dBlue = "#86a8e7";
+    const lBlue = "#91eae4";
+    const squareSize = 10;
+
+    const { width, height } = canvas;
+    const ctx = canvas.getContext("2d");
+    let lastDrawTime = performance.now();
+    let shift = 0;
+    let imagePos = [0, 0];
+    let flip = [1, 1];
+
+    const renderBg = (delta) => {
+      for (let y = -squareSize; y < height; y += squareSize) {
+        const oddRow = y % (squareSize * 2);
+        for (let x = -squareSize; x < width; x += squareSize) {
+          const oddCol = x % (squareSize * 2);
+
+          ctx.fillStyle = oddRow
+            ? oddCol
+              ? dBlue
+              : lBlue
+            : oddCol
+              ? lBlue
+              : dBlue;
+
+          ctx.fillRect(x + shift, y + shift, squareSize, squareSize);
+        }
+      }
+
+      if (shift > squareSize) {
+        shift = 0;
+      } else {
+        shift += 0.01 * delta;
+      }
+    };
+
+    const renderLogo = (delta) => {
+      const moveDistance = 0.02 * delta;
+      imagePos[0] += moveDistance * flip[0];
+      imagePos[1] += moveDistance * flip[1];
+
+      if (imagePos[0] + 38 >= width) {
+        flip[0] = -1;
+      } else if (imagePos[0] <= 0) {
+        flip[0] = 1;
+      }
+
+      if (imagePos[1] + 13 >= height) {
+        flip[1] = -1;
+      } else if (imagePos[1] <= 0) {
+        flip[1] = 1;
+      }
+
+      ctx.drawImage(img, ...imagePos, 38, 13);
+    };
+
+    const draw = (ms) => {
+      const delta = ms - lastDrawTime;
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, width, height);
+
+      renderBg(delta);
+      renderLogo(delta);
+
+      lastDrawTime = performance.now();
+      requestAnimationFrame(draw);
+    };
+
+    requestAnimationFrame(draw);
+  </script>
+</html>