<!DOCTYPE html>
<html lang="en">
<head>
<script src="/content/7e37766541506810ba6399c4b2735121f508bd9209df43dd200bf2316b014594i0"></script>
<style>
html, body { margin: 0; padding: 0; }
canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>
<meta charset="utf-8" />
</head>
<body>
<script>
let rotateYAngle = 0;
let manualRotateX = 0;
let manualRotateY = 0;
let lastMouseX, lastMouseY;
let isDragging = false;
let greenTexture;
let stars = [];
function setup() {
createCanvas(800, 800, WEBGL);
greenTexture = createGraphics(200, 200);
greenTexture.colorMode(HSB, 255);
greenTexture.background(100, 200, 180);
greenTexture.stroke(200);
greenTexture.strokeWeight(1);
let nodes = [];
let cols = 8;
let rows = 10;
for (let x = 0; x <= cols; x++) {
for (let y = 0; y <= rows; y++) {
let px = (x / cols) * greenTexture.width + random(-10, 10);
let py = (y / rows) * greenTexture.height + random(-10, 10);
nodes.push({ x: px, y: py });
greenTexture.fill(60, 200, 255);
greenTexture.noStroke();
greenTexture.ellipse(px, py, 5, 5);
}
}
greenTexture.stroke(200);
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
let d = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
if (d < 50) {
greenTexture.line(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
}
}
}
for (let i = 0; i < 500; i++) {
stars.push({
x: random(-width * 2, width * 2),
y: random(-height * 2, height * 2),
z: random(-2000, -500),
size: random(2, 5),
brightness: random(150, 255)
});
}
}
function draw() {
background(0);
drawStars();
drawBackgroundWithOrangeGlow();
ambientLight(30);
pointLight(255, 0, 0, -300, -200, 300);
pointLight(0, 0, 255, 300, -200, 300);
pointLight(0, 255, 0, 0, 200, 300);
pointLight(255, 140, 0, 0, 0, -500);
if (!isDragging) {
rotateYAngle += radians(0.5);
}
push();
rotateX(manualRotateX);
rotateY(rotateYAngle + manualRotateY);
drawSpaceship();
pop();
}
function drawStars() {
push();
noStroke();
translate(0, 0, 0);
for (let star of stars) {
fill(star.brightness);
push();
translate(star.x, star.y, star.z);
sphere(star.size);
pop();
}
pop();
}
function drawBackgroundWithOrangeGlow() {
push();
resetMatrix();
translate(-width / 2, -height / 2, -600);
noStroke();
for (let i = 0; i < 10; i++) {
let alpha = map(i, 0, 10, 100, 0);
fill(210, 105, 30, alpha);
rect(0, 0, width, height);
}
pop();
}
function drawSpaceship() {
push();
texture(greenTexture);
specularMaterial(100);
shininess(50);
ellipsoid(150, 40, 150);
pop();
push();
translate(0, -30, 0);
fill(200, 200, 255, 80);
noStroke();
sphere(70);
pop();
push();
translate(0, 10, -120);
texture(greenTexture);
box(120, 5, 30);
pop();
push();
fill('#808080');
translate(-70, 40, -50);
box(10, 50, 10);
pop();
push();
fill('#808080');
translate(70, 40, -50);
box(10, 50, 10);
pop();
push();
translate(-60, 20, -140);
drawThruster();
pop();
push();
translate(60, 20, -140);
drawThruster();
pop();
}
function drawThruster() {
fill('#808080');
cylinder(10, 30);
push();
translate(0, 0, -20);
emissiveMaterial(0, 100, 255);
sphere(10);
pop();
}
function mousePressed() {
lastMouseX = mouseX;
lastMouseY = mouseY;
isDragging = true;
}
function mouseDragged() {
let dx = mouseX - lastMouseX;
let dy = mouseY - lastMouseY;
manualRotateY += dx * 0.01;
manualRotateX -= dy * 0.01;
lastMouseX = mouseX;
lastMouseY = mouseY;
}
function mouseReleased() {
isDragging = false;
}
</script>
</body>
</html>