// ============================================================
// Procedural SVG paintings for the Monet page.
//
// Each painting is a stylized homage — not a reproduction —
// rendered from seeded noise so it's deterministic and looks
// identical on every load. Zero external dependencies, so the
// page never depends on a CDN, museum CORS policy, etc.
//
// Exposed via window.MonetPaintings = { monet, vangogh, dali,
// shanshui, hokusai }.
// ============================================================
function mulberry32(seed) {
return function () {
let t = (seed += 0x6D2B79F5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
const W = 1600, H = 1000;
function strokes(rnd, n, cfg) {
const out = [];
for (let i = 0; i < n; i++) {
const x = cfg.xMin + rnd() * (cfg.xMax - cfg.xMin);
const y = cfg.yMin + rnd() * (cfg.yMax - cfg.yMin);
const len = cfg.lenMin + rnd() * (cfg.lenMax - cfg.lenMin);
const wdt = cfg.wMin + rnd() * (cfg.wMax - cfg.wMin);
const ang = cfg.angMin + rnd() * (cfg.angMax - cfg.angMin);
const color = cfg.palette[Math.floor(rnd() * cfg.palette.length)];
const op = cfg.opMin + rnd() * (cfg.opMax - cfg.opMin);
out.push({ x, y, len, wdt, ang, color, op });
}
return out;
}
function Stroke({ s }) {
const rad = s.ang * Math.PI / 180;
return (
);
}
// ---------- 1. Monet: Impression, Sunrise ----------
function MonetPainting({ sunY = 0 }) {
const rnd = React.useMemo(() => mulberry32(42), []);
const sky = ["#d9c9b1", "#d7bca4", "#c9a997", "#b89a8e", "#a69896"];
const cloud = ["#e7d6c2", "#d6c4b4", "#c9b3a0"];
const waterDark = ["#4f5660", "#59616d", "#6a7280", "#7b8390"];
const waterLite = ["#b6bcc3", "#c9ccd1", "#a7adb5"];
const sunOrange = ["#e8703a", "#f08648", "#d8642c", "#ec8a55"];
const warmDab = ["#f2a878", "#e78656", "#d9653a"];
const all = React.useMemo(() => [
...strokes(rnd, 260, { xMin:0, xMax:W, yMin:0, yMax:540, lenMin:60, lenMax:180, wMin:6, wMax:14, angMin:-6, angMax:6, palette:sky, opMin:0.5, opMax:0.95 }),
...strokes(rnd, 80, { xMin:0, xMax:W, yMin:60, yMax:340, lenMin:120, lenMax:260, wMin:8, wMax:18, angMin:-4, angMax:4, palette:cloud, opMin:0.3, opMax:0.7 }),
...strokes(rnd, 220, { xMin:0, xMax:W, yMin:560, yMax:1000, lenMin:70, lenMax:200, wMin:6, wMax:14, angMin:-3, angMax:3, palette:waterDark, opMin:0.6, opMax:0.95 }),
...strokes(rnd, 140, { xMin:0, xMax:W, yMin:580, yMax:980, lenMin:50, lenMax:140, wMin:4, wMax:10, angMin:-3, angMax:3, palette:waterLite, opMin:0.4, opMax:0.8 }),
...Array.from({ length: 120 }, () => {
const y = 620 + rnd() * 340;
const x = 1020 + (rnd() - 0.5) * 220;
return { x, y, len: 40 + rnd() * 120, wdt: 4 + rnd() * 8, ang: (rnd() - 0.5) * 6, color: sunOrange[Math.floor(rnd() * sunOrange.length)], op: 0.65 + rnd() * 0.3 };
}),
...strokes(rnd, 60, { xMin:400, xMax:1500, yMin:480, yMax:600, lenMin:30, lenMax:90, wMin:5, wMax:10, angMin:-4, angMax:4, palette:warmDab, opMin:0.45, opMax:0.8 }),
], [rnd]);
return (
);
}
// ---------- 2. Van Gogh: The Starry Night ----------
function VanGoghPainting() {
const rnd = React.useMemo(() => mulberry32(7), []);
const darkBlue = ["#0f1e4a", "#152b66", "#1e3b7a", "#2a4a8c"];
const midBlue = ["#3c5aa6", "#4a6abf", "#5a7dd0"];
const liteBlue = ["#88a6e0", "#a8bce8", "#c4d2ee"];
const hills = ["#1a3450", "#203b5a", "#274468"];
const spiralPts = (cx, cy, r0, turns, steps) => {
const arr = [];
for (let i = 0; i < steps; i++) {
const t = (i / steps) * turns * Math.PI * 2;
const r = r0 + t * 6;
arr.push([cx + Math.cos(t) * r, cy + Math.sin(t) * r]);
}
return "M " + arr.map(p => p.join(",")).join(" L ");
};
const skyStrokes = React.useMemo(() => [
...strokes(rnd, 380, { xMin:0, xMax:W, yMin:0, yMax:720, lenMin:50, lenMax:140, wMin:8, wMax:18, angMin:-40, angMax:40, palette:darkBlue, opMin:0.6, opMax:0.95 }),
...strokes(rnd, 220, { xMin:0, xMax:W, yMin:0, yMax:720, lenMin:40, lenMax:100, wMin:5, wMax:12, angMin:-80, angMax:80, palette:midBlue, opMin:0.5, opMax:0.85 }),
...strokes(rnd, 120, { xMin:0, xMax:W, yMin:0, yMax:680, lenMin:30, lenMax:80, wMin:4, wMax:10, angMin:-60, angMax:60, palette:liteBlue, opMin:0.4, opMax:0.75 }),
], [rnd]);
const hillStrokes = React.useMemo(() =>
strokes(rnd, 220, { xMin:0, xMax:W, yMin:680, yMax:1000, lenMin:40, lenMax:120, wMin:6, wMax:14, angMin:-20, angMax:20, palette:hills, opMin:0.7, opMax:0.95 }),
[rnd]);
const stars = React.useMemo(() => {
const arr = [];
for (let i = 0; i < 12; i++) {
arr.push({ x: 50 + rnd() * (W - 100), y: 40 + rnd() * 600, r: 10 + rnd() * 22 });
}
return arr;
}, [rnd]);
return (
);
}
// ---------- 3. Dalí: The Persistence of Memory ----------
function DaliPainting() {
return (
);
}
// ---------- 4. Fan Kuan: Travelers Among Mountains and Streams ----------
function ShanShuiPainting() {
const rnd = React.useMemo(() => mulberry32(11), []);
const ink = ["#1a1a1a", "#2a2420", "#3a3228", "#4a4038"];
const paperBase = "#e8e0c8";
const peakStrokes = React.useMemo(() =>
strokes(rnd, 520, { xMin:500, xMax:1100, yMin:80, yMax:700, lenMin:10, lenMax:30, wMin:1, wMax:3, angMin:70, angMax:110, palette:ink, opMin:0.35, opMax:0.75 }),
[rnd]);
const texturePoints = React.useMemo(() => {
const arr = [];
for (let i = 0; i < 400; i++) {
arr.push({ x: 100 + rnd() * 1400, y: 780 + rnd() * 220, r: 0.6 + rnd() * 1.2, op: 0.2 + rnd() * 0.4 });
}
return arr;
}, [rnd]);
return (
);
}
// ---------- 5. Hokusai: The Great Wave off Kanagawa ----------
function HokusaiPainting() {
const rnd = React.useMemo(() => mulberry32(23), []);
return (
);
}
window.MonetPaintings = {
monet: MonetPainting,
vangogh: VanGoghPainting,
dali: DaliPainting,
shanshui: ShanShuiPainting,
hokusai: HokusaiPainting,
};