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

Complete rewrite: isometric 32x32 tiles, 30deg camera angle

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 16:48:39 +02:00
1 parent e1a4ef764d
commit 96dedf252d
1 file changed
+74 -177
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+74 -177
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe Flight Background</title> <title>Isometric Tiles</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; } body { overflow: hidden; background: #000; }
@@ -15,7 +15,8 @@
<script> <script>
var c = document.getElementById('c'); var c = document.getElementById('c');
var ctx = c.getContext('2d'); var ctx = c.getContext('2d');
var W = 0, H = 0; var W, H;
var TILE = 32;
function resize() { function resize() {
W = c.width = window.innerWidth; W = c.width = window.innerWidth;
@@ -24,212 +25,108 @@
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
var offX = 0, offZ = 0; var offX = 0, offY = 0;
var speedX = 0, speedY = 0;
var targetSpeedX = -2, targetSpeedY = -1;
var angle = Math.PI / 6;
function project(x, y, z) { function project(x, y, z) {
var fov = 800; var fov = 600;
var scale = fov / (fov + z); var scale = fov / (600 + z);
var isoX = y - x; var cosA = Math.cos(angle);
var isoY = ((x + y) * 0.5) - z; var sinA = Math.sin(angle);
var isoX = x * cosA - y * cosA;
var isoY = x * sinA + y * sinA - z;
var sx = isoX * scale + W / 2; var sx = isoX * scale + W / 2;
var sy = isoY * scale + H / 2; var sy = isoY * scale + H / 2;
return [sx, sy]; return [sx, sy, scale];
} }
function clipTriangle(p1, p2, p3, water) { function getHeight(x, y) {
var points = [p1, p2, p3];
var clipped = [];
for (var i = 0; i < points.length; i++) {
var p1 = points[i];
var p2 = points[(i + 1) % 3];
var t1 = (300 - p1[2]) / (p2[2] - p1[2]);
var t2 = (300 - p2[2]) / (p1[2] - p2[2]);
if (p1[2] >= 300 && p2[2] >= 300) continue;
if (p1[2] < 300 && p2[2] < 300) {
clipped.push(p2);
} else {
var tt = (300 - p1[2]) / (p2[2] - p1[2]);
var ny = p1[1] + (p2[1] - p1[1]) * tt;
var nx = p1[0] + (p2[0] - p1[0]) * tt;
var nz = 300;
clipped.push([nx, ny, nz]);
if (p1[2] < 300) clipped.push(p1);
}
}
return clipped;
}
function getHeight(x, z) {
var h = 0; var h = 0;
h += Math.sin(x / 200) * 60; h += Math.sin(x * 0.05) * 8;
h += Math.cos(z / 200) * 60; h += Math.cos(y * 0.05) * 8;
h += Math.sin(x / 100 + z / 200) * 30; h += Math.sin(x * 0.1 + y * 0.05) * 4;
h += Math.cos(z / 100 - x / 200) * 25; h += Math.cos(y * 0.1 - x * 0.05) * 3;
return h; return h;
} }
var triangles = []; var tiles = [];
function generateLandscape() { function generateTiles() {
triangles = []; tiles = [];
var range = 30; var rangeX = Math.ceil(W / TILE) + 4;
var size = 100; var rangeY = Math.ceil(H / TILE) + 4;
for (var x = -range; x <= range; x++) {
for (var z = -range; z <= range; z++) { for (var x = -rangeX; x <= rangeX; x++) {
var wx = x * size + offX; for (var y = -rangeY; y <= rangeY; y++) {
var wz = z * size + offZ; var wx = x * TILE + offX;
var h1 = getHeight(wx, wz); var wy = y * TILE + offY;
var h2 = getHeight(wx + size, wz); var h = getHeight(wx, wy);
var h3 = getHeight(wx + size, wz + size); tiles.push({ x: wx, y: wy, h: h });
var h4 = getHeight(wx, wz + size);
var water = (h1 < 30 || h2 < 30 || h3 < 30 || h4 < 30);
var p1 = [wx, h1, wz];
var p2 = [wx + size, h2, wz];
var p3 = [wx + size, h3, wz + size];
var p4 = [wx, h4, wz + size];
triangles.push({ p1: p1, p2: p2, p3: p3, water: water, depth: (p1[2] + p2[2] + p3[2]) / 3 });
triangles.push({ p1: p1, p2: p3, p3: p4, water: water, depth: (p1[2] + p3[2] + p4[2]) / 3 });
} }
} }
} }
function drawLandscape() { function drawTiles() {
triangles.sort(function(a, b) { return b.depth - a.depth; }); tiles.sort(function(a, b) {
for (var i = 0; i < triangles.length; i++) { return ((a.x + a.y) - (b.x + b.y));
var t = triangles[i]; });
if (t.p1[2] > 250 && t.p2[2] > 250 && t.p3[2] > 250) continue;
var p1 = project(t.p1[0], t.p1[1], t.p1[2]); for (var i = 0; i < tiles.length; i++) {
var p2 = project(t.p2[0], t.p2[1], t.p2[2]); var t = tiles[i];
var p3 = project(t.p3[0], t.p3[1], t.p3[2]); var wx = t.x, wy = t.y, h = t.h;
ctx.fillStyle = t.water ? 'rgba(0, 80, 200, 0.85)' : 'rgba(0, 160, 0, 0.85)'; var x1 = wx, y1 = wy + TILE, z1 = h;
var x2 = wx + TILE, y2 = wy + TILE, z2 = getHeight(wx + TILE, wy + TILE);
var x3 = wx + TILE, y3 = wy, z3 = getHeight(wx + TILE, wy);
var x4 = wx, y4 = wy, z4 = h;
var p1 = project(x1, y1, z1);
var p2 = project(x2, y2, z2);
var p3 = project(x3, y3, z3);
var p4 = project(x4, y4, z4);
if (p1[1] < -100 || p1[1] > H + 100) continue;
if (p4[1] < -100 || p4[1] > H + 100) continue;
var water = h < 2;
var baseR = water ? 0 : 0;
var baseG = water ? 80 : 140;
var baseB = water ? 180 : 0;
var lighting = 0.4 + Math.max(0, Math.sin(angle) * 0.5 + 0.3);
var r = Math.floor(baseR * lighting);
var g = Math.floor(baseG * lighting);
var b = Math.floor(baseB * lighting);
ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p1[0], p1[1]); ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]); ctx.lineTo(p2[0], p2[1]);
ctx.lineTo(p3[0], p3[1]); ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
ctx.strokeStyle = t.water ? '#00ccff' : '#00ff66'; ctx.strokeStyle = water ? 'rgba(0, 200, 255, 0.5)' : 'rgba(0, 255, 100, 0.5)';
ctx.lineWidth = 1; ctx.lineWidth = 0.5;
ctx.stroke(); ctx.stroke();
} }
} }
function drawHorizon() {
var hY = H / 2 - 50;
ctx.strokeStyle = 'rgba(255, 200, 100, 0.3)';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, hY);
ctx.lineTo(W, hY);
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]);
}
function drawPlane() {
var yaw = -0.4;
var roll = 0;
var pitch = 0.15;
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][1], transformed[i][2]);
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(p[0], p[1], 3, 0, Math.PI * 2);
ctx.fill();
}
for (var i = 0; i < 7; i++) {
var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
var p2 = project(transformed[i + 1][0], transformed[i + 1][1], transformed[i + 1][2]);
ctx.beginPath();
ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.stroke();
}
ctx.beginPath();
var pFirst = project(transformed[0][0], transformed[0][1], transformed[0][2]);
var pLast = project(transformed[7][0], transformed[7][1], transformed[7][2]);
ctx.moveTo(pFirst[0], pFirst[1]);
ctx.lineTo(pLast[0], pLast[1]);
ctx.stroke();
for (var i = 8; i <= 11; i++) {
var j = (i + 1 > 11) ? 8 : i + 1;
var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
var p2 = project(transformed[j][0], transformed[j][1], transformed[j][2]);
ctx.beginPath();
ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.stroke();
}
for (var i = 12; i <= 15; i++) {
var j = (i + 1 > 15) ? 12 : i + 1;
var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
var p2 = project(transformed[j][0], transformed[j][1], transformed[j][2]);
ctx.beginPath();
ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.stroke();
}
ctx.shadowBlur = 0;
}
initPlane();
function frame() { function frame() {
ctx.fillStyle = '#000'; ctx.fillStyle = '#001020';
ctx.fillRect(0, 0, W, H); ctx.fillRect(0, 0, W, H);
offX -= 1.5; speedX += (targetSpeedX - speedX) * 0.05;
offZ -= 0.7; speedY += (targetSpeedY - speedY) * 0.05;
generateLandscape(); offX += speedX;
drawLandscape(); offY += speedY;
drawHorizon();
drawPlane(); generateTiles();
drawTiles();
requestAnimationFrame(frame); requestAnimationFrame(frame);
} }