Spaces:

lonestar108
/

undefined

Running

App Files Files Community

lonestar108 commited on Oct 3, 2025

Commit

442408b

verified ·

1 Parent(s): ab893e8

a particle sim

Browse files

Particles have x, y, phase, and value
Phase range 0-2PI default to PI +- 5%
Phase controls the degree of attraction/repulsion to other particles. 0 = very attracted to other particles, 2PI = very repulsed from other particles, PI = balanced (both attracted to and repulsed from)
Particles influence the phases of other particles
Particles influence each others phases by formula: (number oof particles * average particle phase) / average distance of particles
But only if the other particle is between a global minimum and max distance
Particles also have a value between 2-100 set when the sim starts.
Particles have second-order attraction to - they stick to - other particles whose values share prime factors with theirs

Files changed (2) hide show

README.md +9 -5
index.html +262 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 👁
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,263 @@
-<!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>QuantumPrimeSync: Particle Harmony Nexus</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-white overflow-hidden">
+    <div class="absolute top-0 left-0 w-full z-10">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <h1 class="text-3xl font-bold text-purple-400 mb-4 md:mb-0">QuantumPrimeSync <span class="text-2xl">🌌</span></h1>
+<div class="flex items-center space-x-4">
+                    <div class="flex items-center space-x-2">
+                        <span class="text-sm">Particles: <span id="particleCount" class="font-mono">0</span></span>
+                        <button id="addParticle" class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded-lg text-sm transition-colors">
+                            <i data-feather="plus"></i>
+                        </button>
+                    </div>
+                    <button id="reset" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-sm transition-colors">
+                        <i data-feather="refresh-cw" class="w-4 h-4"></i> Reset
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <canvas id="particleCanvas" class="w-full h-screen"></canvas>
+    <div class="absolute bottom-0 left-0 w-full z-10">
+        <div class="container mx-auto px-4 py-6">
+            <div class="bg-gray-800 bg-opacity-80 backdrop-blur-sm rounded-xl p-6 max-w-md">
+                <h2 class="text-xl font-semibold mb-4 text-purple-300">Controls</h2
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Minimum Distance</label>
+                        <input type="range" id="minDist" min="10" max="200" value="50" class="w-full accent-purple-500">
+                        <span id="minDistValue" class="text-xs text-gray-400">50</span>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Maximum Distance</label>
+                        <input type="range" id="maxDist" min="100" max="500" value="300" class="w-full accent-purple-500">
+                        <span id="maxDistValue" class="text-xs text-gray-400">300</span>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Attraction Force</label>
+                        <input type="range" id="force" min="0.1" max="2" step="0.1" value="0.5" class="w-full accent-purple-500">
+                        <span id="forceValue" class="text-xs text-gray-400">0.5</span>
+                    </div>
+                </div>
+                <div class="mt-4 p-3 bg-gray-700 rounded-lg">
+                    <p class="text-sm text-gray-300">Particles have values (2-100) and attract based on shared prime factors!</p>
+                </div>
+</div>
+        </div>
+    </div>
+    <script>
+        const canvas = document.getElementById('particleCanvas');
+        const ctx = canvas.getContext('2d');
+        // Set canvas size
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        // Particle system
+        class Particle {
+            constructor(x, y) {
+                this.x = x || Math.random() * canvas.width;
+                this.y = y || Math.random() * canvas.height;
+                this.vx = (Math.random() - 0.5) * 2;
+                this.vy = (Math.random() - 0.5) * 2;
+                this.radius = 4;
+                this.phase = Math.PI + (Math.random() - 0.5) * Math.PI * 0.1; // PI ± 5%
+                this.hue = (this.phase / (2 * Math.PI)) * 360;
+            }
+            update(particles, minDist, maxDist, force) {
+                // Apply phase influence from nearby particles
+                let totalPhase = 0;
+                let validParticles = 0;
+                let totalDistance = 0;
+                particles.forEach(other => {
+                    if (other !== this) {
+                        const dx = other.x - this.x;
+                        const dy = other.y - this.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance >= minDist && distance <= maxDist) {
+                            totalPhase += other.phase;
+                            totalDistance += distance;
+                            validParticles++;
+                        }
+                    }
+                });
+                if (validParticles > 0) {
+                    const avgPhase = totalPhase / validParticles;
+                    const avgDistance = totalDistance / validParticles;
+                    const phaseInfluence = (validParticles * avgPhase) / avgDistance;
+                    this.phase = (this.phase + phaseInfluence * 0.001) % (2 * Math.PI);
+                    this.hue = (this.phase / (2 * Math.PI)) * 360;
+                }
+                // Apply attraction/repulsion based on phase
+                particles.forEach(other => {
+                    if (other !== this) {
+                        const dx = other.x - this.x;
+                        const dy = other.y - this.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance > 0 && distance < maxDist) {
+                            // Phase-based force
+                            let phaseForce = 0;
+                            if (this.phase === 0) {
+                                phaseForce = 1; // Maximum attraction
+                            } else if (this.phase === 2 * Math.PI) {
+                                phaseForce = -1; // Maximum repulsion
+                            } else if (this.phase < Math.PI) {
+                                phaseForce = 1 - (this.phase / Math.PI); // Decreasing attraction
+                            } else {
+                                phaseForce = -((this.phase - Math.PI) / Math.PI); // Increasing repulsion
+                            }
+                            const fx = (dx / distance) * force * phaseForce;
+                            const fy = (dy / distance) * force * phaseForce;
+                            this.vx += fx;
+                            this.vy += fy;
+                            // Prime factor attraction - stronger bond when particles share prime factors
+                            const sharedFactors = this.primeFactors.filter(factor =>
+                                other.primeFactors.includes(factor)
+                            );
+                            if (sharedFactors.length > 0) {
+                                const primeAttraction = sharedFactors.length * 0.1;
+                                const primeFx = (dx / distance) * primeAttraction;
+                                const primeFy = (dy / distance) * primeAttraction;
+                                this.vx += primeFx;
+                                this.vy += primeFy;
+                            }
+                        }
+                    }
+                });
+// Update position with velocity damping
+                this.vx *= 0.99;
+                this.vy *= 0.99;
+                this.x += this.vx;
+                this.y += this.vy;
+                // Boundary collision
+                if (this.x < 0 || this.x > canvas.width) this.vx *= -0.8;
+                if (this.y < 0 || this.y > canvas.height) this.vy *= -0.8;
+                this.x = Math.max(0, Math.min(canvas.width, this.x));
+                this.y = Math.max(0, Math.min(canvas.height, this.y));
+            }
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+                ctx.fillStyle = `hsl(${this.hue}, 70%, 60%)`;
+                ctx.fill();
+                // Draw phase indicator
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius + 2, 0, this.phase, false);
+                ctx.strokeStyle = 'white';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+                // Draw value indicator
+                ctx.fillStyle = 'white';
+                ctx.font = '10px Arial';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(this.value, this.x, this.y);
+            }
+}
+        // Initialize particles
+        let particles = [];
+        const initialCount = 50;
+        for (let i = 0; i < initialCount; i++) {
+            particles.push(new Particle());
+        }
+        // Control variables
+        let minDist = 50;
+        let maxDist = 300;
+        let force = 0.5;
+        // Animation loop
+        function animate() {
+            ctx.fillStyle = 'rgba(17, 24, 39, 0.1)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            particles.forEach(particle => {
+                particle.update(particles, minDist, maxDist, force);
+                particle.draw();
+            });
+            requestAnimationFrame(animate);
+        }
+        animate();
+        // Event listeners for controls
+        document.getElementById('addParticle').addEventListener('click', () => {
+            particles.push(new Particle());
+            updateParticleCount();
+        });
+        document.getElementById('reset').addEventListener('click', () => {
+            particles = [];
+            for (let i = 0; i < initialCount; i++) {
+                particles.push(new Particle());
+            }
+            updateParticleCount();
+        });
+        document.getElementById('minDist').addEventListener('input', (e) => {
+            minDist = parseInt(e.target.value);
+            document.getElementById('minDistValue').textContent = minDist;
+        });
+        document.getElementById('maxDist').addEventListener('input', (e) => {
+            maxDist = parseInt(e.target.value);
+            document.getElementById('maxDistValue').textContent = maxDist;
+        });
+        document.getElementById('force').addEventListener('input', (e) => {
+            force = parseFloat(e.target.value);
+            document.getElementById('forceValue').textContent = force;
+        });
+        function updateParticleCount() {
+            document.getElementById('particleCount').textContent = particles.length;
+        }
+        updateParticleCount();
+        // Add particles on click
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            particles.push(new Particle(x, y));
+            updateParticleCount();
+        });
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>