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>Wireframe Flight Background</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 = 0, H = 0;

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

    var offX = 0, offY = 0;

    function project(x, y, z) {
        var scale = 600 / (600 + z);
        var sx = (x - y) * scale + W / 2;
        var sy = ((x + y) * 0.5 - z) * scale + H / 2;
        return [sx, sy];
    }

    function generateTriangle(p1, p2, p3, water) {
        return { p1: p1, p2: p2, p3: p3, water: water, depth: (p1[2] + p2[2] + p3[2]) / 3 };
    }

    function getHeight(x, y) {
        var h = 0;
        h += Math.sin(x / 300) * 50;
        h += Math.cos(y / 300) * 50;
        h += Math.sin(x / 150 + y / 300) * 25;
        h += Math.cos(y / 150 - x / 300) * 20;
        return h;
    }

    var triangles = [];

    function generateLandscape() {
        triangles = [];
        var range = 25;
        var size = 100;
        for (var x = -range; x <= range; x++) {
            for (var y = -range; y <= range; y++) {
                var wx = x * size + offX;
                var wy = y * size + offY;
                var h1 = getHeight(wx, wy);
                var h2 = getHeight(wx + size, wy);
                var h3 = getHeight(wx + size, wy + size);
                var h4 = getHeight(wx, wy + size);
                var water = (h1 < 30 || h2 < 30 || h3 < 30 || h4 < 30);
                var p1 = [wx, h1, wy];
                var p2 = [wx + size, h2, wy];
                var p3 = [wx + size, h3, wy + size];
                var p4 = [wx, h4, wy + size];
                triangles.push(generateTriangle(p1, p2, p3, water));
                triangles.push(generateTriangle(p1, p3, p4, water));
            }
        }
    }

    function drawLandscape() {
        triangles.sort(function(a, b) { return b.depth - a.depth; });
        for (var i = 0; i < triangles.length; i++) {
            var t = triangles[i];
            var p1 = project(t.p1[0], t.p1[2], t.p1[1]);
            var p2 = project(t.p2[0], t.p2[2], t.p2[1]);
            var p3 = project(t.p3[0], t.p3[2], t.p3[1]);

            ctx.fillStyle = t.water ? 'rgba(0, 80, 200, 0.85)' : 'rgba(0, 160, 0, 0.85)';
            ctx.beginPath();
            ctx.moveTo(p1[0], p1[1]);
            ctx.lineTo(p2[0], p2[1]);
            ctx.lineTo(p3[0], p3[1]);
            ctx.closePath();
            ctx.fill();

            ctx.strokeStyle = t.water ? '#00ccff' : '#00ff66';
            ctx.lineWidth = 1;
            ctx.stroke();
        }
    }

    var planeVertices = [];
    function initPlane() {
        planeVertices = [];
        var segs = 8, len = 60, rad = 6;
        for (var i = 0; i < segs; i++) {
            var a = (i / segs) * Math.PI * 2;
            planeVertices.push([Math.cos(a) * rad, 0, Math.sin(a) * rad]);
        }
        for (var i = 0; i < segs; i++) {
            var a = (i / segs) * Math.PI * 2;
            planeVertices.push([Math.cos(a) * rad, len, Math.sin(a) * rad]);
        }
        planeVertices.push([-40, 30, 0]);
        planeVertices.push([-40, 50, 0]);
        planeVertices.push([40, 50, 0]);
        planeVertices.push([40, 30, 0]);
    }

    var yawT = 0, rollT = 0, pitchT = 0;

    function drawPlane() {
        var yaw = Math.sin(Date.now() / 3000) * 0.1;
        var roll = Math.sin(Date.now() / 2500) * 0.08;
        var pitch = Math.cos(Date.now() / 2800) * 0.05;

        var transformed = planeVertices.map(function(v) {
            var x = v[0], y = v[1], z = v[2];
            var cy = Math.cos(yaw), sy = Math.sin(yaw);
            var x1 = x * cy - z * sy;
            var z1 = x * sy + z * cy;
            var cr = Math.cos(roll), sr = Math.sin(roll);
            var x2 = x1 * cr - y * sr;
            var y1 = x1 * sr + y * cr;
            var cp = Math.cos(pitch), sp = Math.sin(pitch);
            var y2 = y1 * cp - z1 * sp;
            var z2 = y1 * sp + z1 * cp;
            return [x2, y2 + 120, z2 + 100];
        });

        ctx.strokeStyle = '#ff0000';
        ctx.lineWidth = 2;
        ctx.shadowBlur = 12;
        ctx.shadowColor = '#ff0000';

        for (var i = 0; i < transformed.length; i++) {
            var p = project(transformed[i][0], transformed[i][2], transformed[i][1]);
            ctx.fillStyle = '#ff0000';
            ctx.beginPath();
            ctx.arc(p[0], p[1], 3, 0, Math.PI * 2);
            ctx.fill();
        }

        for (var i = 0; i < transformed.length - 1; i++) {
            if (i >= 7 && i <= 10) continue;
            var p1 = project(transformed[i][0], transformed[i][2], transformed[i][1]);
            var p2 = project(transformed[i + 1][0], transformed[i + 1][2], transformed[i + 1][1]);
            ctx.beginPath();
            ctx.moveTo(p1[0], p1[1]);
            ctx.lineTo(p2[0], p2[1]);
            ctx.stroke();
        }

        for (var i = 7; i <= 10; i++) {
            var j = (i + 1 > 10) ? 7 : i + 1;
            var p1 = project(transformed[i][0], transformed[i][2], transformed[i][1]);
            var p2 = project(transformed[j][0], transformed[j][2], transformed[j][1]);
            ctx.beginPath();
            ctx.moveTo(p1[0], p1[1]);
            ctx.lineTo(p2[0], p2[1]);
            ctx.stroke();
        }

        ctx.shadowBlur = 0;
    }

    initPlane();

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

        offX -= 1.5;
        offY -= 0.7;
        generateLandscape();
        drawLandscape();

        drawPlane();

        requestAnimationFrame(frame);
    }

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