<TITLE>𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢᯽𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢</TITLE>
<meta charset="UTF-8">
<head>
<style>
html, body {margin: 0;width: 100%;height: 100%;overflow: hidden;background: #00F47C00;}
#grid {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>
</head>
<body>
<div id="s"></div>
<canvas id="grid"></canvas>
<script>
const COLOR_STEP = "AUTO"
const G = Math.pow(3, 3);
const PIXEL_SIZE = Math.pow(3, 2);
const STEP = PIXEL_SIZE + 2 * PIXEL_SIZE;
const GAP = (STEP - PIXEL_SIZE) / 2;
const canvas = document.getElementById("grid");
canvas.width = G * STEP;
canvas.height = G * STEP;
const ctx = canvas.getContext("2d", { alpha: true });
const totalPixels = G * G;
const onesCount = new Uint8Array(totalPixels);
let maxOnes = 0;
for (let i = 1; i < totalPixels; i++) {
onesCount[i] = onesCount[(i / 3) | 0] + (i % 3 === 1 ? 1 : 0);
if (onesCount[i] > maxOnes) maxOnes = onesCount[i];
}
const center = G >> 1;
const centerIdx = center * G + center;
const target = onesCount[centerIdx];
for (let y = 0; y < G; y++) {
for (let x = 0; x < G; x++) {
const idx = y * G + x;
const val = onesCount[idx];
let v;
if (COLOR_STEP === "AUTO") {
v = Math.round(255 * (val / maxOnes));
} else if (COLOR_STEP === "0" || COLOR_STEP === 0) {
v = 255;
} else {
v = 255 - (target - val) * Number(COLOR_STEP);
v = v < 0 ? 0 : v > 255 ? 255 : v;
}
ctx.fillStyle = `rgba(${v},${v},${v},${v / 255})`;
ctx.fillRect(x * STEP + GAP, y * STEP + GAP, PIXEL_SIZE, PIXEL_SIZE);
}
}
</script>
</body>
</html>