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

Fix: isometric view, adjusted height

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 15:51:00 +02:00
1 parent 29de731e11
commit 6eff1aaa9c
1 file changed
+26 -25
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+26 -25
View File
@@ -41,8 +41,7 @@
resize();
const camera = {
fov: 800,
angle: Math.PI / 4
fov: 600
};
class Point3D {
@@ -55,9 +54,9 @@
project() {
const scale = camera.fov / (camera.fov + this.z);
const xIso = this.x - this.z;
const yIso = (this.x + this.z) * 0.5 - this.y;
const yIso = (this.x + this.z) * 0.5;
const x2d = xIso * scale + width / 2;
const y2d = yIso * scale + height / 3;
const y2d = yIso * scale + height / 2;
return { x: x2d, y: y2d, scale: scale };
}
}
@@ -68,7 +67,6 @@
this.p2 = p2;
this.p3 = p3;
this.calculateNormal();
this.visible = true;
}
calculateNormal() {
@@ -85,9 +83,9 @@
this.normal.y /= len;
this.normal.z /= len;
}
const light = { x: 0.5, y: 0.5, z: 1 };
const light = { x: 0.3, y: 0.3, z: 0.8 };
const dot = this.normal.x * light.x + this.normal.y * light.y + this.normal.z * light.z;
this.intensity = Math.max(0, dot);
this.intensity = Math.max(0.2, dot);
}
isBackfaceCulled() {
@@ -104,8 +102,10 @@
if (this.isBackfaceCulled()) return;
const colorVal = Math.floor(30 + this.intensity * 150);
const color = `rgba(0, ${colorVal}, 0, 0.8)`;
const colorVal = Math.floor(20 + this.intensity * 180);
const color = this.p1.isWater || this.p2.isWater || this.p3.isWater
? `rgba(0, ${Math.floor(colorVal * 0.8)}, ${colorVal + 50}, 0.7)`
: `rgba(0, ${colorVal}, 0, 0.7)`;
ctx.beginPath();
ctx.moveTo(proj1.x, proj1.y);
@@ -138,22 +138,23 @@
class Landscape {
constructor() {
this.gridSize = 60;
this.gridRange = 40;
this.gridSize = 100;
this.gridRange = 30;
this.offsetX = 0;
this.offsetZ = 0;
this.triangles = [];
this.waterLevel = -10;
this.waterLevel = 50;
}
generateHeight(x, z) {
const nx = x / 100;
const nz = z / 100;
const nx = x / 200;
const nz = z / 200;
let y = 0;
y += Math.sin(nx) * 30;
y += Math.cos(nz) * 30;
y += Math.sin(nx * 2 + nz * 0.5) * 15;
y += Math.cos(nz * 2 - nx) * 15;
y += Math.sin(nx) * 40;
y += Math.cos(nz) * 40;
y += Math.sin(nx * 2 + nz * 0.5) * 20;
y += Math.cos(nz * 2 - nx) * 20;
y += Math.sin(nx * 3 - nz * 2) * 10;
return y;
}
@@ -162,7 +163,7 @@
}
update() {
this.offsetX -= 1;
this.offsetX -= 2;
this.offsetZ -= 1;
this.generateTriangles();
}
@@ -205,7 +206,7 @@
class Airplane {
constructor() {
this.z = 100;
this.z = 120;
this.yaw = 0;
this.roll = 0;
this.pitch = 0;
@@ -214,7 +215,7 @@
}
init() {
const w = 15, h = 5, d = 25;
const w = 20, h = 8, d = 30;
const vertices = [
{ x: 0, y: -h, z: 0 },
{ x: w, y: 0, z: d / 2 },
@@ -238,14 +239,14 @@
}
update() {
this.yaw = Math.sin(Date.now() / 1000) * 0.2;
this.roll = Math.sin(Date.now() / 600) * 0.4;
this.pitch = Math.cos(Date.now() / 800) * 0.25;
this.yaw = Math.sin(Date.now() / 1000) * 0.15;
this.roll = Math.sin(Date.now() / 600) * 0.3;
this.pitch = Math.cos(Date.now() / 800) * 0.2;
}
draw() {
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.lineWidth = 2.5;
ctx.shadowBlur = 15;
ctx.shadowColor = '#ff0000';