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(); resize();
const camera = { const camera = {
fov: 800, fov: 600
angle: Math.PI / 4
}; };
class Point3D { class Point3D {
@@ -55,9 +54,9 @@
project() { project() {
const scale = camera.fov / (camera.fov + this.z); const scale = camera.fov / (camera.fov + this.z);
const xIso = this.x - 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 x2d = xIso * scale + width / 2;
const y2d = yIso * scale + height / 3; const y2d = yIso * scale + height / 2;
return { x: x2d, y: y2d, scale: scale }; return { x: x2d, y: y2d, scale: scale };
} }
} }
@@ -68,7 +67,6 @@
this.p2 = p2; this.p2 = p2;
this.p3 = p3; this.p3 = p3;
this.calculateNormal(); this.calculateNormal();
this.visible = true;
} }
calculateNormal() { calculateNormal() {
@@ -85,9 +83,9 @@
this.normal.y /= len; this.normal.y /= len;
this.normal.z /= 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; 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() { isBackfaceCulled() {
@@ -104,8 +102,10 @@
if (this.isBackfaceCulled()) return; if (this.isBackfaceCulled()) return;
const colorVal = Math.floor(30 + this.intensity * 150); const colorVal = Math.floor(20 + this.intensity * 180);
const color = `rgba(0, ${colorVal}, 0, 0.8)`; 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.beginPath();
ctx.moveTo(proj1.x, proj1.y); ctx.moveTo(proj1.x, proj1.y);
@@ -138,22 +138,23 @@
class Landscape { class Landscape {
constructor() { constructor() {
this.gridSize = 60; this.gridSize = 100;
this.gridRange = 40; this.gridRange = 30;
this.offsetX = 0; this.offsetX = 0;
this.offsetZ = 0; this.offsetZ = 0;
this.triangles = []; this.triangles = [];
this.waterLevel = -10; this.waterLevel = 50;
} }
generateHeight(x, z) { generateHeight(x, z) {
const nx = x / 100; const nx = x / 200;
const nz = z / 100; const nz = z / 200;
let y = 0; let y = 0;
y += Math.sin(nx) * 30; y += Math.sin(nx) * 40;
y += Math.cos(nz) * 30; y += Math.cos(nz) * 40;
y += Math.sin(nx * 2 + nz * 0.5) * 15; y += Math.sin(nx * 2 + nz * 0.5) * 20;
y += Math.cos(nz * 2 - nx) * 15; y += Math.cos(nz * 2 - nx) * 20;
y += Math.sin(nx * 3 - nz * 2) * 10;
return y; return y;
} }
@@ -162,7 +163,7 @@
} }
update() { update() {
this.offsetX -= 1; this.offsetX -= 2;
this.offsetZ -= 1; this.offsetZ -= 1;
this.generateTriangles(); this.generateTriangles();
} }
@@ -205,7 +206,7 @@
class Airplane { class Airplane {
constructor() { constructor() {
this.z = 100; this.z = 120;
this.yaw = 0; this.yaw = 0;
this.roll = 0; this.roll = 0;
this.pitch = 0; this.pitch = 0;
@@ -214,7 +215,7 @@
} }
init() { init() {
const w = 15, h = 5, d = 25; const w = 20, h = 8, d = 30;
const vertices = [ const vertices = [
{ x: 0, y: -h, z: 0 }, { x: 0, y: -h, z: 0 },
{ x: w, y: 0, z: d / 2 }, { x: w, y: 0, z: d / 2 },
@@ -238,14 +239,14 @@
} }
update() { update() {
this.yaw = Math.sin(Date.now() / 1000) * 0.2; this.yaw = Math.sin(Date.now() / 1000) * 0.15;
this.roll = Math.sin(Date.now() / 600) * 0.4; this.roll = Math.sin(Date.now() / 600) * 0.3;
this.pitch = Math.cos(Date.now() / 800) * 0.25; this.pitch = Math.cos(Date.now() / 800) * 0.2;
} }
draw() { draw() {
ctx.strokeStyle = '#ff0000'; ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2; ctx.lineWidth = 2.5;
ctx.shadowBlur = 15; ctx.shadowBlur = 15;
ctx.shadowColor = '#ff0000'; ctx.shadowColor = '#ff0000';