animated_wallpaper/assets/index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isometric Voxel Terrain</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
    var c = document.getElementById('c');
    var ctx = c.getContext('2d');
    var W, H;
    var TILE = 32;
    var GAP = 2;
    var HEIGHT_UNIT = 6;

    function resize() {
        W = c.width = window.innerWidth;
        H = c.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    var angle = Math.PI / 6;
    var cosA = Math.cos(angle);
    var sinA = Math.sin(angle);

    function project(x, y, z) {
        var scale = 1;
        var isoX = (x - y) * cosA * scale;
        var isoY = ((x + y) * sinA - z) * scale;
        var sx = isoX + W / 2;
        var sy = isoY + H / 2;
        return [sx, sy];
    }

    function getHeight(x, y, time) {
        var h = 0;
        h += Math.sin(x * 0.03 + time * 0.5) * 3;
        h += Math.cos(y * 0.03 + time * 0.4) * 3;
        h += Math.sin(x * 0.05 + y * 0.03 + time * 0.3) * 1.5;
        h += Math.cos(y * 0.05 - x * 0.03 + time * 0.6) * 1;
        return Math.round(h);
    }

    function isWater(h) {
        return h <= -2;
    }

    var time = 0;
    var tiles = [];

    function generateTiles() {
        tiles = [];
        var rangeX = Math.ceil(W / (TILE * cosA * 2)) + 2;
        var rangeY = Math.ceil(H / (TILE * sinA * 2)) + 2;

        for (var x = -rangeX; x <= rangeX; x++) {
            for (var y = -rangeY; y <= rangeY; y++) {
                var wx = x * TILE;
                var wy = y * TILE;
                var h = getHeight(wx, wy, time);
                tiles.push({ x: wx, y: wy, h: h });
            }
        }
    }

    function drawTile(wx, wy, h, water, hRight, hBack) {
        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';

        ctx.fillStyle = topColor;
        ctx.beginPath();
        ctx.moveTo(top1[0], top1[1]);
        ctx.lineTo(top2[0], top2[1]);
        ctx.lineTo(top3[0], top3[1]);
        ctx.lineTo(top4[0], top4[1]);
        ctx.closePath();
        ctx.fill();

        if (hRight < h) {
            ctx.fillStyle = rightColor;
            ctx.beginPath();
            ctx.moveTo(top2[0], top2[1]);
            ctx.lineTo(top3[0], top3[1]);
            ctx.lineTo(top3[0], top3[1] + (h - hRight) * HEIGHT_UNIT);
            ctx.lineTo(top2[0], top2[1] + (h - hRight) * HEIGHT_UNIT);
            ctx.closePath();
            ctx.fill();
        }

        if (hBack < h) {
            ctx.fillStyle = leftColor;
            ctx.beginPath();
            ctx.moveTo(top1[0], top1[1]);
            ctx.lineTo(top2[0], top2[1]);
            ctx.lineTo(top2[0], top2[1] + (h - hBack) * HEIGHT_UNIT);
            ctx.lineTo(top1[0], top1[1] + (h - hBack) * 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 hRight = heightMap[(wx + TILE) + ',' + wy] || 0;
            var hBack = heightMap[wx + ',' + (wy + TILE)] || 0;

            drawTile(wx, wy, h, water, hRight, hBack);
        }
    }

    function applyLighting(color, factor) {
        var r = parseInt(color.substr(1, 2), 16);
        var g = parseInt(color.substr(3, 2), 16);
        var b = parseInt(color.substr(5, 2), 16);
        r = Math.floor(r * factor);
        g = Math.floor(g * factor);
        b = Math.floor(b * factor);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    function frame() {
        ctx.fillStyle = '#001020';
        ctx.fillRect(0, 0, W, H);

        time += 0.02;

        generateTiles();
        drawTiles();

        requestAnimationFrame(frame);
    }

    frame();
    </script>
</body>
</html>