fix countdown visualization logic, optimize drawing and showing logic by only getting image data once in color getting functions

static/pumpkin.js

@@ -32,22 +32,52 @@ function drawGrid(ctx, canvas, GRID_SIZE) {
     }
 }
 
-function check_colorable(ctx, CELL_SIZE, gridX, gridY) {
+function is_orange(r, g) {
-    var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
+    return (r >= 250 && (g >= 121 && g <= 130));
-    var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
-    var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
-    return (pixel[0] >= 254 && (pixel[1] >= 124 && pixel[1] <= 126));
 }
 
-function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY) {
+function getPixel(image_data, canvas_width, x, y) {
-    if (check_colorable(ctx, CELL_SIZE, gridX, gridY)) {
+    const index = (Math.floor(y) * canvas_width + Math.floor(x)) * 4;
+    
+    return {
+        r: image_data[index],
+        g: image_data[index + 1],
+        b: image_data[index + 2],
+        a: image_data[index + 3]
+    };
+}
+
+function check_colorable(image_data, canvas_width, CELL_SIZE, gridX, gridY) {
+    const cellX = gridX * CELL_SIZE;
+    const cellY = gridY * CELL_SIZE;
+
+    offset = 5
+    
+    const topLeft = getPixel(image_data, canvas_width, cellX + offset, cellY + offset);
+    const topRight = getPixel(image_data, canvas_width, cellX + CELL_SIZE - offset, cellY + offset);
+    const bottomLeft = getPixel(image_data, canvas_width, cellX + offset, cellY + CELL_SIZE - offset);
+    const bottomRight = getPixel(image_data, canvas_width, cellX + CELL_SIZE - offset, cellY + CELL_SIZE - offset);
+
+    console.log(topLeft, topRight, bottomLeft, bottomRight)
+
+    return is_orange(topLeft.r, topLeft.g) &&
+           is_orange(topRight.r, topRight.g) &&
+           is_orange(bottomLeft.r, bottomLeft.g) &&
+           is_orange(bottomRight.r, bottomRight.g);
+}
+
+function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY, image_data = null) {
+    if (!image_data) {
+        image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
+    }
+
+    if (check_colorable(image_data, ctx.canvas.width, CELL_SIZE, gridX, gridY)) {
         var key = `${gridX},${gridY}`;
         if (!currentPattern.includes(key)) {
             currentPattern.push(key);
-            var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
+            var cellX = gridX * CELL_SIZE;
-            var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
+            var cellY = gridY * CELL_SIZE;
-            ctx.fillStyle = 'transparent';
+            ctx.clearRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
-            ctx.clearRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
             return true;
         } else {
             return false;
@@ -65,13 +95,15 @@ function color_amount(ctx, canvas, grid_size, amount) {
     let colored = 0;
     const cell_size = canvas.width / grid_size;
     let currentPattern = [];
+    
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
 
     for (let y = 0; y < grid_size; y++) {
         for (let x = 0; x < grid_size; x++) {
             if (colored == amount) {
                 return currentPattern;
             }
-            if (check_and_color(ctx, cell_size, currentPattern, x, y)) {
+            if (check_and_color(ctx, cell_size, currentPattern, x, y, image_data)) {
                 colored++;
             }
         }
@@ -83,11 +115,13 @@ function color_amount(ctx, canvas, grid_size, amount) {
 function draw_pattern(ctx, canvas, pattern, grid_size) {
     const cell_size = canvas.width / grid_size;
     let currentPattern = [];
+    
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
 
     for (let x = 0; x < grid_size; x++) {
         for (let y = 0; y < grid_size; y++) {
             if (includesPoint(pattern, [x, y])) {
-                check_and_color(ctx, cell_size, currentPattern, x, y);
+                check_and_color(ctx, cell_size, currentPattern, x, y, image_data);
             }
         }
     }
@@ -99,9 +133,11 @@ function get_colorable(ctx, canvas, grid_size) {
     let colorable = 0;
     const cell_size = canvas.width / grid_size;
 
-    for (let x = 0; x < grid_size; x++) {
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        for (let y = 0; y < grid_size; y++) {
+
-            if (check_colorable(ctx, cell_size, x, y)) {
+    for (let y = 0; y < grid_size; y++) {
+        for (let x = 0; x < grid_size; x++) {
+            if (check_colorable(image_data, canvas.width, cell_size, x, y)) {
                 colorable++;
             }
         }

templates/countdown.jinja2

@@ -37,13 +37,13 @@
 <div class="position-absolute top-50 start-50 translate-middle text-center">
     <h1 id="halloween_countdown">Time to next Halloween: Loading...</h1>
     <div class="mt-3"></div>
-    <h3>Carved Pumpkin Countdown Visualization (last 30 days to Halloween):</h3>
+    <h3 id="visualization_info">Carved Pumpkin Countdown Visualization (last ? days to Halloween):</h3>
     <canvas id="pumpkin_canvas" width="600" height="600"></canvas>
 </div>
 
 <script>
 const halloween_countdown = document.getElementById("halloween_countdown");
-const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 30, false);
+const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 15, false);
 let colorable = 0;
 let last_days = -1;
 
@@ -52,7 +52,7 @@ function update() {
     let year = current_time.getFullYear();
 
     const halloween_time = new Date(year, 9, 31);
-    const after_halloween = new Date(year, 10, 1);
+    const after_halloween = new Date(year, 15, 1);
 
     if (current_time > halloween_time) {
         if (current_time < after_halloween) {
@@ -73,18 +73,19 @@ function update() {
     
     if (days <= colorable && days != last_days) {
         last_days = days;
-        clearCanvas(ctx, canvas, img, 30, []);
+        clearCanvas(ctx, canvas, img, 15, []);
-        color_amount(ctx, canvas, 30, colorable - days);
+        color_amount(ctx, canvas, 15, colorable - days);
     }
 
     halloween_countdown.textContent = `Time to next Halloween: ${days} day(s) ${hours} hour(s) ${minutes} minute(s) ${seconds} second(s)`
 }
 
 img.addEventListener('load', function() {
-    colorable = get_colorable(ctx, canvas, 30);
+    colorable = get_colorable(ctx, canvas, 15);
+    document.getElementById("visualization_info").textContent = `Carved Pumpkin Countdown Visualization (last ${colorable} days to Halloween):`
     imageLoaded = true;
     update();
-    setInterval(update, 1000);
+    setInterval(update, 1500);
 });
 
 </script>