214 lines
6.8 KiB
HTML
214 lines
6.8 KiB
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, offZ = 0;
|
|
|
|
function project(x, y, z) {
|
|
var fov = 800;
|
|
var scale = fov / (fov + z);
|
|
var isoX = y - x;
|
|
var isoY = ((x + y) * 0.5) - z;
|
|
var sx = isoX * scale + W / 2;
|
|
var sy = isoY * scale + H / 2;
|
|
return [sx, sy];
|
|
}
|
|
|
|
function getHeight(x, z) {
|
|
var h = 0;
|
|
h += Math.sin(x / 200) * 60;
|
|
h += Math.cos(z / 200) * 60;
|
|
h += Math.sin(x / 100 + z / 200) * 30;
|
|
h += Math.cos(z / 100 - x / 200) * 25;
|
|
return h;
|
|
}
|
|
|
|
var triangles = [];
|
|
|
|
function generateLandscape() {
|
|
triangles = [];
|
|
var range = 25;
|
|
var size = 100;
|
|
for (var x = -range; x <= range; x++) {
|
|
for (var z = -range; z <= range; z++) {
|
|
var wx = x * size + offX;
|
|
var wz = z * size + offZ;
|
|
var h1 = getHeight(wx, wz);
|
|
var h2 = getHeight(wx + size, wz);
|
|
var h3 = getHeight(wx + size, wz + size);
|
|
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() {
|
|
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[1], t.p1[2]);
|
|
var p2 = project(t.p2[0], t.p2[1], t.p2[2]);
|
|
var p3 = project(t.p3[0], t.p3[1], t.p3[2]);
|
|
|
|
if (p1[1] < -200 || p1[1] > H + 200) continue;
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
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() {
|
|
ctx.fillStyle = '#000';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
offX -= 1.5;
|
|
offZ -= 0.7;
|
|
generateLandscape();
|
|
drawLandscape();
|
|
drawHorizon();
|
|
drawPlane();
|
|
|
|
requestAnimationFrame(frame);
|
|
}
|
|
|
|
frame();
|
|
</script>
|
|
</body>
|
|
</html> |