Hugging Face's logo

Spaces:
erdes
/
galaxy
Running

App Files Community
galaxy / index.html
erdes's picture
erdes
Create a 3D particle galaxy with swirling nebulas, dynamic lighting. - Initial Deployment
d3d9660 verified
Raw History Blame Contribute Delete
20.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Particle Galaxy</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
canvas {
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.title {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: rgba(200, 220, 255, 0.8);
text-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
letter-spacing: 2px;
}
.controls {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
color: rgba(180, 200, 255, 0.7);
font-size: 0.9rem;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(200, 220, 255, 0.8);
font-size: 1.2rem;
text-align: center;
}
.nebula-info {
position: absolute;
top: 80px;
right: 20px;
max-width: 300px;
background: rgba(10, 15, 30, 0.6);
border-radius: 10px;
padding: 15px;
backdrop-filter: blur(5px);
border: 1px solid rgba(100, 150, 255, 0.2);
pointer-events: auto;
}
.nebula-title {
font-size: 1.2rem;
color: #8bb4ff;
margin-bottom: 8px;
}
.nebula-desc {
font-size: 0.9rem;
color: #a0c0ff;
line-height: 1.4;
}
.stats {
position: absolute;
top: 20px;
right: 20px;
color: rgba(180, 200, 255, 0.7);
font-size: 0.8rem;
}
.toggle-ui {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(10, 15, 30, 0.6);
color: #a0c0ff;
border: 1px solid rgba(100, 150, 255, 0.2);
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
}
.toggle-ui:hover {
background: rgba(20, 40, 80, 0.7);
}
</style>
</head>
<body class="bg-black">
<div class="overlay">
<div class="title">COSMIC NEBULA EXPLORER</div>
<div class="nebula-info">
<div class="nebula-title">Orion Nebula</div>
<div class="nebula-desc">A diffuse nebula situated in the Milky Way, being one of the brightest nebulae visible to the naked eye. This stellar nursery is 1,344 light-years away.</div>
</div>
<div class="stats">Particles: 25,000 | FPS: <span id="fps">60</span></div>
<div class="controls">Drag to rotate | Scroll to zoom | Click to create supernova</div>
<button class="toggle-ui" onclick="toggleUI()">Toggle UI</button>
</div>
<div class="loading" id="loading">Initializing cosmic simulation...</div>
<script>
// Main variables
let scene, camera, renderer, controls;
let particleSystem, nebulaSystem;
let stars = [];
let clock = new THREE.Clock();
let uiVisible = true;
// Configuration
const config = {
particleCount: 25000,
nebulaCount: 8,
galaxySize: 2000,
rotationSpeed: 0.1,
nebulaColors: [
new THREE.Color(0.4, 0.2, 0.8), // Purple
new THREE.Color(0.2, 0.5, 0.9), // Blue
new THREE.Color(0.8, 0.3, 0.4), // Red
new THREE.Color(0.3, 0.8, 0.5) // Green
],
starColors: [
new THREE.Color(1.0, 0.9, 0.7), // Yellow
new THREE.Color(0.9, 0.9, 1.0), // Blue-white
new THREE.Color(1.0, 0.7, 0.7) // Red
]
};
// Initialize the scene
function init() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000010);
scene.fog = new THREE.FogExp2(0x000020, 0.0008);
// Create camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
camera.position.z = 500;
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// Add orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
controls.zoomSpeed = 1.2;
// Create galaxy
createGalaxy();
// Add ambient light
const ambientLight = new THREE.AmbientLight(0x222244);
scene.add(ambientLight);
// Add directional light for stars
const starLight = new THREE.DirectionalLight(0xffffff, 0.5);
starLight.position.set(1, 1, 1);
scene.add(starLight);
// Add point lights for nebulas
for (let i = 0; i < config.nebulaCount; i++) {
const light = new THREE.PointLight(config.nebulaColors[Math.floor(Math.random() * config.nebulaColors.length)], 0.8, 500);
light.position.set(
(Math.random() - 0.5) * config.galaxySize,
(Math.random() - 0.5) * config.galaxySize * 0.2,
(Math.random() - 0.5) * config.galaxySize
);
scene.add(light);
}
// Handle window resize
window.addEventListener('resize', onWindowResize);
// Handle mouse click for supernova
renderer.domElement.addEventListener('click', createSupernova);
// Hide loading screen
document.getElementById('loading').style.display = 'none';
// Start animation
animate();
}
// Create galaxy with stars and nebulas
function createGalaxy() {
// Create star particles
const starGeometry = new THREE.BufferGeometry();
const starPositions = new Float32Array(config.particleCount * 3);
const starColors = new Float32Array(config.particleCount * 3);
const starSizes = new Float32Array(config.particleCount);
// Create nebula particles
const nebulaGeometry = new THREE.BufferGeometry();
const nebulaPositions = new Float32Array(config.nebulaCount * 3);
const nebulaColors = new Float32Array(config.nebulaCount * 3);
const nebulaSizes = new Float32Array(config.nebulaCount);
// Create star positions and attributes
for (let i = 0; i < config.particleCount; i++) {
const i3 = i * 3;
// Position stars in a spiral galaxy pattern
const radius = Math.random() * config.galaxySize;
const angle = Math.random() * Math.PI * 2;
const spiral = Math.random() * 0.4;
const height = (Math.random() - 0.5) * config.galaxySize * 0.1;
starPositions[i3] = Math.cos(angle + spiral * radius) * radius;
starPositions[i3 + 1] = height;
starPositions[i3 + 2] = Math.sin(angle + spiral * radius) * radius;
// Assign star color based on position
const colorIndex = Math.floor(Math.random() * config.starColors.length);
const color = config.starColors[colorIndex];
starColors[i3] = color.r;
starColors[i3 + 1] = color.g;
starColors[i3 + 2] = color.b;
// Randomize star size
starSizes[i] = Math.random() * 2.0 + 0.5;
// Store star data for animation
stars.push({
radius: radius,
angle: angle,
spiral: spiral,
height: height,
speed: 0.1 + Math.random() * 0.3
});
}
// Create nebula positions and attributes
for (let i = 0; i < config.nebulaCount; i++) {
const i3 = i * 3;
// Position nebulas randomly in the galaxy
const radius = Math.random() * config.galaxySize * 0.7;
const angle = Math.random() * Math.PI * 2;
const height = (Math.random() - 0.5) * config.galaxySize * 0.05;
nebulaPositions[i3] = Math.cos(angle) * radius;
nebulaPositions[i3 + 1] = height;
nebulaPositions[i3 + 2] = Math.sin(angle) * radius;
// Assign nebula color
const color = config.nebulaColors[Math.floor(Math.random() * config.nebulaColors.length)];
nebulaColors[i3] = color.r;
nebulaColors[i3 + 1] = color.g;
nebulaColors[i3 + 2] = color.b;
// Set nebula size
nebulaSizes[i] = 50 + Math.random() * 100;
}
// Set star geometry attributes
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3));
starGeometry.setAttribute('size', new THREE.BufferAttribute(starSizes, 1));
// Set nebula geometry attributes
nebulaGeometry.setAttribute('position', new THREE.BufferAttribute(nebulaPositions, 3));
nebulaGeometry.setAttribute('color', new THREE.BufferAttribute(nebulaColors, 3));
nebulaGeometry.setAttribute('size', new THREE.BufferAttribute(nebulaSizes, 1));
// Create star material
const starMaterial = new THREE.PointsMaterial({
size: 1.5,
vertexColors: true,
transparent: true,
opacity: 0.9,
sizeAttenuation: true
});
// Create nebula material
const nebulaMaterial = new THREE.PointsMaterial({
size: 1,
vertexColors: true,
transparent: true,
opacity: 0.3,
sizeAttenuation: true,
blending: THREE.AdditiveBlending
});
// Create particle systems
particleSystem = new THREE.Points(starGeometry, starMaterial);
nebulaSystem = new THREE.Points(nebulaGeometry, nebulaMaterial);
// Add to scene
scene.add(particleSystem);
scene.add(nebulaSystem);
}
// Animate the galaxy
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
const elapsedTime = clock.getElapsedTime();
// Update controls
controls.update();
// Animate stars
const positions = particleSystem.geometry.attributes.position.array;
for (let i = 0; i < config.particleCount; i++) {
const i3 = i * 3;
const star = stars[i];
// Update angle based on radius and speed
star.angle += delta * star.speed * (config.galaxySize / (star.radius + 1)) * 0.1;
// Calculate new position
positions[i3] = Math.cos(star.angle + star.spiral * star.radius) * star.radius;
positions[i3 + 2] = Math.sin(star.angle + star.spiral * star.radius) * star.radius;
// Add subtle vertical movement
positions[i3 + 1] = star.height + Math.sin(elapsedTime * 0.3 + i) * 5;
}
// Mark position attribute as needing update
particleSystem.geometry.attributes.position.needsUpdate = true;
// Animate nebulas
const nebulaPositions = nebulaSystem.geometry.attributes.position.array;
for (let i = 0; i < config.nebulaCount; i++) {
const i3 = i * 3;
// Move nebulas in gentle swirling motion
nebulaPositions[i3] += Math.sin(elapsedTime * 0.1 + i) * 0.3;
nebulaPositions[i3 + 1] += Math.cos(elapsedTime * 0.15 + i) * 0.2;
nebulaPositions[i3 + 2] += Math.sin(elapsedTime * 0.12 + i * 2) * 0.4;
}
nebulaSystem.geometry.attributes.position.needsUpdate = true;
// Rotate entire galaxy
particleSystem.rotation.y += delta * config.rotationSpeed * 0.05;
nebulaSystem.rotation.y += delta * config.rotationSpeed * 0.03;
// Update FPS counter
updateFPS(delta);
// Render the scene
renderer.render(scene, camera);
}
// Create supernova effect on click
function createSupernova(event) {
// Calculate mouse position in normalized device coordinates
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// Create explosion at mouse position
const explosionGeometry = new THREE.BufferGeometry();
const explosionCount = 2000;
const positions = new Float32Array(explosionCount * 3);
const colors = new Float32Array(explosionCount * 3);
const sizes = new Float32Array(explosionCount);
// Get explosion position from mouse
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(particleSystem);
let explosionPosition;
if (intersects.length > 0) {
explosionPosition = intersects[0].point;
} else {
// If no intersection, create explosion in front of camera
explosionPosition = new THREE.Vector3();
raycaster.ray.at(500, explosionPosition);
}
// Create explosion particles
const explosionColor = new THREE.Color(
0.9 + Math.random() * 0.1,
0.7 + Math.random() * 0.2,
0.3 + Math.random() * 0.2
);
for (let i = 0; i < explosionCount; i++) {
const i3 = i * 3;
// Random direction
const angle = Math.random() * Math.PI * 2;
const elevation = Math.random() * Math.PI - Math.PI / 2;
const distance = Math.random() * 50;
positions[i3] = explosionPosition.x + Math.cos(angle) * Math.cos(elevation) * distance;
positions[i3 + 1] = explosionPosition.y + Math.sin(elevation) * distance;
positions[i3 + 2] = explosionPosition.z + Math.sin(angle) * Math.cos(elevation) * distance;
colors[i3] = explosionColor.r;
colors[i3 + 1] = explosionColor.g;
colors[i3 + 2] = explosionColor.b;
sizes[i] = Math.random() * 4 + 1;
}
explosionGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
explosionGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
explosionGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
const explosionMaterial = new THREE.PointsMaterial({
size: 2,
vertexColors: true,
transparent: true,
opacity: 0.9,
sizeAttenuation: true,
blending: THREE.AdditiveBlending
});
const explosion = new THREE.Points(explosionGeometry, explosionMaterial);
scene.add(explosion);
// Animate and remove explosion
let explosionTime = 0;
const explosionDuration = 2.0;
function updateExplosion() {
explosionTime += 0.016;
const progress = explosionTime / explosionDuration;
if (progress > 1) {
scene.remove(explosion);
return;
}
// Fade out particles
explosionMaterial.opacity = 1 - progress;
// Expand particles
const positions = explosion.geometry.attributes.position.array;
for (let i = 0; i < explosionCount; i++) {
const i3 = i * 3;
positions[i3] *= 1.02;
positions[i3 + 1] *= 1.02;
positions[i3 + 2] *= 1.02;
}
explosion.geometry.attributes.position.needsUpdate = true;
requestAnimationFrame(updateExplosion);
}
updateExplosion();
}
// Update FPS counter
function updateFPS(delta) {
const fpsElement = document.getElementById('fps');
if (fpsElement) {
const fps = Math.round(1 / delta);
fpsElement.textContent = fps;
}
}
// Handle window resize
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Toggle UI visibility
function toggleUI() {
uiVisible = !uiVisible;
const overlay = document.querySelector('.overlay');
overlay.style.opacity = uiVisible ? '1' : '0';
}
// Initialize when page loads
window.onload = init;
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=erdes/galaxy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>