Spaces:

zackrr
/

ball-v0-1

Running

App Files Files Community

zackrr commited on Apr 3

Commit

d8be81d

verified ·

1 Parent(s): 0de835a

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +226 -19

README.md CHANGED Viewed

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

 ---
+title: ball-v0-1
+emoji: 🐳
 colorFrom: yellow
+colorTo: gray
 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,226 @@
-<!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 Bouncing Balls in Sphere</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;
+            font-family: 'Inter', sans-serif;
+        }
+        #info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 100;
+        }
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 100;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+<body class="bg-gray-900">
+    <div id="info" class="text-sm">
+        <h1 class="text-xl font-bold mb-2">Bouncing Balls in Sphere</h1>
+        <p>Use mouse to rotate view</p>
+        <p>Scroll to zoom in/out</p>
+    </div>
+    <div id="controls">
+        <div class="flex items-center mb-2">
+            <label class="text-white mr-2">Ball Count:</label>
+            <input type="range" id="ballCount" min="10" max="200" value="50" class="w-32">
+            <span id="ballCountValue" class="ml-2">50</span>
+        </div>
+        <div class="flex items-center mb-2">
+            <label class="text-white mr-2">Bounce Speed:</label>
+            <input type="range" id="bounceSpeed" min="0.1" max="2" step="0.1" value="1" class="w-32">
+            <span id="bounceSpeedValue" class="ml-2">1.0</span>
+        </div>
+        <div class="flex items-center">
+            <label class="text-white mr-2">Sphere Opacity:</label>
+            <input type="range" id="sphereOpacity" min="0" max="1" step="0.1" value="0.2" class="w-32">
+            <span id="sphereOpacityValue" class="ml-2">0.2</span>
+        </div>
+    </div>
+    <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x111111);
+        // Camera setup
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.z = 30;
+        // Renderer setup
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.body.appendChild(renderer.domElement);
+        // Orbit controls for camera interaction
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        // Lighting
+        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 the transparent sphere
+        const sphereRadius = 15;
+        const sphereGeometry = new THREE.SphereGeometry(sphereRadius, 32, 32);
+        const sphereMaterial = new THREE.MeshPhongMaterial({
+            color: 0x3399ff,
+            transparent: true,
+            opacity: 0.2,
+            wireframe: true,
+            side: THREE.DoubleSide
+        });
+        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+        scene.add(sphere);
+        // Create bouncing balls
+        const balls = [];
+        const ballGeometry = new THREE.SphereGeometry(0.5, 16, 16);
+        const ballMaterial = new THREE.MeshPhongMaterial({
+            color: 0xff5555,
+            shininess: 100
+        });
+        function createBalls(count) {
+            // Remove existing balls
+            balls.forEach(ball => scene.remove(ball));
+            balls.length = 0;
+            // Create new balls
+            for (let i = 0; i < count; i++) {
+                const ball = new THREE.Mesh(ballGeometry, ballMaterial.clone());
+                ball.castShadow = true;
+                ball.receiveShadow = true;
+                // Random position inside sphere
+                const radius = Math.random() * (sphereRadius - 1);
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.random() * Math.PI;
+                ball.position.x = radius * Math.sin(phi) * Math.cos(theta);
+                ball.position.y = radius * Math.sin(phi) * Math.sin(theta);
+                ball.position.z = radius * Math.cos(phi);
+                // Random velocity
+                ball.userData.velocity = new THREE.Vector3(
+                    (Math.random() - 0.5) * 0.2,
+                    (Math.random() - 0.5) * 0.2,
+                    (Math.random() - 0.5) * 0.2
+                );
+                // Random color
+                ball.material.color.setHSL(Math.random(), 0.7, 0.5);
+                scene.add(ball);
+                balls.push(ball);
+            }
+        }
+        // Initial creation
+        createBalls(50);
+        // Animation variables
+        let bounceSpeed = 1.0;
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update balls
+            balls.forEach(ball => {
+                // Move ball
+                ball.position.x += ball.userData.velocity.x * bounceSpeed;
+                ball.position.y += ball.userData.velocity.y * bounceSpeed;
+                ball.position.z += ball.userData.velocity.z * bounceSpeed;
+                // Check collision with sphere boundary
+                const distance = ball.position.length();
+                if (distance > sphereRadius - 1) {
+                    // Calculate normal vector from sphere center to ball
+                    const normal = ball.position.clone().normalize();
+                    // Reflect velocity
+                    ball.userData.velocity.reflect(normal);
+                    // Add some randomness to bounce
+                    ball.userData.velocity.add(
+                        new THREE.Vector3(
+                            (Math.random() - 0.5) * 0.02,
+                            (Math.random() - 0.5) * 0.02,
+                            (Math.random() - 0.5) * 0.02
+                        )
+                    );
+                    // Dampen velocity slightly
+                    ball.userData.velocity.multiplyScalar(0.98);
+                }
+            });
+            // Update controls
+            controls.update();
+            // Render scene
+            renderer.render(scene, camera);
+        }
+        animate();
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // UI controls
+        document.getElementById('ballCount').addEventListener('input', (e) => {
+            const count = parseInt(e.target.value);
+            document.getElementById('ballCountValue').textContent = count;
+            createBalls(count);
+        });
+        document.getElementById('bounceSpeed').addEventListener('input', (e) => {
+            bounceSpeed = parseFloat(e.target.value);
+            document.getElementById('bounceSpeedValue').textContent = bounceSpeed.toFixed(1);
+        });
+        document.getElementById('sphereOpacity').addEventListener('input', (e) => {
+            const opacity = parseFloat(e.target.value);
+            sphere.material.opacity = opacity;
+            document.getElementById('sphereOpacityValue').textContent = opacity.toFixed(1);
+        });
+    </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=zackrr/ball-v0-1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>