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

Add error display

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 16:21:06 +02:00
1 parent ae50725495
commit ef80e2a775
1 file changed
+79 -83
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+79 -83
View File
@@ -14,6 +14,8 @@
body { body {
overflow: hidden; overflow: hidden;
background: #000; background: #000;
color: #ff0000;
font-family: monospace;
} }
canvas { canvas {
@@ -22,11 +24,34 @@
top: 0; top: 0;
left: 0; left: 0;
} }
#log {
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
font-size: 12px;
max-width: 90%;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="bgCanvas"></canvas> <canvas id="bgCanvas"></canvas>
<div id="log"></div>
<script> <script>
const log = document.getElementById('log');
function addLog(msg) {
const div = document.createElement('div');
div.textContent = msg;
log.appendChild(div);
}
window.addEventListener('error', function(e) {
addLog('ERROR: ' + e.message + ' at line ' + e.lineno);
});
addLog('Script start');
const canvas = document.getElementById('bgCanvas'); const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@@ -59,16 +84,10 @@
} }
} }
function rotateY(p, angle) {
const cos = Math.cos(angle);
const sin = Math.sin(angle);
return { x: p.x * cos - p.z * sin, y: p.y, z: p.x * sin + p.z * cos };
}
class Landscape { class Landscape {
constructor() { constructor() {
this.gridSize = 120; this.gridSize = 120;
this.gridRange = 30; this.gridRange = 20;
this.offsetX = 0; this.offsetX = 0;
this.offsetZ = 0; this.offsetZ = 0;
this.triangles = []; this.triangles = [];
@@ -126,48 +145,45 @@
draw() { draw() {
this.triangles.sort((a, b) => b.depth - a.depth); this.triangles.sort((a, b) => b.depth - a.depth);
this.triangles.forEach(tri => { this.triangles.forEach(tri => {
const proj1 = tri.p1.project(); const proj1 = tri.p1.project();
const proj2 = tri.p2.project(); const proj2 = tri.p2.project();
const proj3 = tri.p3.project(); const proj3 = tri.p3.project();
const v1 = { x: tri.p2.x - tri.p1.x, y: tri.p2.y - tri.p1.y, z: tri.p2.z - tri.p1.z }; const v1 = { x: tri.p2.x - tri.p1.x, y: tri.p2.y - tri.p1.y, z: tri.p2.z - tri.p1.z };
const v2 = { x: tri.p3.x - tri.p1.x, y: tri.p3.y - tri.p1.y, z: tri.p3.z - tri.p1.z }; const v2 = { x: tri.p3.x - tri.p1.x, y: tri.p3.y - tri.p1.y, z: tri.p3.z - tri.p1.z };
const crossZ = v1.x * v2.y - v1.y * v2.x; const crossZ = v1.x * v2.y - v1.y * v2.x;
if (crossZ >= 0) return; if (crossZ >= 0) return;
const baseColor = tri.isWater ? 'rgba(0, 150, 220, 0.7)' : 'rgba(0, 200, 0, 0.7)'; const baseColor = tri.isWater ? 'rgba(0, 150, 220, 0.7)' : 'rgba(0, 200, 0, 0.7)';
ctx.fillStyle = baseColor; ctx.fillStyle = baseColor;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(proj1.x, proj1.y); ctx.moveTo(proj1.x, proj1.y);
ctx.lineTo(proj2.x, proj2.y); ctx.lineTo(proj2.x, proj2.y);
ctx.lineTo(proj3.x, proj3.y); ctx.lineTo(proj3.x, proj3.y);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
ctx.strokeStyle = tri.isWater ? '#00ccff' : '#00ff66'; ctx.strokeStyle = tri.isWater ? '#00ccff' : '#00ff66';
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.stroke(); ctx.stroke();
}); });
} }
} }
class Airplane { class Airplane {
constructor() { constructor() {
this.vertices = []; this.vertices = [];
this.faces = [];
this.init(); this.init();
} }
init() { init() {
const verts = []; const segments = 8;
const fuselageLength = 80; const fuselageLength = 80;
const fuselageRadius = 8; const fuselageRadius = 8;
const segments = 8;
for (let i = 0; i < segments; i++) { for (let i = 0; i < segments; i++) {
const angle = (i / segments) * Math.PI * 2; const angle = (i / segments) * Math.PI * 2;
verts.push(new Point3D( this.vertices.push(new Point3D(
Math.cos(angle) * fuselageRadius, Math.cos(angle) * fuselageRadius,
Math.sin(angle) * fuselageRadius, Math.sin(angle) * fuselageRadius,
0 0
@@ -175,45 +191,20 @@
} }
for (let i = 0; i < segments; i++) { for (let i = 0; i < segments; i++) {
const angle1 = (i / segments) * Math.PI * 2; const angle = (i / segments) * Math.PI * 2;
const angle2 = ((i + 1) % segments / segments) * Math.PI * 2; this.vertices.push(new Point3D(
verts.push(new Point3D( Math.cos(angle) * fuselageRadius,
Math.cos(angle1) * fuselageRadius, Math.sin(angle) * fuselageRadius,
Math.sin(angle1) * fuselageRadius,
fuselageLength fuselageLength
)); ));
verts.push(new Point3D(
Math.cos(angle2) * fuselageRadius,
Math.sin(angle2) * fuselageRadius,
fuselageLength
));
}
const tipIdx = verts.length;
verts.push(new Point3D(0, 0, fuselageLength + 30));
for (let i = 0; i < segments; i++) {
const next = (i + 1) % segments;
const middleStart = segments + i * 2;
const middleNext = segments + ((i + 1) % segments) * 2;
verts.push([baseIdx = i, next].forEach(() => {}));
} }
const wingSpan = 100; const wingSpan = 100;
const wingChord = 25;
const wingY = -2; const wingY = -2;
this.vertices.push(new Point3D(-wingSpan / 2, wingY, 10));
const wingBackLeft = verts.length; this.vertices.push(new Point3D(-wingSpan / 2 + 5, wingY, 35));
verts.push(new Point3D(-wingSpan / 2, wingY, 10)); this.vertices.push(new Point3D(wingSpan / 2 - 5, wingY, 35));
verts.push(new Point3D(-wingSpan / 2 + 5, wingY, 35)); this.vertices.push(new Point3D(wingSpan / 2, wingY, 10));
verts.push(new Point3D(wingSpan / 2 - 5, wingY, 35));
verts.push(new Point3D(wingSpan / 2, wingY, 10));
this.faces.push([wingBackLeft, wingBackLeft + 1, wingBackLeft + 2]);
this.faces.push([wingBackLeft, wingBackLeft + 2, wingBackLeft + 3]);
this.vertices = verts;
} }
update() { update() {
@@ -236,38 +227,43 @@
ctx.fill(); ctx.fill();
}); });
this.vertices.forEach((v, i) => { for (let i = 0; i < this.vertices.length - 1; i++) {
const nextIdx = (i + 1) % this.vertices.length; if (i === 7) continue;
if (nextIdx <= 2) return; const p1 = this.vertices[i].project();
const p1 = v.project(); const p2 = this.vertices[i + 1].project();
const p2 = this.vertices[nextIdx].project();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p1.x, p1.y); ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y); ctx.lineTo(p2.x, p2.y);
ctx.stroke(); ctx.stroke();
}); }
ctx.shadowBlur = 0; ctx.shadowBlur = 0;
} }
} }
const landscape = new Landscape(); try {
const airplane = new Airplane(); const landscape = new Landscape();
const airplane = new Airplane();
addLog('Objects created');
function animate() { function animate() {
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
landscape.update(); landscape.update();
landscape.draw(); landscape.draw();
airplane.update(); airplane.update();
airplane.render(); airplane.render();
requestAnimationFrame(animate); requestAnimationFrame(animate);
}
animate();
addLog('Animation started');
} catch (e) {
addLog('CATCH: ' + e.message);
} }
animate();
</script> </script>
</body> </body>
</html> </html>