Add a few more mesh types

This commit is contained in:
2026-04-14 08:38:50 -05:00
parent 378227c377
commit 0b570b5fd6
23 changed files with 875 additions and 83 deletions
+17 -17
View File
@@ -43,8 +43,8 @@ const redAsAlphaCheck = document.getElementById("red-as-alpha");
const CHECKER_CELL = 8;
function drawCheckerboard(w, h) {
for (let y = 0; y < h; y += CHECKER_CELL) {
for (let x = 0; x < w; x += CHECKER_CELL) {
for(let y = 0; y < h; y += CHECKER_CELL) {
for(let x = 0; x < w; x += CHECKER_CELL) {
ctx.fillStyle = ((x / CHECKER_CELL + y / CHECKER_CELL) % 2 === 0) ? "#c8c8c8" : "#ffffff";
ctx.fillRect(x, y, Math.min(CHECKER_CELL, w - x), Math.min(CHECKER_CELL, h - y));
}
@@ -52,7 +52,7 @@ function drawCheckerboard(w, h) {
}
function render() {
if (!state.pixels) return;
if(!state.pixels) return;
const { pixels, width, height, scale, bg, format } = state;
const cw = width * scale;
@@ -62,7 +62,7 @@ function render() {
canvas.height = ch;
// 1. Background
if (bg === "grid") {
if(bg === "grid") {
drawCheckerboard(cw, ch);
} else {
ctx.fillStyle = bg;
@@ -128,17 +128,17 @@ function loadDTF(file) {
function updateWarnings() {
const warnings = [];
if (state.pixels) {
if(state.pixels) {
const { width, height } = state;
const isPow2 = n => n > 0 && (n & (n - 1)) === 0;
if (width < 4) warnings.push(`Width is below 4 px (${width})`);
if (height < 4) warnings.push(`Height is below 4 px (${height})`);
if (!isPow2(width)) warnings.push(`Width is not a power of two (${width})`);
if (!isPow2(height)) warnings.push(`Height is not a power of two (${height})`);
if(width < 4) warnings.push(`Width is below 4 px (${width})`);
if(height < 4) warnings.push(`Height is below 4 px (${height})`);
if(!isPow2(width)) warnings.push(`Width is not a power of two (${width})`);
if(!isPow2(height)) warnings.push(`Height is not a power of two (${height})`);
const bytes = DTF.HEADER_SIZE + width * height * DTF.BPP[state.format];
if (bytes > 256 * 1024) {
if(bytes > 256 * 1024) {
warnings.push(`Output exceeds 256 KB (${(bytes / 1024).toFixed(1)} KB)`);
}
}
@@ -150,7 +150,7 @@ function updateWarnings() {
}
function updateDtfSize() {
if (!state.pixels) return;
if(!state.pixels) return;
const bytes = DTF.HEADER_SIZE + state.width * state.height * DTF.BPP[state.format];
infoDtfSize.textContent = `${(bytes / 1024).toFixed(1)} KB`;
updateWarnings();
@@ -163,7 +163,7 @@ function applyImageData(width, height, data, filename, formatLabel, format) {
state.filename = filename.replace(/\.[^/.]+$/, "");
// Sync format selector when loading an existing DTF
if (format !== undefined) {
if(format !== undefined) {
state.format = format;
formatSelect.value = format;
redAsAlphaRow.hidden = format !== DTF.FORMAT_ALPHA;
@@ -189,8 +189,8 @@ function applyImageData(width, height, data, filename, formatLabel, format) {
}
function handleFile(file) {
if (!file) return;
if (file.name.toLowerCase().endsWith(".dtf")) {
if(!file) return;
if(file.name.toLowerCase().endsWith(".dtf")) {
loadDTF(file);
} else {
loadStandardImage(file);
@@ -204,7 +204,7 @@ function showError(msg) {
// ─── Export ───────────────────────────────────────────────────────────────────
function exportDTF() {
if (!state.pixels) return;
if(!state.pixels) return;
const buf = DTF.encode(state.width, state.height, state.pixels, state.format, state.redAsAlpha);
const blob = new Blob([buf], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob);
@@ -217,7 +217,7 @@ function exportDTF() {
}
function exportPNG() {
if (!state.pixels) return;
if(!state.pixels) return;
DuskPNG.download(`${state.filename}.png`, state.width, state.height, state.pixels);
}
@@ -234,7 +234,7 @@ scaleInput.addEventListener("input", () => {
bgSwatches.addEventListener("click", e => {
const btn = e.target.closest(".bg-swatch");
if (!btn) return;
if(!btn) return;
bgSwatches.querySelectorAll(".bg-swatch").forEach(b => b.classList.remove("active"));
btn.classList.add("active");
state.bg = btn.dataset.bg;