fixed layout

scripts/thumbnails.js

@@ -0,0 +1,111 @@
+import { createNoise2D } from "simplex-noise";
+import { createCanvas, ImageData } from "canvas";
+import alea from "alea";
+
+// The hash is the name of the article e.g. "Recommended Godot Editor Settings"
+export function generateThumbnail(hash) {
+	var rng = alea(hash);
+	console.log(`Generating thumbnail for \"${hash}\" with ${rng()}`);
+	var width = 800;
+	var height = 300;
+
+	var noise2D = createNoise2D(rng);
+
+	const canvas = createCanvas(width, height);
+	const ctx = canvas.getContext("2d");
+	const imageData = ctx.createImageData(width, height);
+	const paletteSettings = getRandomPaletteValues(rng());
+
+	var dist = 0;
+	for (let x = 0; x < width; x++) {
+		for (let y = 0; y < height; y++) {
+			const value = noise2D(x / 50, y / 50);
+			var threshold = Math.floor((value + 1) * 128);
+			threshold = value > 0.2 ? 128 : 0;
+
+			const index = (x + y * width) * 4;
+
+			const dx = x - width / 2;
+			const dy = y - height / 2;
+			const distance = Math.sqrt(dx * dx + dy * dy); // Euclidean distance
+
+			// Normalize the distance to be between 0 and 1 (for a radial gradient effect)
+			const maxDistance = Math.sqrt(
+				((width / 2) * width) / 2 + ((height / 2) * height) / 2
+			);
+
+			const t = (distance / maxDistance) * 3.0 * Math.sin(dist);
+			dist += 0.00001;
+
+			const a = [0.5, 0.5, 0.5];
+			const b = [0.5, 0.5, 0.5];
+			const c = [1.0, 1.0, 1.0];
+			const d = [0.0, 0.1, 0.2];
+
+			const palette = getPalette(
+				t,
+				paletteSettings.a,
+				paletteSettings.b,
+				paletteSettings.c,
+				paletteSettings.d
+			);
+
+			if (threshold == 0) {
+				imageData.data[index] = palette[0] * 0.05; // Red
+				imageData.data[index + 1] = palette[1] * 0.09; // Green
+				imageData.data[index + 2] = palette[2] * 0.3; // Blue
+				imageData.data[index + 3] = 255; // Alpha
+			} else {
+				imageData.data[index] = palette[0]; // Red
+				imageData.data[index + 1] = palette[1]; // Green
+				imageData.data[index + 2] = palette[2]; // Blue
+				imageData.data[index + 3] = 255; // Alpha
+			}
+		}
+	}
+
+	ctx.putImageData(imageData, 0, 0);
+	return canvas.toDataURL("image/jpeg");
+}
+
+function getRandomFloat(seed, min, max) {
+	return parseFloat((seed * (max - min) + min).toFixed(2));
+}
+
+function getRandomPaletteValues(seed) {
+	// Generate random arrays for a, b, c, and d
+	const a = [
+		getRandomFloat(seed, 0.5, 1.0),
+		getRandomFloat(seed, 0.5, 1.0),
+		getRandomFloat(seed, 0.5, 1.0),
+	];
+	const b = [
+		getRandomFloat(seed, 0.2, 0.8),
+		getRandomFloat(seed, 0.2, 0.8),
+		getRandomFloat(seed, 0.2, 0.8),
+	];
+	const c = [
+		getRandomFloat(seed, 0.0, 2.0),
+		getRandomFloat(seed, 0.0, 2.0),
+		getRandomFloat(seed, 0.0, 2.0),
+	];
+	const d = [
+		getRandomFloat(seed, 0.0, 1.0),
+		getRandomFloat(seed, 0.0, 1.0),
+		getRandomFloat(seed, 0.0, 1.0),
+	];
+
+	return { a, b, c, d };
+}
+
+function getPalette(t, a, b, c, d) {
+	const result = [];
+
+	for (let i = 0; i < 3; i++) {
+		// Apply the formula element-wise to each component of the vectors
+		result[i] =
+			255 * (a[i] + b[i] * Math.cos(2.0 * Math.PI * (c[i] * t + d[i])));
+	}
+
+	return result;
+}