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

Add gap between voxels to prevent clipping

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 17:14:43 +02:00
1 parent fb357e2934
commit 48cd7a43cf
1 file changed
+32 -29
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+32 -29
View File
@@ -17,6 +17,7 @@
var ctx = c.getContext('2d');
var W, H;
var TILE = 32;
var GAP = 2;
var HEIGHT_UNIT = 6;
function resize() {
@@ -70,37 +71,16 @@
}
}
function drawTiles() {
tiles.sort(function(a, b) {
return ((a.x + a.y) - (b.x + b.y));
});
var heightMap = {};
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
heightMap[t.x + ',' + t.y] = t.h;
}
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
var wx = t.x, wy = t.y, h = t.h;
var water = isWater(h);
var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
var hRight = heightMap[(wx + TILE) + ',' + wy] || 0;
var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
var hBack = heightMap[wx + ',' + (wy + TILE)] || 0;
function drawTile(wx, wy, h, water, hLeft, hFront) {
var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var top3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var topColor = water ? '#2299dd' : '#33aa33';
var leftColor = water ? '#1166aa' : '#226622';
var rightColor = water ? '#0d4477' : '#114411';
var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
var top4 = project(wx, wy, h * HEIGHT_UNIT);
ctx.fillStyle = topColor;
ctx.beginPath();
ctx.moveTo(top1[0], top1[1]);
@@ -121,17 +101,40 @@
ctx.fill();
}
if (hBack < h) {
if (hFront < h) {
ctx.fillStyle = rightColor;
ctx.beginPath();
ctx.moveTo(top3[0], top3[1]);
ctx.lineTo(top4[0], top4[1]);
ctx.lineTo(top4[0], top4[1] + (h - hBack) * HEIGHT_UNIT);
ctx.lineTo(top3[0], top3[1] + (h - hBack) * HEIGHT_UNIT);
ctx.lineTo(top4[0], top4[1] + (h - hFront) * HEIGHT_UNIT);
ctx.lineTo(top3[0], top3[1] + (h - hFront) * HEIGHT_UNIT);
ctx.closePath();
ctx.fill();
}
}
function drawTiles() {
tiles.sort(function(a, b) {
return ((a.x + a.y) - (b.x + b.y));
});
var heightMap = {};
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
heightMap[t.x + ',' + t.y] = t.h;
}
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
var wx = t.x, wy = t.y, h = t.h;
var water = isWater(h);
var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
drawTile(wx, wy, h, water, hLeft, hFront);
}
}
function applyLighting(color, factor) {