431 lines
14 KiB
JavaScript
Executable File
431 lines
14 KiB
JavaScript
Executable File
import { sprintf } from "sprintf-js";
|
|
import { Xorshift32 } from "../utils/random.js";
|
|
import { WfcGrid } from "./WfcGrid.js";
|
|
import { TrainingCell } from "./TrainingCell.js";
|
|
import { TrainingGrid } from "./TrainingGrid.js";
|
|
|
|
class PainApp {
|
|
/** @type {string} */
|
|
activeColor = "#000";
|
|
/** @type {string} */
|
|
currentTool = "draw";
|
|
/** @type {boolean} */
|
|
isDrawing = false;
|
|
/** @type {boolean} */
|
|
drawingMode = false;
|
|
|
|
/**@param {string[]} pal */
|
|
constructor(dim, pal, gridElement, paletteElement, previewElement) {
|
|
/** @type {number} */
|
|
this.dim = dim;
|
|
/** @type {string[]} Default color palette */
|
|
this.palette = pal;
|
|
/** @type {string[]} */
|
|
this.samplePixels = new Array(dim ** 2).fill(pal[pal.length - 1]);
|
|
/** @type {HTMLElement} */
|
|
this.gridElement = gridElement;
|
|
/** @type {HTMLElement} */
|
|
this.previewElement = previewElement;
|
|
/** @type {HTMLElement} */
|
|
this.paletteElement = paletteElement;
|
|
/** @type {HTMLInputElement} */
|
|
|
|
this.trainingImage = new TrainingGrid(
|
|
this.samplePixels.map(() => {
|
|
return new TrainingCell();
|
|
}),
|
|
);
|
|
|
|
this.createGrid();
|
|
this.createColorPalette();
|
|
this.updatePreview();
|
|
this.setActiveColor(pal[0]);
|
|
this.updateTrainingGrid();
|
|
}
|
|
|
|
createGrid() {
|
|
this.gridElement.innerHTML = "";
|
|
|
|
for (let i = 0; i < this.dim ** 2; i++) {
|
|
const pixel = document.createElement("div");
|
|
pixel.className = "pixel";
|
|
pixel.setAttribute("data-index", i);
|
|
pixel.style.backgroundColor = this.samplePixels[i];
|
|
|
|
pixel.addEventListener("mousedown", (e) => this.startDrawing(e, i));
|
|
pixel.addEventListener("mouseenter", (e) => this.continueDrawing(e, i));
|
|
pixel.addEventListener("mouseup", () => this.stopDrawing());
|
|
|
|
this.gridElement.appendChild(pixel);
|
|
}
|
|
|
|
// Prevent context menu and handle mouse events
|
|
this.gridElement.addEventListener("contextmenu", (e) => e.preventDefault());
|
|
document.addEventListener("mouseup", () => this.stopDrawing());
|
|
}
|
|
|
|
createColorPalette() {
|
|
this.paletteElement.innerHTML = "";
|
|
|
|
this.palette.forEach((color, paletteIndex) => {
|
|
const swatch = document.createElement("div");
|
|
swatch.classList.add("color-swatch");
|
|
swatch.classList.add(`pal-idx-${paletteIndex}`);
|
|
swatch.classList.add(`pal-color-${color}`);
|
|
swatch.style.backgroundColor = color;
|
|
swatch.onclick = () => this.setActiveColor(paletteIndex);
|
|
this.paletteElement.appendChild(swatch);
|
|
});
|
|
}
|
|
|
|
setActiveColor(paletteIndex) {
|
|
//
|
|
this.activeColor = this.palette[paletteIndex];
|
|
|
|
const colorSwatches = this.paletteElement.querySelectorAll(".color-swatch");
|
|
colorSwatches.forEach((swatch) => {
|
|
const isActive = swatch.classList.contains(`pal-idx-${paletteIndex}`);
|
|
swatch.classList.toggle("active", isActive);
|
|
});
|
|
}
|
|
|
|
setTool(tool) {
|
|
this.currentTool = tool;
|
|
document.querySelectorAll(".tools button").forEach((btn) => btn.classList.remove("active"));
|
|
document.getElementById(tool + "Btn").classList.add("active");
|
|
|
|
const status = document.getElementById("status");
|
|
switch (tool) {
|
|
case "draw":
|
|
status.textContent = "Drawing mode - Click to paint pixels";
|
|
break;
|
|
case "fill":
|
|
status.textContent = "Fill mode - Click to fill area";
|
|
break;
|
|
}
|
|
}
|
|
|
|
toggleDrawingMode() {
|
|
this.drawingMode = !this.drawingMode;
|
|
const btn = document.getElementById("drawModeBtn");
|
|
if (this.drawingMode) {
|
|
btn.textContent = "Drawing Mode: ON";
|
|
btn.classList.add("drawing-mode");
|
|
document.getElementById("status").textContent = "Drawing mode ON - Click and drag to paint";
|
|
} else {
|
|
btn.textContent = "Drawing Mode: OFF";
|
|
btn.classList.remove("drawing-mode");
|
|
document.getElementById("status").textContent = "Drawing mode OFF - Click individual pixels";
|
|
}
|
|
}
|
|
|
|
startDrawing(e, index) {
|
|
e.preventDefault();
|
|
this.isDrawing = true;
|
|
this.applyTool(index);
|
|
}
|
|
|
|
/** @param {MouseEvent} e */
|
|
continueDrawing(e, index) {
|
|
if (this.isDrawing && this.drawingMode) {
|
|
this.applyTool(index);
|
|
return;
|
|
}
|
|
|
|
this.updateTrainingCell(index);
|
|
this.updatePreview(index);
|
|
}
|
|
|
|
stopDrawing() {
|
|
this.isDrawing = false;
|
|
}
|
|
|
|
applyTool(index) {
|
|
switch (this.currentTool) {
|
|
case "draw":
|
|
this.setPixel(index, this.activeColor);
|
|
break;
|
|
case "fill":
|
|
this.floodFill(index, this.samplePixels[index], this.activeColor);
|
|
break;
|
|
}
|
|
}
|
|
|
|
setPixel(index, color) {
|
|
this.samplePixels[index] = color;
|
|
const pixel = document.querySelector(`[data-index="${index}"]`);
|
|
pixel.style.backgroundColor = color;
|
|
this.updatePreview();
|
|
}
|
|
|
|
floodFill(startIndex, targetColor, fillColor) {
|
|
if (targetColor === fillColor) return;
|
|
|
|
const stack = [startIndex];
|
|
const visited = new Set();
|
|
|
|
while (stack.length > 0) {
|
|
const index = stack.pop();
|
|
if (visited.has(index) || this.samplePixels[index] !== targetColor) continue;
|
|
|
|
visited.add(index);
|
|
this.setPixel(index, fillColor);
|
|
|
|
// Add neighbors
|
|
const row = Math.floor(index / this.dim);
|
|
const col = index % this.dim;
|
|
|
|
if (row > 0) stack.push(index - this.dim); // up
|
|
if (row < 8) stack.push(index + this.dim); // down
|
|
if (col > 0) stack.push(index - 1); // left
|
|
if (col < 8) stack.push(index + 1); // right
|
|
}
|
|
}
|
|
|
|
clearCanvas() {
|
|
this.samplePixels.fill("#fff");
|
|
this.createGrid();
|
|
this.updatePreview();
|
|
}
|
|
|
|
randomFill() {
|
|
for (let i = 0; i < this.dim ** 2; i++) {
|
|
const randomColor = this.palette[Math.floor(Math.random() * this.palette.length)];
|
|
this.setPixel(i, randomColor);
|
|
}
|
|
}
|
|
|
|
invertColors() {
|
|
for (let i = 0; i < this.dim ** 2; i++) {
|
|
const color = this.samplePixels[i];
|
|
const r = 15 - parseInt(color.substr(1, 1), 16);
|
|
const g = 15 - parseInt(color.substr(2, 1), 16);
|
|
const b = 15 - parseInt(color.substr(3, 1), 16);
|
|
const inverted =
|
|
"#" +
|
|
r.toString(16) + // red
|
|
g.toString(16) + // green
|
|
b.toString(16); // blue
|
|
|
|
this.setPixel(i, inverted);
|
|
|
|
if (i % 10 === 0) {
|
|
console.log("invertion", {
|
|
color,
|
|
r,
|
|
g,
|
|
b,
|
|
inverted,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
updatePreview(subImageIdx = undefined) {
|
|
const canvas = document.createElement("canvas");
|
|
if (subImageIdx === undefined) {
|
|
canvas.width = this.dim;
|
|
canvas.height = this.dim;
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
for (let i = 0; i < this.dim ** 2; i++) {
|
|
const x = i % this.dim;
|
|
const y = Math.floor(i / this.dim);
|
|
ctx.fillStyle = this.samplePixels[i];
|
|
ctx.fillRect(x, y, 1, 1);
|
|
}
|
|
} else {
|
|
canvas.width = 3;
|
|
canvas.height = 3;
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
for (let i = 0; i < 3 * 3; i++) {
|
|
//
|
|
const x = i % 3;
|
|
const y = Math.floor(i / 3);
|
|
ctx.fillStyle = this.trainingImage.pixels[subImageIdx].subPixels[i];
|
|
ctx.fillRect(x, y, 1, 1);
|
|
}
|
|
}
|
|
|
|
this.previewElement.style.backgroundImage = `url(${canvas.toDataURL()})`;
|
|
this.previewElement.style.backgroundSize = "100%";
|
|
}
|
|
|
|
updateTrainingGrid() {
|
|
for (let i = 0; i < this.samplePixels.length; i++) {
|
|
this.updateTrainingCell(i);
|
|
}
|
|
}
|
|
|
|
updateTrainingCell(i) {
|
|
const dim = this.dim;
|
|
const x = i % dim;
|
|
const y = Math.floor(i / dim);
|
|
|
|
const colorAt = (dX, dY) => {
|
|
const _x = (x + dim + dX) % dim; // add dim before modulo because JS modulo allows negative results
|
|
const _y = (y + dim + dY) % dim;
|
|
return this.samplePixels[_y * dim + _x];
|
|
};
|
|
|
|
this.trainingImage.pixels[i] = new TrainingCell([
|
|
// | neighbour
|
|
// ---------------------|-----------
|
|
colorAt(-1, -1), // | northwest
|
|
colorAt(0, -1), // | north
|
|
colorAt(1, -1), // | northeast
|
|
|
|
colorAt(-1, 0), // | east
|
|
this.samplePixels[i], //| -- self --
|
|
colorAt(1, 0), // | west
|
|
|
|
colorAt(-1, 1), // | southwest
|
|
colorAt(0, 1), // | south
|
|
colorAt(1, 1), // | southeast
|
|
]);
|
|
}
|
|
|
|
exportAsImage() {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = this.dim; // 9x upscale
|
|
canvas.height = this.dim;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
|
for (let i = 0; i < this.dim ** 2; i++) {
|
|
const x = i % this.dim;
|
|
const y = Math.floor(i / this.dim);
|
|
ctx.fillStyle = this.samplePixels[i];
|
|
ctx.fillRect(x, y, 1, 1);
|
|
}
|
|
|
|
const link = document.createElement("a");
|
|
link.download = `pixel-art-${this.dim}x${this.dim}.png`;
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
}
|
|
|
|
exportAsData() {
|
|
const data = JSON.stringify(this.samplePixels);
|
|
const blob = new Blob([data], { type: "application/json" });
|
|
const link = document.createElement("a");
|
|
link.download = "pixel-art-data.json";
|
|
link.href = URL.createObjectURL(blob);
|
|
link.click();
|
|
}
|
|
|
|
importData() {
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = ".json";
|
|
input.onchange = (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.target.result);
|
|
if (Array.isArray(data) && data.length === this.dim ** 2) {
|
|
this.samplePixels = data;
|
|
this.createGrid();
|
|
this.updatePreview();
|
|
} else {
|
|
alert("Invalid data format!");
|
|
}
|
|
} catch (error) {
|
|
alert("Error reading file!" + error);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
};
|
|
input.click();
|
|
}
|
|
|
|
waveFunction() {
|
|
this.updateTrainingGrid();
|
|
const wfcImg = new WfcGrid(
|
|
// this.previewElement.clientWidth,
|
|
// this.previewElement.clientHeight,
|
|
30,
|
|
30,
|
|
this.trainingImage.clone(),
|
|
new Xorshift32(Date.now()),
|
|
);
|
|
|
|
// Could not "collapse" the image.
|
|
// We should reset and try again?
|
|
let its = wfcImg.collapse();
|
|
|
|
if (its > 0) {
|
|
throw new Error(`Function Collapse failed with ${its} iterations left to go`);
|
|
}
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = wfcImg.width;
|
|
canvas.height = wfcImg.height;
|
|
|
|
// debug values
|
|
canvas.width = 30;
|
|
canvas.height = 30;
|
|
//
|
|
const ctx = canvas.getContext("2d");
|
|
let i = 0;
|
|
for (let y = 0; y < canvas.height; y++) {
|
|
for (let x = 0; x < canvas.width; x++) {
|
|
console.log("pix");
|
|
const cell = wfcImg.cells[i++];
|
|
if (cell.valid) {
|
|
ctx.fillStyle = "magenta";
|
|
ctx.fillRect(x, y, 1, 1);
|
|
}
|
|
}
|
|
}
|
|
this.previewElement.style.backgroundImage = `url(${canvas.toDataURL()})`;
|
|
this.previewElement.style.backgroundSize = "100%";
|
|
}
|
|
}
|
|
const base_palette = [
|
|
"#000",
|
|
"#007",
|
|
"#00F",
|
|
"#070",
|
|
"#077",
|
|
"#0F0",
|
|
"#0FF",
|
|
"#0f0",
|
|
"#700",
|
|
"#707",
|
|
"#770",
|
|
"#F00",
|
|
"#F0F",
|
|
"#FF0",
|
|
];
|
|
|
|
const palette = new Array(base_palette.length * 2);
|
|
|
|
base_palette.forEach((color, idx) => {
|
|
//
|
|
// Calc inverted color
|
|
const invR = 15 - Number.parseInt(color.substr(1, 1), 16);
|
|
const invG = 15 - Number.parseInt(color.substr(2, 1), 16);
|
|
const invB = 15 - Number.parseInt(color.substr(3, 1), 16);
|
|
const invColor = sprintf("#%x%x%x", invR, invG, invB);
|
|
|
|
// populate the palette
|
|
palette[idx] = color;
|
|
palette[7 * 4 - 1 - idx] = invColor;
|
|
});
|
|
|
|
window.painter = new PainApp(
|
|
9,
|
|
palette,
|
|
document.getElementById("gridContainer"), //
|
|
document.getElementById("colorPalette"), //
|
|
document.getElementById("preview"), //
|
|
);
|
|
|
|
// share window.dim with the HTML and CSS
|
|
document.getElementsByTagName("body")[0].style.setProperty("--dim", window.painter.dim);
|