hollorol/rolandhollos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

content upload

Browse Source
This commit is contained in:
hollorol
2026-08-08 13:48:05 +02:00
parent 72d60c5527
commit cd87f62263
7 changed files with 2463 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/background.js
+104
View File
@@ -0,0 +1,104 @@
const LEAF_PATHS = {
ovate: {
blade: "M 0 0.5 Q -0.32 0.05 0 -0.5 Q 0.32 0.05 0 0.5 Z",
veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52",
},
lanceolate: {
blade: "M 0 0.5 Q -0.1524 0.0238 0 -0.5 Q 0.1524 0.0238 0 0.5 Z",
veins: "M 0 0.5 L 0 -0.4524 M 0 0.2905 L -0.3333 0.1381 M 0 0.2905 L 0.3333 0.1381 M 0 0.1381 L -0.3333 -0.0143 M 0 0.1381 L 0.3333 -0.0143 M 0 -0.0143 L -0.3333 -0.1667 M 0 -0.0143 L 0.3333 -0.1667 M 0 -0.1667 L -0.3333 -0.319 M 0 -0.1667 L 0.3333 -0.319 M 0 -0.319 L -0.3333 -0.4714 M 0 -0.319 L 0.3333 -0.4714",
},
cordate: {
blade: "M 0 -0.5 C 0.5412 -0.1941 0.4235 0.5588 0.0706 0.4176 Q 0 0.5824 -0.0706 0.4176 C -0.4235 0.5588 -0.5412 -0.1941 0 -0.5 Z",
veins: "M 0 0.4412 L 0 -0.5 M 0 0.2341 L -0.4118 0.0459 M 0 0.2341 L 0.4118 0.0459 M 0 0.0835 L -0.4118 -0.1047 M 0 0.0835 L 0.4118 -0.1047 M 0 -0.0671 L -0.4118 -0.2553 M 0 -0.0671 L 0.4118 -0.2553 M 0 -0.2176 L -0.4118 -0.4059 M 0 -0.2176 L 0.4118 -0.4059 M 0 -0.3682 L -0.4118 -0.5565 M 0 -0.3682 L 0.4118 -0.5565",
},
serrate: {
blade: "M 0 0.5 L -0.1026 0.3889 L -0.1504 0.2778 L -0.2598 0.1667 L -0.2304 0.0556 L -0.2954 -0.0556 L -0.2026 -0.1667 L -0.1928 -0.2778 L -0.08 -0.3889 L 0 -0.5 L 0 -0.5 L 0.08 -0.3889 L 0.1928 -0.2778 L 0.2026 -0.1667 L 0.2954 -0.0556 L 0.2304 0.0556 L 0.2598 0.1667 L 0.1504 0.2778 L 0.1026 0.3889 Z",
veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52",
},
maple: { // Acer pseudoplatanus — 5 palmate lobes
blade: "M 0 -0.5 L 0.1119 -0.2575 L 0.1052 -0.02 L 0.3016 -0.1953 L 0.4915 -0.2399 L 0.3528 0.0221 L 0.2627 0.141 L 0.5266 0.1572 L 0.5691 0.2691 L 0.3803 0.3927 L 0.2546 0.468 L 0.1228 0.5 L 0 0.4691 L -0.1228 0.5 L -0.2546 0.468 L -0.3803 0.3927 L -0.5691 0.2691 L -0.5266 0.1572 L -0.2627 0.141 L -0.3528 0.0221 L -0.4915 -0.2399 L -0.3016 -0.1953 L -0.1052 -0.02 L -0.1119 -0.2575 Z",
veins: "M 0 0.4691 L 0 -0.5 M 0 0.4691 L 0.4915 -0.2399 M 0 0.4691 L 0.5691 0.2691 M 0 0.4691 L -0.4915 -0.2399 M 0 0.4691 L -0.5691 0.2691",
},
oak: { // Quercus robur — obovate, rounded lobes
blade: "M 0 0.5 L 0.001 0.4889 L 0.003 0.4778 L 0.0062 0.4667 L 0.0109 0.4556 L 0.0173 0.4444 L 0.0253 0.4333 L 0.0343 0.4222 L 0.0437 0.4111 L 0.0524 0.4 L 0.0596 0.3889 L 0.0644 0.3778 L 0.0664 0.3667 L 0.0656 0.3556 L 0.0626 0.3444 L 0.0584 0.3333 L 0.0546 0.3222 L 0.0527 0.3111 L 0.0544 0.3 L 0.0612 0.2889 L 0.0737 0.2778 L 0.092 0.2667 L 0.1152 0.2556 L 0.1417 0.2444 L 0.1692 0.2333 L 0.195 0.2222 L 0.2164 0.2111 L 0.231 0.2 L 0.2372 0.1889 L 0.2343 0.1778 L 0.223 0.1667 L 0.2051 0.1556 L 0.1832 0.1444 L 0.161 0.1333 L 0.1422 0.1222 L 0.1304 0.1111 L 0.1285 0.1 L 0.1381 0.0889 L 0.1594 0.0778 L 0.1911 0.0667 L 0.2304 0.0556 L 0.2732 0.0444 L 0.315 0.0333 L 0.351 0.0222 L 0.377 0.0111 L 0.39 0 L 0.3884 -0.0111 L 0.3724 -0.0222 L 0.3443 -0.0333 L 0.3076 -0.0444 L 0.2672 -0.0556 L 0.2283 -0.0667 L 0.1962 -0.0778 L 0.1751 -0.0889 L 0.1679 -0.1 L 0.1756 -0.1111 L 0.1973 -0.1222 L 0.2301 -0.1333 L 0.2699 -0.1444 L 0.3114 -0.1556 L 0.3492 -0.1667 L 0.3782 -0.1778 L 0.3947 -0.1889 L 0.3965 -0.2 L 0.3832 -0.2111 L 0.3564 -0.2222 L 0.3192 -0.2333 L 0.2761 -0.2444 L 0.2318 -0.2556 L 0.1913 -0.2667 L 0.1585 -0.2778 L 0.1362 -0.2889 L 0.1254 -0.3 L 0.1257 -0.3111 L 0.135 -0.3222 L 0.1502 -0.3333 L 0.1673 -0.3444 L 0.1826 -0.3556 L 0.1928 -0.3667 L 0.1954 -0.3778 L 0.1896 -0.3889 L 0.1754 -0.4 L 0.1545 -0.4111 L 0.129 -0.4222 L 0.1018 -0.4333 L 0.0756 -0.4444 L 0.0524 -0.4556 L 0.0335 -0.4667 L 0.0192 -0.4778 L 0.0086 -0.4889 L 0 -0.5 L 0 -0.5 L -0.0086 -0.4889 L -0.0192 -0.4778 L -0.0335 -0.4667 L -0.0524 -0.4556 L -0.0756 -0.4444 L -0.1018 -0.4333 L -0.129 -0.4222 L -0.1545 -0.4111 L -0.1754 -0.4 L -0.1896 -0.3889 L -0.1954 -0.3778 L -0.1928 -0.3667 L -0.1826 -0.3556 L -0.1673 -0.3444 L -0.1502 -0.3333 L -0.135 -0.3222 L -0.1257 -0.3111 L -0.1254 -0.3 L -0.1362 -0.2889 L -0.1585 -0.2778 L -0.1913 -0.2667 L -0.2318 -0.2556 L -0.2761 -0.2444 L -0.3192 -0.2333 L -0.3564 -0.2222 L -0.3832 -0.2111 L -0.3965 -0.2 L -0.3947 -0.1889 L -0.3782 -0.1778 L -0.3492 -0.1667 L -0.3114 -0.1556 L -0.2699 -0.1444 L -0.2301 -0.1333 L -0.1973 -0.1222 L -0.1756 -0.1111 L -0.1679 -0.1 L -0.1751 -0.0889 L -0.1962 -0.0778 L -0.2283 -0.0667 L -0.2672 -0.0556 L -0.3076 -0.0444 L -0.3443 -0.0333 L -0.3724 -0.0222 L -0.3884 -0.0111 L -0.39 0 L -0.377 0.0111 L -0.351 0.0222 L -0.315 0.0333 L -0.2732 0.0444 L -0.2304 0.0556 L -0.1911 0.0667 L -0.1594 0.0778 L -0.1381 0.0889 L -0.1285 0.1 L -0.1304 0.1111 L -0.1422 0.1222 L -0.161 0.1333 L -0.1832 0.1444 L -0.2051 0.1556 L -0.223 0.1667 L -0.2343 0.1778 L -0.2372 0.1889 L -0.231 0.2 L -0.2164 0.2111 L -0.195 0.2222 L -0.1692 0.2333 L -0.1417 0.2444 L -0.1152 0.2556 L -0.092 0.2667 L -0.0737 0.2778 L -0.0612 0.2889 L -0.0544 0.3 L -0.0527 0.3111 L -0.0546 0.3222 L -0.0584 0.3333 L -0.0626 0.3444 L -0.0656 0.3556 L -0.0664 0.3667 L -0.0644 0.3778 L -0.0596 0.3889 L -0.0524 0.4 L -0.0437 0.4111 L -0.0343 0.4222 L -0.0253 0.4333 L -0.0173 0.4444 L -0.0109 0.4556 L -0.0062 0.4667 L -0.003 0.4778 L -0.001 0.4889 L 0 0.5 Z",
veins: "M 0 0.5 L 0 -0.5 M 0 0.42 L 0.0445 0.37 M 0 0.42 L -0.0445 0.37 M 0 0.22 L 0.1963 0.17 M 0 0.22 L -0.1963 0.17 M 0 0.02 L 0.3315 -0.03 M 0 0.02 L -0.3315 -0.03 M 0 -0.18 L 0.337 -0.23 M 0 -0.18 L -0.337 -0.23 M 0 -0.38 L 0.1491 -0.43 M 0 -0.38 L -0.1491 -0.43",
},
svg_green: { // hand-drawn in Inkscape (leafs.svg) — pointed almond
blade: "M 0.0514 0.4973 C -0.1305 0.5352 -0.3584 0.182 -0.2801 -0.0684 C -0.2017 -0.3188 -0.0818 -0.5445 0.0791 -0.4927 C 0.2399 -0.4408 0.2399 -0.3306 0.2848 -0.1265 C 0.3298 0.0775 0.2332 0.4594 0.0514 0.4973 Z",
veins: "M 0.0193 0.4898 L 0.0442 -0.504 M 0.0316 -0.2053 L 0.2236 -0.354 M 0.0271 -0.0559 L 0.262 -0.1777 M 0.0259 0.0672 L 0.2761 -0.0601 M 0.028 0.2016 L 0.285 0.0544 M 0.0222 0.3163 L 0.2589 0.1954 M 0.0184 0.4021 L 0.229 0.2936 M 0.0348 -0.2121 L -0.1572 -0.3608 M 0.0357 -0.0613 L -0.2182 -0.1984 M 0.036 0.068 L -0.2631 -0.0951 M 0.0225 0.1977 L -0.2901 0.0215 M 0.0273 0.3232 L -0.2738 0.1665 M 0.0187 0.402 L -0.2262 0.2735",
},
svg_willow: { // hand-drawn — narrow willow-like blade
blade: "M -0.0984 0.5 C -0.0984 0.5 -0.2228 0.3124 -0.0792 -0.1154 C 0.0643 -0.5433 0.0739 -0.4987 0.0739 -0.4987 C 0.0739 -0.4987 0.2377 -0.1933 0.0797 0.1406 C -0.0782 0.4745 -0.0984 0.5 -0.0984 0.5 Z",
veins: "M -0.1045 0.4845 C -0.0629 0.3388 -0.0284 0.1911 -0.001 0.0422 C 0.032 -0.137 0.0546 -0.318 0.0667 -0.4998",
},
svg_round: { // hand-drawn — round leaf
blade: "M 0.3991 0.1009 C 0.3991 0.3213 0.2204 0.5 0 0.5 C -0.2204 0.5 -0.3991 0.3213 -0.3991 0.1009 C -0.3991 -0.1196 -0.2012 -0.4094 -0.0112 -0.5 C 0.1718 -0.4111 0.3991 -0.1196 0.3991 0.1009 Z",
veins: "M 0.0051 0.49 L -0.0158 -0.501 M 0.0039 0.4735 L 0.3738 0.2145 M 0.0023 0.367 L 0.3828 0.0882 M -0.0037 0.2768 L 0.3712 -0.0008 M -0.002 0.1811 L 0.329 -0.07 M -0.0005 0.0801 L 0.3013 -0.1694 M -0.0069 -0.0245 L 0.2626 -0.2399 M -0.005 -0.1172 L 0.2167 -0.2924 M -0.0076 -0.2136 L 0.1499 -0.3557 M -0.0124 -0.311 L 0.1041 -0.4158 M -0.0043 0.4633 L -0.3516 0.2867 M -0.0066 0.3665 L -0.3971 0.1691 M -0.0012 0.26 L -0.3996 0.0719 M -0.0079 0.1725 L -0.3831 -0.0091 M -0.0015 0.0729 L -0.3557 -0.0868 M -0.0029 -0.0347 L -0.3159 -0.1785 M -0.0061 -0.1237 L -0.2849 -0.2467 M -0.0085 -0.2157 L -0.2322 -0.3099 M -0.0191 -0.3209 L -0.1597 -0.3891",
},
};
function leafColor() {
const r = Math.random();
let h, s, l;
if (r < 0.60) { // greens
h = 80 + Math.random() * 55; s = 30 + Math.random() * 30; l = 28 + Math.random() * 20;
} else if (r < 0.85) { // amber / gold
h = 34 + Math.random() * 18; s = 55 + Math.random() * 25; l = 40 + Math.random() * 12;
} else { // rust / brown
h = 14 + Math.random() * 16; s = 45 + Math.random() * 25; l = 30 + Math.random() * 12;
}
return `hsl(${h}, ${s}%, ${l}%)`;
}
function paintRandomLeaf(ctx,leaf, W, H){
ctx.save();
ctx.translate(Math.random() * W, Math.random() * H);
ctx.rotate(Math.random() * 2 * Math.PI);
const scale = 40 + Math.random() ** 2 * 56;
ctx.scale(scale, scale);
ctx.fillStyle = leafColor();
ctx.strokeStyle = "rgba(0,0,0,0.2)";
ctx.shadowColor = "rgba(40, 45, 25, 0.28)";
ctx.shadowBlur = scale * 0.12;
ctx.lineWidth = 0.02;
ctx.beginPath();
const path = new Path2D(leaf.blade);
ctx.fill(path);
ctx.stroke(path);
ctx.clip(path);
const veinsPath = new Path2D(leaf.veins);
ctx.shadowColor = "transparent";
ctx.stroke(veinsPath);
ctx.restore();
}
function draw(){
const dpr = window.devicePixelRatio || 1;
const W = window.innerWidth, H = window.innerHeight;
canvas.width = W * dpr;
canvas.height = H * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // now you draw in CSS pixels
const g = ctx.createRadialGradient(
W / 2, H * 0.35, 0,
W / 2, H * 0.5, Math.max(W, H) * 0.8
);
g.addColorStop(0, "#f7f3ea"); // warm cream (center)
g.addColorStop(1, "#e7ddca"); // soft sand (edges)
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 150; i++) {
const leafTypes = Object.keys(LEAF_PATHS);
const randomLeafType = leafTypes[Math.floor(Math.random() * leafTypes.length)];
const leaf = LEAF_PATHS[randomLeafType];
paintRandomLeaf(ctx, leaf, W, H);
}
}
const canvas = document.getElementById("scene");
const ctx = canvas.getContext("2d");
draw();
window.addEventListener("resize", draw);