diff --git a/assets/index.html b/assets/index.html
index f0a6568..b36aa02 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -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() {