Spaces:

LukasBe
/

simulator

Running

App Files Files Community

LukasBe commited on Apr 2

Commit

89f819b

verified ·

1 Parent(s): eab14e9

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +481 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Simulator
-emoji: 🏃
-colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: simulator
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,481 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Wormhole Simulator</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/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        #canvas {
+            display: block;
+        }
+        #ui {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 20px;
+            border-radius: 20px;
+            display: flex;
+            gap: 10px;
+            pointer-events: all;
+        }
+        button {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            padding: 8px 16px;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        #info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: white;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 10px;
+            max-width: 300px;
+        }
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: white;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.2; }
+            50% { opacity: 1; }
+            100% { opacity: 0.2; }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas"></div>
+    <div id="ui">
+        <div id="info">
+            <h1 class="text-xl font-bold mb-2">Wormhole Simulator</h1>
+            <p class="text-sm">Experience a journey through a cosmic wormhole with dynamic effects.</p>
+            <div class="mt-2 text-xs">
+                <div class="flex items-center"><div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> Stars</div>
+                <div class="flex items-center"><div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> Sparks</div>
+                <div class="flex items-center"><div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> Explosions</div>
+                <div class="flex items-center"><div class="w-3 h-3 bg-gray-400 rounded-full mr-2"></div> Debris</div>
+            </div>
+        </div>
+        <div id="controls">
+            <button id="startBtn">Start Journey</button>
+            <button id="resetBtn">Reset</button>
+            <button id="autoPilot">Auto Pilot</button>
+        </div>
+    </div>
+    <script>
+        // Main Three.js variables
+        let scene, camera, renderer, controls;
+        let wormhole, ship, particles = [];
+        let isAnimating = false;
+        let autoPilot = false;
+        let journeyProgress = 0;
+        let journeySpeed = 0.001;
+        let explosionParticles = [];
+        let debrisParticles = [];
+        let sparkParticles = [];
+        let starParticles = [];
+        // Initialize the scene
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x000000);
+            scene.fog = new THREE.FogExp2(0x000000, 0.002);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
+            camera.position.set(0, 0, 50);
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            document.getElementById('canvas').appendChild(renderer.domElement);
+            // Add orbit controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            // Create lights
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(1, 1, 1);
+            directionalLight.castShadow = true;
+            scene.add(directionalLight);
+            // Create wormhole
+            createWormhole();
+            // Create spaceship
+            createSpaceship();
+            // Create particles
+            createParticles();
+            // Add event listeners
+            window.addEventListener('resize', onWindowResize);
+            document.getElementById('startBtn').addEventListener('click', startJourney);
+            document.getElementById('resetBtn').addEventListener('click', resetScene);
+            document.getElementById('autoPilot').addEventListener('click', toggleAutoPilot);
+            // Start animation loop
+            animate();
+        }
+        // Create wormhole geometry
+        function createWormhole() {
+            const geometry = new THREE.TorusGeometry(15, 3, 32, 100);
+            const material = new THREE.MeshPhongMaterial({
+                color: 0x00aaff,
+                emissive: 0x0066ff,
+                emissiveIntensity: 0.5,
+                transparent: true,
+                opacity: 0.8,
+                wireframe: true
+            });
+            wormhole = new THREE.Mesh(geometry, material);
+            wormhole.rotation.x = Math.PI / 2;
+            scene.add(wormhole);
+            // Add inner glow
+            const innerGlowGeometry = new THREE.SphereGeometry(12, 32, 32);
+            const innerGlowMaterial = new THREE.MeshBasicMaterial({
+                color: 0x00aaff,
+                transparent: true,
+                opacity: 0.2
+            });
+            const innerGlow = new THREE.Mesh(innerGlowGeometry, innerGlowMaterial);
+            wormhole.add(innerGlow);
+        }
+        // Create spaceship
+        function createSpaceship() {
+            const geometry = new THREE.ConeGeometry(1, 3, 8);
+            const material = new THREE.MeshPhongMaterial({
+                color: 0xffffff,
+                emissive: 0xaaaaaa,
+                emissiveIntensity: 0.2,
+                specular: 0x111111,
+                shininess: 30
+            });
+            ship = new THREE.Mesh(geometry, material);
+            ship.position.set(0, 0, -50);
+            ship.rotation.x = Math.PI / 2;
+            scene.add(ship);
+            // Add engine glow
+            const engineGlowGeometry = new THREE.SphereGeometry(0.5, 16, 16);
+            const engineGlowMaterial = new THREE.MeshBasicMaterial({
+                color: 0x00ffff,
+                transparent: true,
+                opacity: 0.8
+            });
+            const engineGlow = new THREE.Mesh(engineGlowGeometry, engineGlowMaterial);
+            engineGlow.position.set(0, -1.5, 0);
+            ship.add(engineGlow);
+        }
+        // Create various particles
+        function createParticles() {
+            // Stars background
+            for (let i = 0; i < 1000; i++) {
+                const star = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.05 + Math.random() * 0.2, 8, 8),
+                    new THREE.MeshBasicMaterial({ color: 0xffffff })
+                );
+                star.position.set(
+                    Math.random() * 2000 - 1000,
+                    Math.random() * 2000 - 1000,
+                    Math.random() * 2000 - 1000
+                );
+                scene.add(star);
+                starParticles.push(star);
+            }
+            // Debris
+            for (let i = 0; i < 100; i++) {
+                const size = 0.2 + Math.random() * 1;
+                const debris = new THREE.Mesh(
+                    new THREE.BoxGeometry(size, size, size),
+                    new THREE.MeshPhongMaterial({ color: 0x888888 })
+                );
+                debris.position.set(
+                    Math.random() * 100 - 50,
+                    Math.random() * 100 - 50,
+                    Math.random() * 100 - 50
+                );
+                debris.rotation.set(
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI
+                );
+                debris.userData = {
+                    velocity: new THREE.Vector3(
+                        Math.random() * 0.2 - 0.1,
+                        Math.random() * 0.2 - 0.1,
+                        Math.random() * 0.2 - 0.1
+                    )
+                };
+                scene.add(debris);
+                debrisParticles.push(debris);
+            }
+        }
+        // Create explosion effect
+        function createExplosion(position) {
+            for (let i = 0; i < 50; i++) {
+                const size = 0.1 + Math.random() * 0.3;
+                const particle = new THREE.Mesh(
+                    new THREE.SphereGeometry(size, 8, 8),
+                    new THREE.MeshBasicMaterial({
+                        color: new THREE.Color(
+                            0.8 + Math.random() * 0.2,
+                            0.3 + Math.random() * 0.3,
+                            Math.random() * 0.2
+                        ),
+                        transparent: true,
+                        opacity: 0.8
+                    })
+                );
+                particle.position.copy(position);
+                particle.userData = {
+                    velocity: new THREE.Vector3(
+                        Math.random() * 2 - 1,
+                        Math.random() * 2 - 1,
+                        Math.random() * 2 - 1
+                    ),
+                    lifetime: 100 + Math.random() * 50,
+                    age: 0
+                };
+                scene.add(particle);
+                explosionParticles.push(particle);
+            }
+        }
+        // Create spark effect
+        function createSparks(position) {
+            for (let i = 0; i < 20; i++) {
+                const spark = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.05 + Math.random() * 0.1, 4, 4),
+                    new THREE.MeshBasicMaterial({
+                        color: 0xffff00,
+                        transparent: true,
+                        opacity: 0.8
+                    })
+                );
+                spark.position.copy(position);
+                spark.userData = {
+                    velocity: new THREE.Vector3(
+                        Math.random() * 0.5 - 0.25,
+                        Math.random() * 0.5 - 0.25,
+                        Math.random() * 0.5 - 0.25
+                    ),
+                    lifetime: 50 + Math.random() * 30,
+                    age: 0
+                };
+                scene.add(spark);
+                sparkParticles.push(spark);
+            }
+        }
+        // Bezier curve for smooth flight path
+        function getBezierPoint(t) {
+            // Control points for the bezier curve
+            const p0 = new THREE.Vector3(0, 0, -50);
+            const p1 = new THREE.Vector3(20, 30, -20);
+            const p2 = new THREE.Vector3(-10, 0, 10);
+            const p3 = new THREE.Vector3(0, 0, 50);
+            // Cubic bezier formula
+            const point = new THREE.Vector3();
+            point.x = Math.pow(1 - t, 3) * p0.x +
+                      3 * Math.pow(1 - t, 2) * t * p1.x +
+                      3 * (1 - t) * Math.pow(t, 2) * p2.x +
+                      Math.pow(t, 3) * p3.x;
+            point.y = Math.pow(1 - t, 3) * p0.y +
+                      3 * Math.pow(1 - t, 2) * t * p1.y +
+                      3 * (1 - t) * Math.pow(t, 2) * p2.y +
+                      Math.pow(t, 3) * p3.y;
+            point.z = Math.pow(1 - t, 3) * p0.z +
+                      3 * Math.pow(1 - t, 2) * t * p1.z +
+                      3 * (1 - t) * Math.pow(t, 2) * p2.z +
+                      Math.pow(t, 3) * p3.z;
+            return point;
+        }
+        // Start the journey through the wormhole
+        function startJourney() {
+            if (!isAnimating) {
+                isAnimating = true;
+                journeyProgress = 0;
+            }
+        }
+        // Reset the scene
+        function resetScene() {
+            isAnimating = false;
+            autoPilot = false;
+            journeyProgress = 0;
+            ship.position.set(0, 0, -50);
+            camera.position.set(0, 0, 50);
+            controls.reset();
+        }
+        // Toggle autopilot mode
+        function toggleAutoPilot() {
+            autoPilot = !autoPilot;
+            document.getElementById('autoPilot').textContent = autoPilot ? 'Manual Control' : 'Auto Pilot';
+        }
+        // Handle window resize
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update controls
+            controls.update();
+            // Rotate wormhole
+            wormhole.rotation.z += 0.005;
+            // Update debris particles
+            debrisParticles.forEach(debris => {
+                debris.position.add(debris.userData.velocity);
+                debris.rotation.x += 0.01;
+                debris.rotation.y += 0.01;
+                // Wrap around if out of bounds
+                if (Math.abs(debris.position.x) > 100) debris.position.x = -debris.position.x;
+                if (Math.abs(debris.position.y) > 100) debris.position.y = -debris.position.y;
+                if (Math.abs(debris.position.z) > 100) debris.position.z = -debris.position.z;
+            });
+            // Update explosion particles
+            for (let i = explosionParticles.length - 1; i >= 0; i--) {
+                const particle = explosionParticles[i];
+                particle.position.add(particle.userData.velocity);
+                particle.userData.age++;
+                particle.userData.velocity.multiplyScalar(0.98);
+                particle.material.opacity = 0.8 * (1 - particle.userData.age / particle.userData.lifetime);
+                if (particle.userData.age >= particle.userData.lifetime) {
+                    scene.remove(particle);
+                    explosionParticles.splice(i, 1);
+                }
+            }
+            // Update spark particles
+            for (let i = sparkParticles.length - 1; i >= 0; i--) {
+                const spark = sparkParticles[i];
+                spark.position.add(spark.userData.velocity);
+                spark.userData.age++;
+                spark.userData.velocity.multiplyScalar(0.95);
+                spark.material.opacity = 0.8 * (1 - spark.userData.age / spark.userData.lifetime);
+                if (spark.userData.age >= spark.userData.lifetime) {
+                    scene.remove(spark);
+                    sparkParticles.splice(i, 1);
+                }
+            }
+            // Randomly create explosions and sparks
+            if (Math.random() < 0.02) {
+                createExplosion(new THREE.Vector3(
+                    Math.random() * 40 - 20,
+                    Math.random() * 40 - 20,
+                    Math.random() * 40 - 20
+                ));
+            }
+            if (Math.random() < 0.05) {
+                createSparks(new THREE.Vector3(
+                    Math.random() * 30 - 15,
+                    Math.random() * 30 - 15,
+                    Math.random() * 30 - 15
+                ));
+            }
+            // Animate ship through wormhole
+            if (isAnimating) {
+                journeyProgress += journeySpeed;
+                if (journeyProgress >= 1) {
+                    journeyProgress = 1;
+                    isAnimating = false;
+                }
+                const shipPos = getBezierPoint(journeyProgress);
+                ship.position.copy(shipPos);
+                // Calculate direction for ship orientation
+                const nextPos = getBezierPoint(Math.min(journeyProgress + 0.01, 1));
+                const direction = new THREE.Vector3().subVectors(nextPos, shipPos).normalize();
+                ship.lookAt(nextPos);
+                // Randomly adjust speed for more organic feel
+                journeySpeed = 0.001 + Math.sin(Date.now() * 0.001) * 0.0005;
+                // Auto camera follow in autopilot mode
+                if (autoPilot) {
+                    const cameraOffset = new THREE.Vector3(0, 5, -10);
+                    cameraOffset.applyQuaternion(ship.quaternion);
+                    camera.position.copy(ship.position).add(cameraOffset);
+                    camera.lookAt(ship.position);
+                }
+            }
+            renderer.render(scene, camera);
+        }
+        // Initialize the scene
+        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=LukasBe/simulator" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>