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

Empty repo

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 06:48:20 +02:00
1 parent 57ee4c4798
commit edb5e333ab
6 files changed
-509
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.dockerignore
-9
View File
@@ -1,9 +0,0 @@
# Exclude everything by default
*
# But include these
!Dockerfile
!docker-compose.yml
!.dockerignore
!assets/
!default.conf
Dockerfile
-5
View File
@@ -1,5 +0,0 @@
FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d/default.conf
COPY assets/ /usr/share/nginx/html/
EXPOSE 58881
CMD ["nginx", "-g", "daemon off;"]
assets/index.html
-290
View File
@@ -1,290 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isometric Voxel Terrain</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var W, H;
var TILE = 32;
var GAP = 0;
var HEIGHT_UNIT = 6;
function resize() {
W = c.width = window.innerWidth;
H = c.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
var angle = Math.PI / 6;
var cosA = Math.cos(angle);
var sinA = Math.sin(angle);
function project(x, y, z) {
var scale = 1;
var isoX = (x - y) * cosA * scale;
var isoY = ((x + y) * sinA - z) * scale;
var sx = isoX + W / 2;
var sy = isoY + H / 2;
return [sx, sy];
}
function getHeight(x, y) {
var n = perlin2D(x * 0.02, y * 0.02, 4);
return 10 + Math.round(n * 5);
}
function fade(t) {
return t * t * t * (t * (t * 6 - 15) + 10);
}
function lerp(a, b, t) {
return a + t * (b - a);
}
function grad2D(hash, x, y) {
var h = hash & 3;
var u = h < 2 ? x : y;
var v = h < 2 ? y : x;
return ((h & 1) ? -u : u) + ((h & 2) ? -2 * v : 2 * v);
}
var perm = [];
for (var i = 0; i < 256; i++) perm[i] = Math.floor(Math.random() * 256);
for (var i = 0; i < 256; i++) perm[i + 256] = perm[i];
function perlin2D(x, y, octaves) {
var total = 0;
var frequency = 1;
var amplitude = 1;
var maxValue = 0;
for (var i = 0; i < octaves; i++) {
var xi = Math.floor(x * frequency) & 255;
var yi = Math.floor(y * frequency) & 255;
var xf = x * frequency - Math.floor(x * frequency);
var yf = y * frequency - Math.floor(y * frequency);
var u = fade(xf);
var v = fade(yf);
var aa = perm[perm[xi] + yi];
var ab = perm[perm[xi] + yi + 1];
var ba = perm[perm[xi + 1] + yi];
var bb = perm[perm[xi + 1] + yi + 1];
var x1 = lerp(grad2D(aa, xf, yf), grad2D(ba, xf - 1, yf), u);
var x2 = lerp(grad2D(ab, xf, yf - 1), grad2D(bb, xf - 1, yf - 1), u);
total += lerp(x1, x2, v) * amplitude;
maxValue += amplitude;
amplitude *= 0.5;
frequency *= 2;
}
return total / maxValue;
}
function isWater(h) {
return false;
}
var tiles = [];
function generateTiles() {
tiles = [];
var rangeX = Math.ceil(W / (TILE * cosA * 2)) + 2;
var rangeY = Math.ceil(H / (TILE * sinA * 2)) + 2;
for (var x = -rangeX; x <= rangeX; x++) {
for (var y = -rangeY; y <= rangeY; y++) {
var wx = x * TILE;
var wy = y * TILE;
var h = getHeight(wx, wy);
tiles.push({ x: wx, y: wy, h: h });
}
}
}
function drawTile(wx, wy, h, water, hRight, hBack, inShadow) {
var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var top3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var heightFactor = Math.min(1, Math.max(0, h / 15));
var topR = Math.floor(90 - heightFactor * 30);
var topG = Math.floor(138 - heightFactor * 30);
var topB = Math.floor(90 - heightFactor * 30);
var topColor = 'rgb(' + topR + ',' + topG + ',' + topB + ')';
var rightColor = '#6b4423';
var leftColor = '#3d2614';
ctx.fillStyle = topColor;
ctx.beginPath();
ctx.moveTo(top1[0], top1[1]);
ctx.lineTo(top2[0], top2[1]);
ctx.lineTo(top3[0], top3[1]);
ctx.lineTo(top4[0], top4[1]);
ctx.closePath();
ctx.fill();
if (hRight < h) {
ctx.fillStyle = rightColor;
ctx.beginPath();
ctx.moveTo(top2[0], top2[1]);
ctx.lineTo(top3[0], top3[1]);
ctx.lineTo(top3[0], top3[1] + (h - hRight) * HEIGHT_UNIT);
ctx.lineTo(top2[0], top2[1] + (h - hRight) * HEIGHT_UNIT);
ctx.closePath();
ctx.fill();
}
if (hBack < h) {
ctx.fillStyle = leftColor;
ctx.beginPath();
ctx.moveTo(top1[0], top1[1]);
ctx.lineTo(top2[0], top2[1]);
ctx.lineTo(top2[0], top2[1] + (h - hBack) * HEIGHT_UNIT);
ctx.lineTo(top1[0], top1[1] + (h - hBack) * HEIGHT_UNIT);
ctx.closePath();
ctx.fill();
}
}
function drawTiles() {
tiles.sort(function(a, b) {
return ((a.x + a.y) - (b.x + b.y));
});
var heightMap = {};
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
heightMap[t.x + ',' + t.y] = t.h;
}
var renderList = [];
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
var wx = t.x, wy = t.y, h = t.h;
var water = isWater(h);
for (var level = 1; level <= h; level++) {
var hRight;
if (level > (heightMap[(wx + TILE) + ',' + wy] || 0)) {
hRight = level - 1;
} else {
hRight = level;
}
var hBack;
if (level > (heightMap[wx + ',' + (wy + TILE)] || 0)) {
hBack = level - 1;
} else {
hBack = level;
}
renderList.push({
type: 'tile',
wx: wx, wy: wy, level: level,
hRight: hRight, hBack: hBack,
depth: wx + wy + level * 0.001
});
}
if (h > 0) {
var hLeftNeighbor = heightMap[(wx - TILE) + ',' + wy] || 0;
var hFrontNeighbor = heightMap[wx + ',' + (wy + TILE)] || 0;
var shadowFromRight = hLeftNeighbor - h;
var shadowFromFront = hFrontNeighbor - h;
if (shadowFromRight > 0) {
var shadowW = Math.min(shadowFromRight * 4, TILE * 2);
var edge1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
var edge4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var far1 = project(wx + GAP/2 - shadowW, wy + TILE - GAP/2 + shadowW, h * HEIGHT_UNIT);
var far2 = project(wx + GAP/2 - shadowW, wy + GAP/2 - shadowW, h * HEIGHT_UNIT);
renderList.push({
type: 'shadow',
points: [
{ x: edge4[0], y: edge4[1] },
{ x: edge1[0], y: edge1[1] },
{ x: far1[0], y: far1[1] },
{ x: far2[0], y: far2[1] }
],
depth: wx + wy + h + 0.999
});
}
if (shadowFromFront > 0) {
var shadowW = Math.min(shadowFromFront * 4, TILE * 2);
var edge3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var edge4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
var far1 = project(wx + TILE - GAP/2 + shadowW, wy + GAP/2 - shadowW, h * HEIGHT_UNIT);
var far2 = project(wx + GAP/2 + shadowW, wy + GAP/2 - shadowW, h * HEIGHT_UNIT);
renderList.push({
type: 'shadow',
points: [
{ x: edge4[0], y: edge4[1] },
{ x: edge3[0], y: edge3[1] },
{ x: far1[0], y: far1[1] },
{ x: far2[0], y: far2[1] }
],
depth: wx + wy + h + 0.999
});
}
}
}
renderList.sort(function(a, b) { return a.depth - b.depth; });
for (var i = 0; i < renderList.length; i++) {
var item = renderList[i];
if (item.type === 'tile') {
drawTile(item.wx, item.wy, item.level, true, item.hRight, item.hBack, false);
} else {
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.beginPath();
ctx.moveTo(item.points[0].x, item.points[0].y);
ctx.lineTo(item.points[1].x, item.points[1].y);
ctx.lineTo(item.points[2].x, item.points[2].y);
ctx.lineTo(item.points[3].x, item.points[3].y);
ctx.closePath();
ctx.fill();
}
}
}
function applyLighting(color, factor) {
var r = parseInt(color.substr(1, 2), 16);
var g = parseInt(color.substr(3, 2), 16);
var b = parseInt(color.substr(5, 2), 16);
r = Math.floor(r * factor);
g = Math.floor(g * factor);
b = Math.floor(b * factor);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
function frame() {
ctx.fillStyle = '#001020';
ctx.fillRect(0, 0, W, H);
generateTiles();
drawTiles();
requestAnimationFrame(frame);
}
frame();
</script>
</body>
</html>
assets/script.js
-187
View File
@@ -1,187 +0,0 @@
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();
default.conf
-10
View File
@@ -1,10 +0,0 @@
server {
listen 58881 default_server;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
docker-compose.yml
-8
View File
@@ -1,8 +0,0 @@
version: '3.8'
services:
wireframe:
build: .
ports:
- "58881:58881"
restart: unless-stopped