Spaces:

r0cketboy
/

anycoder-98318d55

Running

App Files Files Community

r0cketboy commited on Dec 8, 2025

Commit

b323c50

verified ·

1 Parent(s): 762bcc4

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +242 -323

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Rhythmic Floating Orbs</title>
   <style>
     * {
       margin: 0;
@@ -66,51 +66,20 @@
       height: 100%;
     }
-    .controls {
-      position: fixed;
-      bottom: 2rem;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 1rem;
-      z-index: 1000;
-      flex-wrap: wrap;
-      justify-content: center;
-      padding: 0 1rem;
-    }
-    .control-btn {
-      padding: 0.8rem 1.5rem;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      color: #fff;
-      border-radius: 25px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-    }
-    .control-btn:hover {
-      background: rgba(255, 255, 255, 0.2);
-      transform: translateY(-2px);
-      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
-    }
-    .control-btn.active {
-      background: rgba(255, 255, 255, 0.3);
-      border-color: rgba(255, 255, 255, 0.6);
-    }
     .info {
       position: fixed;
-      bottom: 6rem;
       left: 50%;
       transform: translateX(-50%);
       color: rgba(255, 255, 255, 0.5);
-      font-size: 0.8rem;
       text-align: center;
       z-index: 1000;
     }
     @media (max-width: 768px) {
@@ -124,19 +93,10 @@
         font-size: 1.2rem;
       }
-      .controls {
         bottom: 1rem;
-      }
-      .control-btn {
         padding: 0.6rem 1rem;
-        font-size: 0.8rem;
-      }
-      .info {
-        bottom: 5rem;
-        font-size: 0.7rem;
-        padding: 0 1rem;
       }
     }
   </style>
@@ -144,7 +104,7 @@
 <body>
   <header>
-    <h1 class="title">✨ Rhythmic Orbs</h1>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
   </header>
@@ -152,302 +112,261 @@
   <p class="info">Move your mouse to interact with the orbs • Click to create ripples</p>
-  <div class="controls">
-    <button class="control-btn active" data-mode="wave">Wave</button>
-    <button class="control-btn" data-mode="pulse">Pulse</button>
-    <button class="control-btn" data-mode="spiral">Spiral</button>
-    <button class="control-btn" data-mode="chaos">Chaos</button>
-  </div>
   <script>
     const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        let width, height;
