111 lines
2.9 KiB
JavaScript
111 lines
2.9 KiB
JavaScript
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;
|
|
}
|