csd4ni3l/loginween
1
0
Fork 0
mirror of https://github.com/csd4ni3l/loginween.git synced 2026-01-01 04:23:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
csd4ni3l
2025-10-23 22:02:04 +02:00
parent 9de0f728d5
commit b17bc6283e
2 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
static/pumpkin.js
View File

@@ -32,22 +32,52 @@ function drawGrid(ctx, canvas, GRID_SIZE) {
}
}
function check_colorable(ctx, CELL_SIZE, gridX, gridY) {
var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
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 is_orange(r, g) {
return (r >= 250 && (g >= 121 && g <= 130));
}
function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY) {
if (check_colorable(ctx, CELL_SIZE, gridX, gridY)) {
function getPixel(image_data, canvas_width, x, y) {
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 cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
ctx.fillStyle = 'transparent';
ctx.clearRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
var cellX = gridX * CELL_SIZE;
var cellY = gridY * CELL_SIZE;
ctx.clearRect(cellX, cellY, 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++) {
for (let y = 0; y < grid_size; y++) {
if (check_colorable(ctx, cell_size, x, y)) {
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 (check_colorable(image_data, canvas.width, cell_size, x, y)) {
colorable++;
}
}

15
templates/countdown.jinja2
View File

@@ -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, []);
color_amount(ctx, canvas, 30, colorable - days);
clearCanvas(ctx, canvas, img, 15, []);
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>