107 lines
2 KiB
JavaScript
107 lines
2 KiB
JavaScript
const BACKGROUND = "#444444";
|
|
const FOREGROUND = "#60FF60";
|
|
|
|
let game = document.getElementById("game");
|
|
game.width = 800;
|
|
game.height = 800;
|
|
|
|
const ctx = game.getContext("2d");
|
|
|
|
function clear() {
|
|
ctx.fillStyle = BACKGROUND;
|
|
ctx.fillRect(0, 0, game.width, game.height);
|
|
}
|
|
|
|
function point({ x, y }) {
|
|
const s = 20;
|
|
ctx.fillStyle = FOREGROUND;
|
|
ctx.fillRect(x - s / 2, y - s / 2, s, s);
|
|
}
|
|
|
|
function line(p1, p2) {
|
|
ctx.lineWidth = 3;
|
|
ctx.strokeStyle = FOREGROUND;
|
|
ctx.beginPath();
|
|
ctx.moveTo(p1.x, p1.y);
|
|
ctx.lineTo(p2.x, p2.y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function screen(p) {
|
|
return {
|
|
x: ((p.x + 1) / 2) * game.width,
|
|
y: (1 - (p.y + 1) / 2) * game.height,
|
|
};
|
|
}
|
|
|
|
function project({ x, y, z }) {
|
|
return {
|
|
x: x / z,
|
|
y: y / z,
|
|
};
|
|
}
|
|
|
|
const FPS = 60;
|
|
let dz = 1;
|
|
let angle = 0;
|
|
|
|
//cube
|
|
// const vs = [
|
|
// { x: 0.25, y: 0.25, z: 0.25 },
|
|
// { x: -0.25, y: 0.25, z: 0.25 },
|
|
// { x: -0.25, y: -0.25, z: 0.25 },
|
|
// { x: 0.25, y: -0.25, z: 0.25 },
|
|
|
|
|
|
// { x: 0.25, y: 0.25, z: -0.25 },
|
|
// { x: -0.25, y: 0.25, z: -0.25 },
|
|
// { x: -0.25, y: -0.25, z: -0.25 },
|
|
// { x: 0.25, y: -0.25, z: -0.25 },
|
|
// ];
|
|
|
|
// const fs = [
|
|
// [0, 1, 2, 3],
|
|
// [4, 5, 6, 7],
|
|
// [0, 4],
|
|
// [1, 5],
|
|
// [2, 6],
|
|
// [3, 7],
|
|
// ]
|
|
|
|
|
|
function translate_z({ x, y, z }, dz) {
|
|
return { x: x, y: y, z: z + dz };
|
|
}
|
|
|
|
function rotate_xz({ x, y, z }, angle) {
|
|
const cos = Math.cos(angle);
|
|
const sin = Math.sin(angle);
|
|
return {
|
|
x: x * cos - z * sin,
|
|
y: y,
|
|
z: x * sin + z * cos,
|
|
};
|
|
}
|
|
|
|
function frame() {
|
|
const dt = 1 / FPS;
|
|
// dz += 1 * dt;
|
|
angle += Math.PI * dt;
|
|
|
|
clear();
|
|
|
|
// for (const v of vs) {
|
|
// point(screen(project(translate_z(rotate_xz(v, angle), dz))));
|
|
// }
|
|
|
|
for (const f of fs) {
|
|
for (let i = 0; i < f.length; i++) {
|
|
const a = vs[f[i]];
|
|
const b = vs[f[(i + 1) % f.length]];
|
|
line(screen(project(translate_z(rotate_xz(a, angle), dz))), screen(project(translate_z(rotate_xz(b, angle), dz))));
|
|
}
|
|
}
|
|
|
|
setTimeout(frame, 1000 / FPS);
|
|
}
|
|
setTimeout(frame, 1000 / FPS);
|