-        let orbs = [];
-        let mouse = { x: null, y: null, radius: 150 };
-        let ripples = [];
-        let time = 0;
-        let mode = 'wave';
-        const LAYERS = 5;
-        const ORBS_PER_LAYER = 30;
-        function resize() {
-            width = canvas.width = window.innerWidth;
-            height = canvas.height = window.innerHeight;
-            initOrbs();
-        }
-        class Orb {
-            constructor(layer) {
-                this.layer = layer;
-                this.layerFactor = (layer + 1) / LAYERS;
-                // Increased base radius from 3-11 to 8-24
-                this.baseRadius = 8 + Math.random() * 16 * this.layerFactor;
-                this.radius = this.baseRadius;
-                this.x = Math.random() * width;
-                this.y = Math.random() * height;
-                this.baseX = this.x;
-                this.baseY = this.y;
-                this.vx = 0;
-                this.vy = 0;
-                this.phase = Math.random() * Math.PI * 2;
-                this.speed = 0.5 + Math.random() * 1.5;
-                this.amplitude = 20 + Math.random() * 40;
-                this.glowIntensity = 0.3 + Math.random() * 0.7;
-                this.pulseSpeed = 0.02 + Math.random() * 0.03;
-                this.angle = Math.random() * Math.PI * 2;
-                this.orbitRadius = 50 + Math.random() * 100;
-                this.orbitSpeed = 0.01 + Math.random() * 0.02;
-            }
-            update() {
-                const layerSpeed = this.layerFactor * 0.5 + 0.5;
-                switch(mode) {
-                    case 'wave':
-                        this.x = this.baseX + Math.sin(time * this.speed * 0.02 + this.phase) * this.amplitude;
-                        this.y = this.baseY + Math.cos(time * this.speed * 0.015 + this.phase) * this.amplitude * 0.5;
-                        break;
-                    case 'pulse':
-                        const pulseScale = 1 + Math.sin(time * 0.03 + this.phase) * 0.3;
-                        const centerX = width / 2;
-                        const centerY = height / 2;
-                        const dx = this.baseX - centerX;
-                        const dy = this.baseY - centerY;
-                        this.x = centerX + dx * pulseScale;
-                        this.y = centerY + dy * pulseScale;
-                        break;
-                    case 'spiral':
-                        this.angle += this.orbitSpeed * layerSpeed;
-                        const spiralRadius = this.orbitRadius + Math.sin(time * 0.02) * 30;
-                        this.x = this.baseX + Math.cos(this.angle) * spiralRadius * 0.5;
-                        this.y = this.baseY + Math.sin(this.angle) * spiralRadius * 0.5;
-                        break;
-                    case 'chaos':
-                        this.x += Math.sin(time * 0.05 + this.phase) * 2;
-                        this.y += Math.cos(time * 0.04 + this.phase * 1.5) * 2;
-                        if (this.x < 0) this.x = width;
-                        if (this.x > width) this.x = 0;
-                        if (this.y < 0) this.y = height;
-                        if (this.y > height) this.y = 0;
-                        break;
-                }
-                // Mouse interaction
-                if (mouse.x !== null && mouse.y !== null) {
-                    const dx = this.x - mouse.x;
-                    const dy = this.y - mouse.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (distance < mouse.radius) {
-                        const force = (mouse.radius - distance) / mouse.radius;
-                        const angle = Math.atan2(dy, dx);
-                        this.vx += Math.cos(angle) * force * 3 * this.layerFactor;
-                        this.vy += Math.sin(angle) * force * 3 * this.layerFactor;
-                        this.radius = this.baseRadius * (1 + force * 0.5);
-                    } else {
-                        this.radius += (this.baseRadius - this.radius) * 0.1;
-                    }
-                }
-                // Apply velocity with damping
-                this.x += this.vx;
-                this.y += this.vy;
-                this.vx *= 0.95;
-                this.vy *= 0.95;
-                // Ripple interaction
-                ripples.forEach(ripple => {
-                    const dx = this.x - ripple.x;
-                    const dy = this.y - ripple.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (Math.abs(distance - ripple.radius) < 50) {
-                        const force = (1 - Math.abs(distance - ripple.radius) / 50) * ripple.strength;
-                        const angle = Math.atan2(dy, dx);
-                        this.vx += Math.cos(angle) * force * 2;
-                        this.vy += Math.sin(angle) * force * 2;
-                    }
-                });
-                // Pulsing glow
-                this.currentGlow = this.glowIntensity * (0.7 + Math.sin(time * this.pulseSpeed + this.phase) * 0.3);
-            }
-            draw() {
-                const alpha = 0.3 + this.layerFactor * 0.7;
-                const glowSize = this.radius * (3 + this.currentGlow * 2);
-                // Outer glow
-                const gradient = ctx.createRadialGradient(
-                    this.x, this.y, 0,
-                    this.x, this.y, glowSize
-                );
-                gradient.addColorStop(0, `rgba(255, 255, 255, ${alpha * this.currentGlow})`);
-                gradient.addColorStop(0.3, `rgba(200, 220, 255, ${alpha * this.currentGlow * 0.5})`);
-                gradient.addColorStop(0.6, `rgba(150, 180, 255, ${alpha * this.currentGlow * 0.2})`);
-                gradient.addColorStop(1, 'rgba(100, 150, 255, 0)');
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, glowSize, 0, Math.PI * 2);
-                ctx.fillStyle = gradient;
-                ctx.fill();
-                // Core
-                const coreGradient = ctx.createRadialGradient(
-                    this.x - this.radius * 0.3, this.y - this.radius * 0.3, 0,
-                    this.x, this.y, this.radius
-                );
-                coreGradient.addColorStop(0, `rgba(255, 255, 255, ${alpha})`);
-                coreGradient.addColorStop(0.5, `rgba(230, 240, 255, ${alpha * 0.9})`);
-                coreGradient.addColorStop(1, `rgba(200, 220, 255, ${alpha * 0.7})`);
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                ctx.fillStyle = coreGradient;
-                ctx.fill();
-            }
-        }
-        class Ripple {
-            constructor(x, y) {
-                this.x = x;
-                this.y = y;
-                this.radius = 0;
-                this.maxRadius = 300;
-                this.strength = 1;
-                this.speed = 8;
-            }
-            update() {
-                this.radius += this.speed;
-                this.strength = 1 - (this.radius / this.maxRadius);
-            }
-            draw() {
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                ctx.strokeStyle = `rgba(255, 255, 255, ${this.strength * 0.3})`;
-                ctx.lineWidth = 2;
-                ctx.stroke();
-            }
-            isDead() {
-                return this.radius >= this.maxRadius;
-            }
-        }
-        function initOrbs() {
-            orbs = [];
-            for (let layer = 0; layer < LAYERS; layer++) {
-                for (let i = 0; i < ORBS_PER_LAYER; i++) {
-                    orbs.push(new Orb(layer));
-                }
-            }
-        }
-        function drawConnections() {
-            orbs.forEach((orb, i) => {
-                orbs.slice(i + 1).forEach(other => {
-                    if (orb.layer !== other.layer) return;
-                    const dx = orb.x - other.x;
-                    const dy = orb.y - other.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    const maxDistance = 100 + orb.layer * 20;
-                    if (distance < maxDistance) {
-                        const alpha = (1 - distance / maxDistance) * 0.15 * orb.layerFactor;
-                        ctx.beginPath();
-                        ctx.moveTo(orb.x, orb.y);
-                        ctx.lineTo(other.x, other.y);
-                        ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
-                        ctx.lineWidth = 0.5;
-                        ctx.stroke();
-                    }
-                });
-            });
         }
