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

Extract JavaScript to separate script.js file

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-06 14:49:36 +02:00
1 parent fb2406b864
commit f27f57c6fd
2 files changed
+188 -198
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/index.html
+1 -198
View File
@@ -23,203 +23,6 @@
</head>
<body>
<canvas id="bgCanvas"></canvas>
<script>
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
let width, height;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const camera = {
x: 0,
y: 0,
z: -150,
fov: 400
};
class Point3D {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
project() {
const scale = camera.fov / (camera.fov + this.z - camera.z);
const x2d = this.x * scale + width / 2;
const y2d = this.y * scale + height / 2;
return { x: x2d, y: y2d, scale: scale };
}
}
class Airplane {
constructor() {
this.x = 0;
this.y = -50;
this.z = 50;
this.vx = 0.8;
this.vy = 0.3;
this.vz = 0;
this.roll = 0;
this.pitch = 0;
this.wireframe = [];
this.init();
}
init() {
const w = 12, h = 4, d = 20;
const vertices = [
{ x: 0, y: -h, z: 0 }, // nose tip
{ x: w, y: 0, z: d / 2 }, // right wing tip
{ x: -w, y: 0, z: d / 2 }, // left wing tip
{ x: 0, y: 0, z: -d / 2 }, // tail center
{ x: w, y: 0, z: -d / 4 }, // tail right
{ x: -w, y: 0, z: -d / 4 }, // tail left
{ x: 0, y: h, z: 0 } // bottom
];
const edges = [
[0, 1], [0, 2], [0, 6], // nose connections
[1, 2], // wing base
[1, 4], [2, 5], // wings to tail
[3, 4], [3, 5], // tail cross
[4, 5], // tail base
[6, 1], [6, 2], [6, 3] // bottom connections
];
this.wireframe = { vertices, edges };
}
update() {
this.x += this.vx;
this.y += this.vy * Math.sin(this.x / 50);
this.roll = Math.sin(this.x / 60) * 0.3;
this.pitch = Math.cos(this.x / 60) * 0.2;
if (this.x > width / 2 + 100) {
this.x = -width / 2 - 100;
}
}
draw() {
ctx.strokeStyle = '#00ff88';
ctx.lineWidth = 1.5;
ctx.shadowBlur = 10;
ctx.shadowColor = '#00ff88';
const rotated = this.wireframe.vertices.map(v => {
let x = v.x, y = v.y, z = v.z;
// Rotate around Y (roll)
const cosR = Math.cos(this.roll), sinR = Math.sin(this.roll);
const x1 = x * cosR - z * sinR;
const z1 = x * sinR + z * cosR;
// Rotate around X (pitch)
const cosP = Math.cos(this.pitch), sinP = Math.sin(this.pitch);
const y1 = y * cosP - z1 * sinP;
const z2 = y * sinP + z1 * cosP;
return new Point3D(this.x + x1, this.y + y1, this.z + z2);
});
ctx.beginPath();
this.wireframe.edges.forEach(([a, b]) => {
const p1 = rotated[a].project();
const p2 = rotated[b].project();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
});
ctx.stroke();
ctx.shadowBlur = 0;
}
}
class Landscape {
constructor() {
this.points = [];
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.push(new Point3D(x, y, z));
}
}
}
draw() {
ctx.strokeStyle = '#0088ff';
ctx.lineWidth = 0.8;
ctx.globalAlpha = 0.4;
const grid = [];
this.points.forEach(p => {
const proj = p.project();
const key = Math.round(proj.x / 20) + ',' + Math.round(proj.y / 20);
grid[key] = proj;
});
const spacing = 40;
const size = 200;
for (let x = -size; x <= size; x += spacing) {
for (let z = -size; z <= size; z += spacing) {
const idx = this.points.findIndex(p => Math.round(p.x) === x && Math.round(p.z) === z);
if (idx === -1) continue;
const p = this.points[idx];
const pProj = p.project();
const right = this.points.find(p2 => Math.round(p2.x) === x + spacing && Math.round(p2.z) === z);
const down = this.points.find(p2 => Math.round(p2.x) === x && Math.round(p2.z) === z + spacing);
if (right) {
ctx.beginPath();
ctx.moveTo(pProj.x, pProj.y);
ctx.lineTo(right.project().x, right.project().y);
ctx.stroke();
}
if (down) {
ctx.beginPath();
ctx.moveTo(pProj.x, pProj.y);
ctx.lineTo(down.project().x, down.project().y);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
}
}
const airplane = new Airplane();
const landscape = new Landscape();
function animate() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
landscape.draw();
airplane.update();
airplane.draw();
requestAnimationFrame(animate);
}
animate();
</script>
<script src="script.js"></script>
</body>
</html>
assets/script.js
+187
View File
@@ -0,0 +1,187 @@
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
let width, height;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const camera = {
x: 0,
y: 0,
z: -150,
fov: 400
};
class Point3D {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
project() {
const scale = camera.fov / (camera.fov + this.z - camera.z);
const x2d = this.x * scale + width / 2;
const y2d = this.y * scale + height / 2;
return { x: x2d, y: y2d, scale: scale };
}
}
class Airplane {
constructor() {
this.x = 0;
this.y = -50;
this.z = 50;
this.vx = 0.8;
this.vy = 0.3;
this.vz = 0;
this.roll = 0;
this.pitch = 0;
this.wireframe = [];
this.init();
}
init() {
const w = 12, h = 4, d = 20;
const vertices = [
{ x: 0, y: -h, z: 0 },
{ x: w, y: 0, z: d / 2 },
{ x: -w, y: 0, z: d / 2 },
{ x: 0, y: 0, z: -d / 2 },
{ x: w, y: 0, z: -d / 4 },
{ x: -w, y: 0, z: -d / 4 },
{ x: 0, y: h, z: 0 }
];
const edges = [
[0, 1], [0, 2], [0, 6],
[1, 2],
[1, 4], [2, 5],
[3, 4], [3, 5],
[4, 5],
[6, 1], [6, 2], [6, 3]
];
this.wireframe = { vertices, edges };
}
update() {
this.x += this.vx;
this.y += this.vy * Math.sin(this.x / 50);
this.roll = Math.sin(this.x / 60) * 0.3;
this.pitch = Math.cos(this.x / 60) * 0.2;
if (this.x > width / 2 + 100) {
this.x = -width / 2 - 100;
}
}
draw() {
ctx.strokeStyle = '#00ff88';
ctx.lineWidth = 1.5;
ctx.shadowBlur = 10;
ctx.shadowColor = '#00ff88';
const rotated = this.wireframe.vertices.map(v => {
let x = v.x, y = v.y, z = v.z;
const cosR = Math.cos(this.roll), sinR = Math.sin(this.roll);
const x1 = x * cosR - z * sinR;
const z1 = x * sinR + z * cosR;
const cosP = Math.cos(this.pitch), sinP = Math.sin(this.pitch);
const y1 = y * cosP - z1 * sinP;
const z2 = y * sinP + z1 * cosP;
return new Point3D(this.x + x1, this.y + y1, this.z + z2);
});
ctx.beginPath();
this.wireframe.edges.forEach(([a, b]) => {
const p1 = rotated[a].project();
const p2 = rotated[b].project();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
});
ctx.stroke();
ctx.shadowBlur = 0;
}
}
class Landscape {
constructor() {
this.points = [];
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.push(new Point3D(x, y, z));
}
}
}
draw() {
ctx.strokeStyle = '#0088ff';
ctx.lineWidth = 0.8;
ctx.globalAlpha = 0.4;
const spacing = 40;
const size = 200;
for (let x = -size; x <= size; x += spacing) {
for (let z = -size; z <= size; z += spacing) {
const idx = this.points.findIndex(p => Math.round(p.x) === x && Math.round(p.z) === z);
if (idx === -1) continue;
const p = this.points[idx];
const pProj = p.project();
const right = this.points.find(p2 => Math.round(p2.x) === x + spacing && Math.round(p2.z) === z);
const down = this.points.find(p2 => Math.round(p2.x) === x && Math.round(p2.z) === z + spacing);
if (right) {
ctx.beginPath();
ctx.moveTo(pProj.x, pProj.y);
ctx.lineTo(right.project().x, right.project().y);
ctx.stroke();
}
if (down) {
ctx.beginPath();
ctx.moveTo(pProj.x, pProj.y);
ctx.lineTo(down.project().x, down.project().y);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
}
}
const airplane = new Airplane();
const landscape = new Landscape();
function animate() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
landscape.draw();
airplane.update();
airplane.draw();
requestAnimationFrame(animate);
}
animate();