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

Fix: isometric view, moving landscape with cleanup

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 15:17:32 +02:00
1 parent a3fae177fa
commit 99827e420b
1 file changed
+39 -33
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.html
+39 -33
View File
@@ -41,8 +41,8 @@
resize();
const camera = {
fov: 600,
zoom: 1
fov: 800,
angle: Math.PI / 4
};
class Point3D {
@@ -54,8 +54,10 @@
project() {
const scale = camera.fov / (camera.fov + this.z);
const x2d = this.x * scale + width / 2;
const y2d = this.y * scale + height / 2;
const xIso = this.x - this.z;
const yIso = (this.x + this.z) * 0.5 - this.y;
const x2d = xIso * scale + width / 2;
const y2d = yIso * scale + height / 3;
return { x: x2d, y: y2d, scale: scale };
}
}
@@ -63,21 +65,12 @@
class Landscape {
constructor() {
this.gridSize = 60;
this.gridRange = 30;
this.offsetZ = 0;
this.gridRange = 40;
this.offsetX = -this.gridRange * this.gridSize;
this.offsetZ = -this.gridRange * this.gridSize;
this.points = new Map();
this.waterLevel = -15;
this.init();
}
init() {
const spacing = 40;
for (let x = -200; x <= 200; x += spacing) {
for (let z = -200; z <= 200; z += spacing) {
const y = Math.sin(x / 30) * 20 + Math.cos(z / 30) * 20 + Math.random() * 10;
this.points.set(`${x},${z}`, new Point3D(x, y, z));
}
}
this.updateOffset();
}
getKey(x, z) {
@@ -100,21 +93,22 @@
return y < this.waterLevel;
}
update() {
updateOffset() {
this.offsetX -= 1;
this.offsetZ -= 0.5;
if (this.offsetZ < -this.gridSize) {
this.offsetZ = 0;
if (this.offsetX < -this.gridSize) {
this.offsetX = 0;
}
}
getPoint(x, z) {
const key = this.getKey(x, z + this.offsetZ);
const key = this.getKey(x + this.offsetX, z + this.offsetZ);
if (this.points.has(key)) {
return this.points.get(key);
}
const worldX = x * this.gridSize;
const worldZ = (z + this.offsetZ / this.gridSize) * this.gridSize;
const worldX = x * this.gridSize + this.offsetX;
const worldZ = z * this.gridSize + this.offsetZ;
const y = this.generateHeight(worldX, worldZ);
const point = new Point3D(worldX, y, worldZ);
point.isWater = this.isWater(worldX, worldZ, y);
@@ -122,12 +116,25 @@
return point;
}
update() {
this.updateOffset();
this.points.forEach((val, key) => {
const [gx, gz] = key.split(',').map(Number);
if (gx > this.gridRange || gz > this.gridRange) {
this.points.delete(key);
}
});
}
draw() {
ctx.lineWidth = 1;
ctx.globalAlpha = 0.6;
for (let x = -this.gridRange; x <= this.gridRange; x++) {
for (let z = 0; z <= this.gridRange * 2; z++) {
const minIdx = -this.gridRange;
const maxIdx = this.gridRange;
for (let x = minIdx; x <= maxIdx; x++) {
for (let z = minIdx; z <= maxIdx; z++) {
const p1 = this.getPoint(x, z);
const p2 = this.getPoint(x + 1, z);
const p3 = this.getPoint(x, z + 1);
@@ -144,14 +151,14 @@
ctx.globalAlpha = 0.6;
}
if (x < this.gridRange) {
if (x < maxIdx) {
ctx.beginPath();
ctx.moveTo(proj1.x, proj1.y);
ctx.lineTo(proj2.x, proj2.y);
ctx.stroke();
}
if (z < this.gridRange * 2) {
if (z < maxIdx) {
ctx.beginPath();
ctx.moveTo(proj1.x, proj1.y);
ctx.lineTo(proj3.x, proj3.y);
@@ -166,11 +173,10 @@
class Airplane {
constructor() {
this.z = 80;
this.vx = 1.5;
this.z = 100;
this.yaw = 0;
this.roll = 0;
this.pitch = 0;
this.yaw = 0;
this.wireframe = [];
this.init();
}
@@ -200,9 +206,9 @@
}
update() {
this.yaw = (Date.now() / 1000) * 0.3;
this.roll = Math.sin(Date.now() / 800) * 0.4;
this.pitch = Math.cos(Date.now() / 600) * 0.25;
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;
}
draw() {