-        function animate() {
-            ctx.fillStyle = 'rgba(10, 10, 15, 0.1)';
-            ctx.fillRect(0, 0, width, height);
-            time++;
-            // Update and draw ripples
-            ripples = ripples.filter(ripple => !ripple.isDead());
-            ripples.forEach(ripple => {
-                ripple.update();
-                ripple.draw();
-            });
-            // Draw connections first (behind orbs)
-            drawConnections();
-            // Sort orbs by layer for proper depth rendering
-            orbs.sort((a, b) => a.layer - b.layer);
-            // Update and draw orbs
-            orbs.forEach(orb => {
-                orb.update();
-                orb.draw();
-            });
-            requestAnimationFrame(animate);
-        }
-        // Event listeners
-        window.addEventListener('resize', resize);
-        canvas.addEventListener('mousemove', (e) => {
-            mouse.x = e.clientX;
-            mouse.y = e.clientY;
         });
-        canvas.addEventListener('mouseleave', () => {
-            mouse.x = null;
-            mouse.y = null;
-        });
-        canvas.addEventListener('click', (e) => {
-            ripples.push(new Ripple(e.clientX, e.clientY));
-        });
-        canvas.addEventListener('touchstart', (e) => {
-            e.preventDefault();
-            const touch = e.touches[0];
-            mouse.x = touch.clientX;
-            mouse.y = touch.clientY;
-            ripples.push(new Ripple(touch.clientX, touch.clientY));
-        });
-        canvas.addEventListener('touchmove', (e) => {
-            e.preventDefault();
-            const touch = e.touches[0];
-            mouse.x = touch.clientX;
-            mouse.y = touch.clientY;
-        });
-        canvas.addEventListener('touchend', () => {
-            mouse.x = null;
-            mouse.y = null;
-        });
-        // Mode buttons
-        document.querySelectorAll('.control-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                document.querySelectorAll('.control-btn').forEach(b => b.classList.remove('active'));
-                btn.classList.add('active');
-                mode = btn.dataset.mode;
-            });
-        });
-        // Initialize
-        resize();
-        animate();
   </script>
 </body>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pulsing Floating Orbs</title>
   <style>
     * {
       margin: 0;
       height: 100%;
     }
     .info {
       position: fixed;
+      bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
       color: rgba(255, 255, 255, 0.5);
+      font-size: 0.9rem;
       text-align: center;
       z-index: 1000;
+      padding: 0.8rem 1.5rem;
+      background: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+      border-radius: 25px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
     }
     @media (max-width: 768px) {
         font-size: 1.2rem;
       }
