Complete rewrite - simpler working version
This commit is contained in:
Richard Zink committed
1 parent
e19f5e57ec
commit
7ce1789c73
1 file changed
+152
-202
+152
-202
@@ -5,236 +5,186 @@
|
|||||||
<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>Wireframe Flight Background</title>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
margin: 0;
|
body { overflow: hidden; background: #000; }
|
||||||
padding: 0;
|
canvas { display: block; }
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="bgCanvas"></canvas>
|
<canvas id="c"></canvas>
|
||||||
<script>
|
<script>
|
||||||
const canvas = document.getElementById('bgCanvas');
|
var c = document.getElementById('c');
|
||||||
const ctx = canvas.getContext('2d');
|
var ctx = c.getContext('2d');
|
||||||
|
var W = 0, H = 0;
|
||||||
|
|
||||||
let width, height;
|
function resize() {
|
||||||
|
W = c.width = window.innerWidth;
|
||||||
|
H = c.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
resize();
|
||||||
|
|
||||||
function resize() {
|
var offX = 0, offY = 0;
|
||||||
width = canvas.width = window.innerWidth;
|
|
||||||
height = canvas.height = window.innerHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', resize);
|
function project(x, y, z) {
|
||||||
resize();
|
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];
|
||||||
|
}
|
||||||
|
|
||||||
const camera = { fov: 600 };
|
function generateTriangle(p1, p2, p3, water) {
|
||||||
|
return { p1: p1, p2: p2, p3: p3, water: water, depth: (p1[2] + p2[2] + p3[2]) / 3 };
|
||||||
|
}
|
||||||
|
|
||||||
function rotateY(p, angle) {
|
function getHeight(x, y) {
|
||||||
const cos = Math.cos(angle);
|
var h = 0;
|
||||||
const sin = Math.sin(angle);
|
h += Math.sin(x / 200) * 80;
|
||||||
return { x: p.x * cos - p.z * sin, y: p.y, z: p.x * sin + p.z * cos };
|
h += Math.cos(y / 200) * 80;
|
||||||
}
|
h += Math.sin(x / 100 + y / 200) * 40;
|
||||||
|
h += Math.cos(y / 100 - x / 200) * 30;
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
class Point3D {
|
var triangles = [];
|
||||||
constructor(x, y, z) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.z = z;
|
|
||||||
}
|
|
||||||
|
|
||||||
project() {
|
function generateLandscape() {
|
||||||
const scale = camera.fov / (camera.fov + this.z);
|
triangles = [];
|
||||||
const xIso = this.x - this.z;
|
var range = 25;
|
||||||
const yIso = (this.x + this.z) * 0.5 - this.y;
|
var size = 100;
|
||||||
const x2d = xIso * scale + width / 2;
|
for (var x = -range; x <= range; x++) {
|
||||||
const y2d = yIso * scale + height / 2;
|
for (var y = -range; y <= range; y++) {
|
||||||
return { x: x2d, y: y2d };
|
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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class Landscape {
|
function drawLandscape() {
|
||||||
constructor() {
|
triangles.sort(function(a, b) { return b.depth - a.depth; });
|
||||||
this.gridSize = 120;
|
for (var i = 0; i < triangles.length; i++) {
|
||||||
this.gridRange = 25;
|
var t = triangles[i];
|
||||||
this.offsetX = 0;
|
var p1 = project(t.p1[0], t.p1[2], t.p1[1]);
|
||||||
this.offsetZ = 0;
|
var p2 = project(t.p2[0], t.p2[2], t.p2[1]);
|
||||||
this.triangles = [];
|
var p3 = project(t.p3[0], t.p3[2], t.p3[1]);
|
||||||
this.waterLevel = 20;
|
|
||||||
this.generateTriangles();
|
|
||||||
}
|
|
||||||
|
|
||||||
generateHeight(x, z) {
|
ctx.fillStyle = t.water ? 'rgba(0, 80, 200, 0.85)' : 'rgba(0, 160, 0, 0.85)';
|
||||||
const nx = x / 300;
|
ctx.beginPath();
|
||||||
const nz = z / 300;
|
ctx.moveTo(p1[0], p1[1]);
|
||||||
let y = 0;
|
ctx.lineTo(p2[0], p2[1]);
|
||||||
y += Math.sin(nx * 0.7) * 60;
|
ctx.lineTo(p3[0], p3[1]);
|
||||||
y += Math.cos(nz * 0.7) * 60;
|
ctx.closePath();
|
||||||
y += Math.sin(nx * 1.5 + nz * 0.3) * 30;
|
ctx.fill();
|
||||||
y += Math.cos(nz * 1.5 - nx * 0.4) * 25;
|
|
||||||
return y;
|
|
||||||
}
|
|
||||||
|
|
||||||
isWater(y) {
|
ctx.strokeStyle = t.water ? '#00ccff' : '#00ff66';
|
||||||
return y < this.waterLevel;
|
ctx.lineWidth = 1;
|
||||||
}
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
update() {
|
var planeVertices = [];
|
||||||
this.offsetX -= 1.5;
|
function initPlane() {
|
||||||
this.offsetZ -= 0.7;
|
planeVertices = [];
|
||||||
this.generateTriangles();
|
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]);
|
||||||
|
}
|
||||||
|
|
||||||
getPoint(x, z) {
|
var yawT = 0, rollT = 0, pitchT = 0;
|
||||||
const worldX = x * this.gridSize + this.offsetX;
|
|
||||||
const worldZ = z * this.gridSize + this.offsetZ;
|
|
||||||
const y = this.generateHeight(worldX, worldZ);
|
|
||||||
return new Point3D(worldX, y, worldZ);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateTriangles() {
|
function drawPlane() {
|
||||||
this.triangles = [];
|
var yaw = Math.sin(Date.now() / 1500) * 0.3;
|
||||||
for (let x = -this.gridRange; x <= this.gridRange; x++) {
|
var roll = Math.sin(Date.now() / 800) * 0.3;
|
||||||
for (let z = -this.gridRange; z <= this.gridRange; z++) {
|
var pitch = Math.cos(Date.now() / 1000) * 0.2;
|
||||||
const p1 = this.getPoint(x, z);
|
|
||||||
const p2 = this.getPoint(x + 1, z);
|
|
||||||
const p3 = this.getPoint(x + 1, z + 1);
|
|
||||||
const p4 = this.getPoint(x, z + 1);
|
|
||||||
|
|
||||||
const w = this.isWater(p1.y) || this.isWater(p2.y) || this.isWater(p3.y) || this.isWater(p4.y);
|
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];
|
||||||
|
});
|
||||||
|
|
||||||
this.triangles.push({ p1, p2, p3, isWater: w, depth: (p1.z + p2.z + p3.z) / 3 });
|
ctx.strokeStyle = '#ff0000';
|
||||||
this.triangles.push({ p1, p3, p4, isWater: w, depth: (p1.z + p3.z + p4.z) / 3 });
|
ctx.lineWidth = 2;
|
||||||
}
|
ctx.shadowBlur = 12;
|
||||||
}
|
ctx.shadowColor = '#ff0000';
|
||||||
}
|
|
||||||
|
|
||||||
draw() {
|
for (var i = 0; i < transformed.length; i++) {
|
||||||
this.triangles.sort((a, b) => b.depth - a.depth);
|
var p = project(transformed[i][0], transformed[i][2], transformed[i][1]);
|
||||||
this.triangles.forEach(tri => {
|
ctx.fillStyle = '#ff0000';
|
||||||
const proj1 = tri.p1.project();
|
ctx.beginPath();
|
||||||
const proj2 = tri.p2.project();
|
ctx.arc(p[0], p[1], 3, 0, Math.PI * 2);
|
||||||
const proj3 = tri.p3.project();
|
ctx.fill();
|
||||||
|
|
||||||
ctx.fillStyle = tri.isWater ? 'rgba(0, 100, 200, 0.9)' : 'rgba(0, 180, 0, 0.9)';
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(proj1.x, proj1.y);
|
|
||||||
ctx.lineTo(proj2.x, proj2.y);
|
|
||||||
ctx.lineTo(proj3.x, proj3.y);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
ctx.strokeStyle = tri.isWater ? '#00ccff' : '#00ff66';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
ctx.stroke();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class Airplane {
|
for (var i = 0; i < transformed.length - 1; i++) {
|
||||||
constructor() {
|
if (i >= 7 && i <= 10) continue;
|
||||||
this.vertices = [];
|
var p1 = project(transformed[i][0], transformed[i][2], transformed[i][1]);
|
||||||
this.init();
|
var p2 = project(transformed[i + 1][0], transformed[i + 1][2], transformed[i + 1][1]);
|
||||||
}
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(p1[0], p1[1]);
|
||||||
init() {
|
ctx.lineTo(p2[0], p2[1]);
|
||||||
const segments = 8;
|
ctx.stroke();
|
||||||
const fuselageLength = 80;
|
|
||||||
const fuselageRadius = 8;
|
|
||||||
|
|
||||||
for (let i = 0; i < segments; i++) {
|
|
||||||
const angle = (i / segments) * Math.PI * 2;
|
|
||||||
this.vertices.push(new Point3D(
|
|
||||||
Math.cos(angle) * fuselageRadius,
|
|
||||||
Math.sin(angle) * fuselageRadius,
|
|
||||||
0
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < segments; i++) {
|
|
||||||
const angle = (i / segments) * Math.PI * 2;
|
|
||||||
this.vertices.push(new Point3D(
|
|
||||||
Math.cos(angle) * fuselageRadius,
|
|
||||||
Math.sin(angle) * fuselageRadius,
|
|
||||||
fuselageLength
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
const wingSpan = 100;
|
|
||||||
const wingY = -2;
|
|
||||||
this.vertices.push(new Point3D(-wingSpan / 2, wingY, 10));
|
|
||||||
this.vertices.push(new Point3D(-wingSpan / 2 + 5, wingY, 35));
|
|
||||||
this.vertices.push(new Point3D(wingSpan / 2 - 5, wingY, 35));
|
|
||||||
this.vertices.push(new Point3D(wingSpan / 2, wingY, 10));
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this.yaw = Math.sin(Date.now() / 1000) * 0.15;
|
|
||||||
this.roll = Math.sin(Date.now() / 600) * 0.2;
|
|
||||||
this.pitch = Math.cos(Date.now() / 800) * 0.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
ctx.strokeStyle = '#ff0000';
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.shadowBlur = 15;
|
|
||||||
ctx.shadowColor = '#ff0000';
|
|
||||||
|
|
||||||
this.vertices.forEach(v => {
|
|
||||||
const proj = v.project();
|
|
||||||
if (!proj) return;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(proj.x, proj.y, 4, 0, Math.PI * 2);
|
|
||||||
ctx.fillStyle = '#ff0000';
|
|
||||||
ctx.fill();
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let i = 0; i < this.vertices.length - 1; i++) {
|
|
||||||
const v1 = this.vertices[i];
|
|
||||||
const v2 = this.vertices[i + 1];
|
|
||||||
if (!v1 || !v2) continue;
|
|
||||||
const p1 = v1.project();
|
|
||||||
const p2 = v2.project();
|
|
||||||
if (!p1 || !p2) continue;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(p1.x, p1.y);
|
|
||||||
ctx.lineTo(p2.x, p2.y);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.shadowBlur = 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const landscape = new Landscape();
|
for (var i = 7; i <= 10; i++) {
|
||||||
const airplane = new Airplane();
|
var j = (i + 1 > 10) ? 7 : i + 1;
|
||||||
|
var p1 = project(transformed[i][0], transformed[i][2], transformed[i][1]);
|
||||||
function animate() {
|
var p2 = project(transformed[j][0], transformed[j][2], transformed[j][1]);
|
||||||
ctx.fillStyle = '#000';
|
ctx.beginPath();
|
||||||
ctx.fillRect(0, 0, width, height);
|
ctx.moveTo(p1[0], p1[1]);
|
||||||
|
ctx.lineTo(p2[0], p2[1]);
|
||||||
landscape.update();
|
ctx.stroke();
|
||||||
landscape.draw();
|
|
||||||
|
|
||||||
airplane.update();
|
|
||||||
airplane.render();
|
|
||||||
|
|
||||||
requestAnimationFrame(animate);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
animate();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in new issue
Block a user