zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render shadows in sorted order after all tiles

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 17:38:13 +02:00
1 parent ad61b069d8
commit 2cd78d78e8
1 file changed
+36 -16
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+36 -16
View File
@@ -164,6 +164,8 @@
heightMap[t.x + ',' + t.y] = t.h;
}
var shadows = [];
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
var wx = t.x, wy = t.y, h = t.h;
@@ -202,14 +204,16 @@
var topA = project(wx + GAP/2 + (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var topB = project(wx + TILE - GAP/2 - (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.beginPath();
ctx.moveTo(top1[0], top1[1]);
ctx.lineTo(topA[0], topA[1]);
ctx.lineTo(topB[0], topB[1]);
ctx.lineTo(top2[0], top2[1]);
ctx.closePath();
ctx.fill();
shadows.push({
x: wx, y: wy,
points: [
{ x: top1[0], y: top1[1] },
{ x: topA[0], y: topA[1] },
{ x: topB[0], y: topB[1] },
{ x: top2[0], y: top2[1] }
],
depth: (wx + wy) - 1
});
}
if (shadowLeft > 0) {
@@ -220,17 +224,33 @@
var topA = project(wx + GAP/2, wy + GAP/2 + (TILE - GAP) * tt, h * HEIGHT_UNIT);
var topB = project(wx + GAP/2, wy + TILE - GAP/2 - (TILE - GAP) * tt, h * HEIGHT_UNIT);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.beginPath();
ctx.moveTo(top4[0], top4[1]);
ctx.lineTo(topA[0], topA[1]);
ctx.lineTo(topB[0], topB[1]);
ctx.lineTo(top1[0], top1[1]);
ctx.closePath();
ctx.fill();
shadows.push({
x: wx, y: wy,
points: [
{ x: top4[0], y: top4[1] },
{ x: topA[0], y: topA[1] },
{ x: topB[0], y: topB[1] },
{ x: top1[0], y: top1[1] }
],
depth: (wx + wy) - 1
});
}
}
}
shadows.sort(function(a, b) { return a.depth - b.depth; });
for (var i = 0; i < shadows.length; i++) {
var s = shadows[i];
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
ctx.lineTo(s.points[1].x, s.points[1].y);
ctx.lineTo(s.points[2].x, s.points[2].y);
ctx.lineTo(s.points[3].x, s.points[3].y);
ctx.closePath();
ctx.fill();
}
}
function applyLighting(color, factor) {