+      .info {
         bottom: 1rem;
+        font-size: 0.75rem;
         padding: 0.6rem 1rem;
       }
     }
   </style>
 <body>
   <header>
+    <h1 class="title">💫 Pulsing Orbs</h1>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
   </header>
   <p class="info">Move your mouse to interact with the orbs • Click to create ripples</p>
   <script>
     const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    let width, height;
+    let orbs = [];
+    let mouse = { x: null, y: null, radius: 150 };
+    let ripples = [];
+    let time = 0;
+    const LAYERS = 5;
+    const ORBS_PER_LAYER = 30;
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      initOrbs();
+    }
+    class Orb {
+      constructor(layer) {
+        this.layer = layer;
+        this.layerFactor = (layer + 1) / LAYERS;
+        this.baseRadius = 8 + Math.random() * 16 * this.layerFactor;
+        this.radius = this.baseRadius;
+        this.x = Math.random() * width;
+        this.y = Math.random() * height;
+        this.baseX = this.x;
+        this.baseY = this.y;
+        this.vx = 0;
+        this.vy = 0;
+        this.phase = Math.random() * Math.PI * 2;
+        this.speed = 0.5 + Math.random() * 1.5;
+        this.amplitude = 20 + Math.random() * 40;
+        this.glowIntensity = 0.3 + Math.random() * 0.7;
+        this.pulseSpeed = 0.02 + Math.random() * 0.03;
+        this.angle = Math.random() * Math.PI * 2;
+        this.orbitRadius = 50 + Math.random() * 100;
+        this.orbitSpeed = 0.01 + Math.random() * 0.02;
+      }
+      update() {
+        // Pulse mode only
+        const pulseScale = 1 + Math.sin(time * 0.03 + this.phase) * 0.3;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const dx = this.baseX - centerX;
+        const dy = this.baseY - centerY;
+        this.x = centerX + dx * pulseScale;
+        this.y = centerY + dy * pulseScale;
+        // Mouse interaction
+        if (mouse.x !== null && mouse.y !== null) {
+          const dx = this.x - mouse.x;
+          const dy = this.y - mouse.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < mouse.radius) {
+            const force = (mouse.radius - distance) / mouse.radius;
+            const angle = Math.atan2(dy, dx);
+            this.vx += Math.cos(angle) * force * 3 * this.layerFactor;
+            this.vy += Math.sin(angle) * force * 3 * this.layerFactor;
+            this.radius = this.baseRadius * (1 + force * 0.5);
+          } else {
+            this.radius += (this.baseRadius - this.radius) * 0.1;
+          }
         }
+        // Apply velocity with damping
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vx *= 0.95;
+        this.vy *= 0.95;
+        // Ripple interaction
+        ripples.forEach(ripple => {
+          const dx = this.x - ripple.x;
+          const dy = this.y - ripple.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (Math.abs(distance - ripple.radius) < 50) {
+            const force = (1 - Math.abs(distance - ripple.radius) / 50) * ripple.strength;
+            const angle = Math.atan2(dy, dx);
+            this.vx += Math.cos(angle) * force * 2;
+            this.vy += Math.sin(angle) * force * 2;
+          }
+        });
+        // Pulsing glow
+        this.currentGlow = this.glowIntensity * (0.7 + Math.sin(time * this.pulseSpeed + this.phase) * 0.3);
+      }
+      draw() {
+        const alpha = 0.3 + this.layerFactor * 0.7;
+        const glowSize = this.radius * (3 + this.currentGlow * 2);
+        // Outer glow
+        const gradient = ctx.createRadialGradient(
+          this.x, this.y, 0,
+          this.x, this.y, glowSize
+        );
+        gradient.addColorStop(0, `rgba(255, 255, 255, ${alpha * this.currentGlow})`);
+        gradient.addColorStop(0.3, `rgba(200, 220, 255, ${alpha * this.currentGlow * 0.5})`);
+        gradient.addColorStop(0.6, `rgba(150, 180, 255, ${alpha * this.currentGlow * 0.2})`);
+        gradient.addColorStop(1, 'rgba(100, 150, 255, 0)');
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, glowSize, 0, Math.PI * 2);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        // Core
+        const coreGradient = ctx.createRadialGradient(
+          this.x - this.radius * 0.3, this.y - this.radius * 0.3, 0,
+          this.x, this.y, this.radius
+        );
+        coreGradient.addColorStop(0, `rgba(255, 255, 255, ${alpha})`);
+        coreGradient.addColorStop(0.5, `rgba(230, 240, 255, ${alpha * 0.9})`);
+        coreGradient.addColorStop(1, `rgba(200, 220, 255, ${alpha * 0.7})`);
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fillStyle = coreGradient;
+        ctx.fill();
+      }
+    }
+    class Ripple {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.radius = 0;
+        this.maxRadius = 300;
+        this.strength = 1;
+        this.speed = 8;
+      }
+      update() {
+        this.radius += this.speed;
+        this.strength = 1 - (this.radius / this.maxRadius);
+      }
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.strokeStyle = `rgba(255, 255, 255, ${this.strength * 0.3})`;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+      isDead() {
+        return this.radius >= this.maxRadius;
+      }
+    }
+    function initOrbs() {
+      orbs = [];
+      for (let layer = 0; layer < LAYERS; layer++) {
+        for (let i = 0; i < ORBS_PER_LAYER; i++) {
+          orbs.push(new Orb(layer));
+        }
+      }
+    }
+    function drawConnections() {
+      orbs.forEach((orb, i) => {
+        orbs.slice(i + 1).forEach(other => {
+          if (orb.layer !== other.layer) return;
+          const dx = orb.x - other.x;
+          const dy = orb.y - other.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          const maxDistance = 100 + orb.layer * 20;
+          if (distance < maxDistance) {
+            const alpha = (1 - distance / maxDistance) * 0.15 * orb.layerFactor;
+            ctx.beginPath();
+            ctx.moveTo(orb.x, orb.y);
+            ctx.lineTo(other.x, other.y);
+            ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+          }
         });
+      });
+    }
+    function animate() {
+      ctx.fillStyle = 'rgba(10, 10, 15, 0.1)';
+      ctx.fillRect(0, 0, width, height);
+      time++;
+      // Update and draw ripples
+      ripples = ripples.filter(ripple => !ripple.isDead());
+      ripples.forEach(ripple => {
+        ripple.update();
+        ripple.draw();
+      });
+      // Draw connections first (behind orbs)
+      drawConnections();
+      // Sort orbs by layer for proper depth rendering
+      orbs.sort((a, b) => a.layer - b.layer);
+      // Update and draw orbs
+      orbs.forEach(orb => {
+        orb.update();
+        orb.draw();
+      });
+      requestAnimationFrame(animate);
+    }
+    // Event listeners
+    window.addEventListener('resize', resize);
+    canvas.addEventListener('mousemove', (e) => {
+      mouse.x = e.clientX;
+      mouse.y = e.clientY;
+    });
+    canvas.addEventListener('mouseleave', () => {
+      mouse.x = null;
+      mouse.y = null;
+    });
+    canvas.addEventListener('click', (e) => {
+      ripples.push(new Ripple(e.clientX, e.clientY));
+    });
+    canvas.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      mouse.x = touch.clientX;
+      mouse.y = touch.clientY;
+      ripples.push(new Ripple(touch.clientX, touch.clientY));
+    });
+    canvas.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      mouse.x = touch.clientX;
+      mouse.y = touch.clientY;
+    });
+    canvas.addEventListener('touchend', () => {
+      mouse.x = null;
+      mouse.y = null;
+    });
+    // Initialize
+    resize();
+    animate();
   </script>
 </body>