Add 3D convolution and kernel functions

Author: xcontcom

3d/cnn3d.js

@@ -0,0 +1,340 @@
+let iterations = 5;
+let pad = 1;
+
+let kernelParams3D = {
+	corners: 0,
+	edges: 0,
+	faces: 0,
+	center: 0
+};
+
+let kernel27 = [];
+
+let field3DRaw = []; // [x][y][z]
+
+/* ---------- Math ---------- */
+
+function activation(t) {
+	return t;
+}
+
+/* ---------- 3D Kernel (27 from 4 sliders) ---------- */
+
+function buildKernel3D({ center, faces, edges, corners }) {
+	const K = [];
+
+	for (let dz = -1; dz <= 1; dz++)
+	for (let dy = -1; dy <= 1; dy++)
+	for (let dx = -1; dx <= 1; dx++) {
+
+		const ax = Math.abs(dx);
+		const ay = Math.abs(dy);
+		const az = Math.abs(dz);
+		const s = ax + ay + az;
+
+		let v;
+		if (s === 0) v = center;      // 1
+		else if (s === 1) v = faces;  // 6
+		else if (s === 2) v = edges;  // 12
+		else v = corners;             // 8
+
+		K.push(v);
+	}
+
+	return K; // length 27
+}
+
+/* ---------- 3D Convolution ---------- */
+
+function convolution3D(field, kernel27) {
+	const n = field.length;
+	const out = new Array(n);
+
+	for (let x = 0; x < n; x++) {
+		out[x] = new Array(n);
+
+		for (let y = 0; y < n; y++) {
+			out[x][y] = new Array(n);
+
+			for (let z = 0; z < n; z++) {
+				let s = 0;
+				let i = 0;
+
+				for (let dx = -1; dx <= 1; dx++)
+				for (let dy = -1; dy <= 1; dy++)
+				for (let dz = -1; dz <= 1; dz++) {
+
+					const xx = (x + dx + n) % n;
+					const yy = (y + dy + n) % n;
+					const zz = (z + dz + n) % n;
+
+					s += field[xx][yy][zz] * kernel27[i++];
+				}
+
+				out[x][y][z] = activation(s);
+			}
+		}
+	}
+
+	return out;
+}
+
+/* ---------- 3D Padding ---------- */
+
+function padding3D(field, k) {
+	// base case
+	if (field.length === 1) {
+		// make a minimal 2×2×2
+		return [
+			[[1, 0], [0, 0]],
+			[[0, 0], [0, 0]]
+		];
+	}
+
+	const n = field.length;
+	const nn = n * 2;
+
+	const out = new Array(nn);
+	for (let x = 0; x < nn; x++) {
+		out[x] = new Array(nn);
+		for (let y = 0; y < nn; y++) {
+			out[x][y] = new Array(nn).fill(0);
+		}
+	}
+
+	for (let x = 0; x < n; x++)
+	for (let y = 0; y < n; y++)
+	for (let z = 0; z < n; z++) {
+		const v = field[x][y][z];
+		const vv = k * v;
+
+		for (let dx = 0; dx <= 1; dx++)
+		for (let dy = 0; dy <= 1; dy++)
+		for (let dz = 0; dz <= 1; dz++) {
+			out[x * 2 + dx][y * 2 + dy][z * 2 + dz] =
+				(dx || dy || dz) ? vv : v;
+		}
+	}
+
+	return out;
+}
+
+/* ---------- UI helpers ---------- */
+
+function getIterations() {
+	const el = document.getElementById("iterations");
+	let it = parseInt(el.value, 10);
+	if (!Number.isFinite(it)) it = 5;
+
+	// Hard clamp to prevent accidental nuclear memory use.
+	// 2^7 = 128 => 2,097,152 cells (still heavy but survivable)
+	// 2^8 = 256 => 16,777,216 cells (too much for nested arrays). But manageable.
+	it = Math.max(1, Math.min(8, it));
+	el.value = it;
+	return it;
+}
+
+function setRangeSliderDefaults(id) {
+	const s = document.getElementById(id);
+	s.min = -1;
+	s.max = 1;
+	s.step = 0.001;
+}
+
+/* ---------- Main regen (3D) ---------- */
+
+function regenerateField3DKeepCore() {
+	iterations = getIterations();
+
+	kernel27 = buildKernel3D({
+		center: kernelParams3D.center,
+		faces: kernelParams3D.faces,
+		edges: kernelParams3D.edges,
+		corners: kernelParams3D.corners
+	});
+
+	let field = [[[1]]];
+
+	for (let i = 0; i < iterations; i++) {
+		field = padding3D(field, pad);
+		field = convolution3D(field, kernel27);
+	}
+
+	field3DRaw = field;
+
+	// update Z slider limits
+	const n = field3DRaw.length;
+	const zSlice = document.getElementById("zSlice");
+	const zLabel = document.getElementById("zLabel");
+	const zMaxLabel = document.getElementById("zMaxLabel");
+
+	zSlice.max = Math.max(0, n - 1);
+	if (parseInt(zSlice.value, 10) > n - 1) zSlice.value = String(n - 1);
+
+	zLabel.textContent = zSlice.value;
+	zMaxLabel.textContent = String(Math.max(0, n - 1));
+
+	drawCurrentSlice();
+	dumpKernelLine3D();
+}
+
+/* ---------- Rendering ---------- */
+
+function drawCurrentSlice() {
+	const zSlice = parseInt(document.getElementById("zSlice").value, 10) || 0;
+	document.getElementById("zLabel").textContent = String(zSlice);
+
+	drawSlice(field3DRaw, zSlice);
+	dumpKernelLine3D(); // update min/max for this Z too
+}
+
+function drawSlice(field, z) {
+	const canvas = document.getElementById("myCanvas");
+	const px = parseInt(document.getElementById("pixelSize").value, 10);
+
+	const n = field.length;
+	canvas.width = n * px;
+	canvas.height = n * px;
+
+	const ctx = canvas.getContext("2d");
+	const mode = document.getElementById("colorMode").value;
+
+	// per-slice normalization (simple and predictable)
+	let lo = Infinity;
+	let hi = -Infinity;
+
+	if (mode === "grayscale") {
+		for (let x = 0; x < n; x++)
+			for (let y = 0; y < n; y++) {
+				const v = field[x][y][z];
+				if (v < lo) lo = v;
+				if (v > hi) hi = v;
+			}
+		if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi === lo) {
+			lo = 0; hi = 1;
+		}
+	}
+
+	for (let x = 0; x < n; x++) {
+		for (let y = 0; y < n; y++) {
+
+			const raw = field[x][y][z];
+
+			let color = "#000";
+
+			if (mode === "grayscale") {
+				const t = (raw - lo) / (hi - lo + 1e-9);
+				const g = Math.floor(Math.max(0, Math.min(1, t)) * 255);
+				color = `rgb(${g},${g},${g})`;
+			}
+			else if (mode === "mod4") {
+				const s = Math.floor(raw);
+				const r = ((s % 4) + 4) % 4;
+				color = (r === 0 || r === 1) ? "#000" : "#fff";
+			}
+			else if (mode === "alleycat") {
+				const s = Math.floor(raw);
+				const p = ["#000", "#5ff", "#f5f", "#fff"];
+				color = p[((s % 4) + 4) % 4];
+			}
+
+			ctx.fillStyle = color;
+			ctx.fillRect(x * px, y * px, px, px);
+		}
+	}
+}
+
+function dumpKernelLine3D() {
+	const n = field3DRaw.length;
+	const z = parseInt(document.getElementById("zSlice").value, 10) || 0;
+
+	let min = Infinity;
+	let max = -Infinity;
+
+	for (let x = 0; x < n; x++)
+		for (let y = 0; y < n; y++) {
+			const v = field3DRaw[x][y][z];
+			if (v < min) min = v;
+			if (v > max) max = v;
+		}
+
+	const kern =
+		`corners=${kernelParams3D.corners.toFixed(3)} ` +
+		`edges=${kernelParams3D.edges.toFixed(3)} ` +
+		`faces=${kernelParams3D.faces.toFixed(3)} ` +
+		`center=${kernelParams3D.center.toFixed(3)}`;
+
+	document.getElementById("kernelDump").textContent =
+		`iter=${iterations} size=${n}×${n}×${n} z=${z} ` +
+		`min=${min.toFixed(3)} max=${max.toFixed(3)} ` +
+		`pad=${pad} ` +
+		`kernel3D(${kern})`;
+}
+
+/* ---------- UI wiring ---------- */
+
+function initUI() {
+	// slider defaults
+	setRangeSliderDefaults("kCorners");
+	setRangeSliderDefaults("kEdges");
+	setRangeSliderDefaults("kFaces");
+	setRangeSliderDefaults("kCenter");
+
+	// kernel sliders
+	document.getElementById("kCorners").oninput = e => {
+		kernelParams3D.corners = parseFloat(e.target.value);
+		regenerateField3DKeepCore();
+	};
+	document.getElementById("kEdges").oninput = e => {
+		kernelParams3D.edges = parseFloat(e.target.value);
+		regenerateField3DKeepCore();
+	};
+	document.getElementById("kFaces").oninput = e => {
+		kernelParams3D.faces = parseFloat(e.target.value);
+		regenerateField3DKeepCore();
+	};
+	document.getElementById("kCenter").oninput = e => {
+		kernelParams3D.center = parseFloat(e.target.value);
+		regenerateField3DKeepCore();
+	};
+
+	// globals
+	document.getElementById("iterations").oninput = regenerateField3DKeepCore;
+	document.getElementById("pixelSize").oninput = drawCurrentSlice;
+	document.getElementById("colorMode").onchange = drawCurrentSlice;
+
+	// z slicer
+	document.getElementById("zSlice").oninput = drawCurrentSlice;
+
+	// pad mode
+	document.querySelectorAll('input[name="padmode"]').forEach(r => {
+		r.addEventListener('change', () => {
+			pad = Number(r.value);
+			regenerateField3DKeepCore();
+			console.log('pad changed to', pad);
+		});
+	});
+
+	// refresh seed
+	document.getElementById("refreshBtn").onclick = refreshSeed;
+}
+
+/* ---------- Seed ---------- */
+
+function refreshSeed() {
+	function rf() { return Math.random() * 2 - 1; }
+
+	kernelParams3D = {
+		corners: rf(),
+		edges: rf(),
+		faces: rf(),
+		center: rf()
+	};
+
+	document.getElementById("kCorners").value = kernelParams3D.corners;
+	document.getElementById("kEdges").value = kernelParams3D.edges;
+	document.getElementById("kFaces").value = kernelParams3D.faces;
+	document.getElementById("kCenter").value = kernelParams3D.center;
+
+	regenerateField3DKeepCore();
+}