From 07d041a964b125021c68b57f6bbcb7bd187242ec Mon Sep 17 00:00:00 2001
From: iamKaviB <iamkavib@gmail.com>
Date: Fri, 24 Oct 2025 20:26:30 +0530
Subject: [PATCH 1/2] connecting sun

---
 connecting sun/connecting.html | 454 +++++++++++++++++++++++++++++++++
 1 file changed, 454 insertions(+)
 create mode 100644 connecting sun/connecting.html
diff --git a/connecting sun/connecting.html b/connecting sun/connecting.html
new file mode 100644
index 00000000..27674fba
--- /dev/null
+++ b/connecting sun/connecting.html	
@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Connected Sun</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: Arial, sans-serif;
+        }
+        
+        canvas {
+            display: block;
+            cursor: move;
+        }
+        
+        .info {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            border-radius: 8px;
+            font-size: 14px;
+            z-index: 1000;
+            pointer-events: none;
+        }
+        
+        .info h3 {
+            margin-bottom: 10px;
+            color: #ffd700;
+        }
+        
+        .lightning-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+            z-index: 9999;
+        }
+    </style>
+</head>
+<body>
+    <canvas class="lightning-overlay" id="lightningCanvas"></canvas>
+    <canvas id="canvas"></canvas>
+    <div class="info">
+        <h3>⚡ Multi-Tab Sun Network</h3>
+        <p>Open this in multiple tabs!</p>
+        <p>Drag the sun to move it</p>
+        <p id="tabInfo">Tab ID: Loading...</p>
+        <p id="connectionInfo">Connected tabs: 0</p>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const lightningCanvas = document.getElementById('lightningCanvas');
+        const lightningCtx = lightningCanvas.getContext('2d');
+        
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        lightningCanvas.width = window.innerWidth;
+        lightningCanvas.height = window.innerHeight;
+        
+        // Generate unique tab ID
+        const tabId = 'tab_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        
+        // BroadcastChannel for cross-tab communication
+        const channel = new BroadcastChannel('sun_network');
+        
+        // Sun object for this tab
+        const sun = {
+            x: canvas.width / 2,
+            y: canvas.height / 2,
+            radius: 50,
+            dragging: false,
+            offsetX: 0,
+            offsetY: 0,
+            exploded: false,
+            explosionProgress: 0
+        };
+        
+        // Store other tabs' data
+        const otherTabs = new Map();
+        
+        // Persistent lightning connections (one per connected tab)
+        const activeLightnings = new Map();
+        
+        // Update UI
+        document.getElementById('tabInfo').textContent = `Tab: ${tabId.substr(4, 8)}`;
+        
+        // Get window position relative to screen
+        function getScreenPosition() {
+            return {
+                screenX: window.screenX || window.screenLeft || 0,
+                screenY: window.screenY || window.screenTop || 0,
+                sunX: sun.x,
+                sunY: sun.y,
+                windowWidth: window.innerWidth,
+                windowHeight: window.innerHeight
+            };
+        }
+        
+        // Broadcast sun position and window position
+        function broadcastPosition() {
+            const pos = getScreenPosition();
+            channel.postMessage({
+                type: 'position',
+                tabId: tabId,
+                ...pos,
+                timestamp: Date.now()
+            });
+        }
+        
+        // Handle messages from other tabs
+        channel.onmessage = (event) => {
+            const data = event.data;
+            
+            if (data.tabId === tabId) return;
+            
+            if (data.type === 'position') {
+                otherTabs.set(data.tabId, {
+                    screenX: data.screenX,
+                    screenY: data.screenY,
+                    sunX: data.sunX,
+                    sunY: data.sunY,
+                    windowWidth: data.windowWidth,
+                    windowHeight: data.windowHeight,
+                    timestamp: data.timestamp
+                });
+            } else if (data.type === 'disconnect') {
+                otherTabs.delete(data.tabId);
+                activeLightnings.delete(data.tabId);
+            }
+        };
+        
+        // Calculate the exact position of another tab's sun in this tab's viewport
+        function calculateOtherSunPosition(otherTabData) {
+            const myPos = getScreenPosition();
+            
+            // Absolute screen positions (accounting for browser chrome ~70px)
+            const myAbsoluteX = myPos.screenX;
+            const myAbsoluteY = myPos.screenY + 70; // Browser chrome height
+            
+            const otherAbsoluteX = otherTabData.screenX + otherTabData.sunX;
+            const otherAbsoluteY = otherTabData.screenY + 70 + otherTabData.sunY;
+            
+            // Convert to this tab's canvas coordinates
+            const relativeX = otherAbsoluteX - myAbsoluteX;
+            const relativeY = otherAbsoluteY - myAbsoluteY;
+            
+            return { x: relativeX, y: relativeY };
+        }
+        
+        // Generate lightning path between two points
+        function generateLightningPath(x1, y1, x2, y2) {
+            const segments = [];
+            const distance = Math.sqrt((x2-x1)**2 + (y2-y1)**2);
+            const steps = Math.max(15, Math.floor(distance / 25));
+            
+            for (let i = 0; i <= steps; i++) {
+                const t = i / steps;
+                let x = x1 + (x2 - x1) * t;
+                let y = y1 + (y2 - y1) * t;
+                
+                // Add jagged displacement (less at endpoints)
+                if (i > 0 && i < steps) {
+                    const displacement = Math.sin(t * Math.PI) * 50; // Max displacement in middle
+                    x += (Math.random() - 0.5) * displacement;
+                    y += (Math.random() - 0.5) * displacement;
+                }
+                
+                segments.push({ x, y });
+            }
+            
+            return segments;
+        }
+        
+        // Update lightning connections in real-time
+        function updateLightningConnections() {
+            const now = Date.now();
+            
+            // Clean up stale tabs
+            otherTabs.forEach((tab, id) => {
+                if (now - tab.timestamp > 2000) {
+                    otherTabs.delete(id);
+                    activeLightnings.delete(id);
+                }
+            });
+            
+            // Update or create lightning for each connected tab
+            otherTabs.forEach((otherTab, otherId) => {
+                const targetPos = calculateOtherSunPosition(otherTab);
+                
+                // Check if we need to regenerate the path (every few frames for animation)
+                if (!activeLightnings.has(otherId) || Math.random() < 0.1) {
+                    activeLightnings.set(otherId, {
+                        segments: generateLightningPath(sun.x, sun.y, targetPos.x, targetPos.y),
+                        targetX: targetPos.x,
+                        targetY: targetPos.y,
+                        intensity: 0.7 + Math.random() * 0.3
+                    });
+                } else {
+                    // Update endpoints if positions changed
+                    const lightning = activeLightnings.get(otherId);
+                    const dist = Math.sqrt((lightning.targetX - targetPos.x)**2 + (lightning.targetY - targetPos.y)**2);
+                    
+                    // Regenerate if target moved significantly
+                    if (dist > 5) {
+                        lightning.segments = generateLightningPath(sun.x, sun.y, targetPos.x, targetPos.y);
+                        lightning.targetX = targetPos.x;
+                        lightning.targetY = targetPos.y;
+                    }
+                }
+            });
+        }
+        
+        // Draw sun
+        function drawSun(x, y, radius) {
+            // Outer glow
+            const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 3);
+            gradient.addColorStop(0, 'rgba(255, 220, 100, 0.9)');
+            gradient.addColorStop(0.2, 'rgba(255, 180, 50, 0.6)');
+            gradient.addColorStop(0.5, 'rgba(255, 100, 0, 0.3)');
+            gradient.addColorStop(1, 'rgba(255, 50, 0, 0)');
+            
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius * 3, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Middle layer
+            const midGradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 1.5);
+            midGradient.addColorStop(0, 'rgba(255, 255, 200, 1)');
+            midGradient.addColorStop(0.5, 'rgba(255, 200, 50, 0.8)');
+            midGradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+            
+            ctx.fillStyle = midGradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius * 1.5, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Core
+            const coreGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
+            coreGradient.addColorStop(0, '#ffffff');
+            coreGradient.addColorStop(0.3, '#ffeb3b');
+            coreGradient.addColorStop(0.7, '#ff9800');
+            coreGradient.addColorStop(1, '#ff5722');
+            
+            ctx.fillStyle = coreGradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Pulsing ring
+            const pulse = Math.sin(Date.now() / 400) * 8;
+            ctx.strokeStyle = `rgba(255, 255, 255, ${0.3 + Math.sin(Date.now() / 400) * 0.2})`;
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.arc(x, y, radius + 10 + pulse, 0, Math.PI * 2);
+            ctx.stroke();
+            
+            // Energy particles
+            const time = Date.now() / 1000;
+            for (let i = 0; i < 8; i++) {
+                const angle = (i / 8) * Math.PI * 2 + time;
+                const distance = radius + 15 + Math.sin(time * 3 + i) * 5;
+                const px = x + Math.cos(angle) * distance;
+                const py = y + Math.sin(angle) * distance;
+                
+                ctx.fillStyle = 'rgba(255, 255, 150, 0.6)';
+                ctx.beginPath();
+                ctx.arc(px, py, 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        
+        // Draw lightning
+        function drawLightning(lightning) {
+            lightningCtx.save();
+            
+            const flicker = 0.8 + Math.random() * 0.2;
+            lightningCtx.globalAlpha = lightning.intensity * flicker;
+            
+            // Main bolt - outer glow
+            lightningCtx.strokeStyle = '#00b4ff';
+            lightningCtx.shadowColor = '#00d4ff';
+            lightningCtx.shadowBlur = 25;
+            lightningCtx.lineWidth = 5;
+            lightningCtx.lineCap = 'round';
+            lightningCtx.lineJoin = 'round';
+            
+            lightningCtx.beginPath();
+            lightning.segments.forEach((seg, i) => {
+                if (i === 0) {
+                    lightningCtx.moveTo(seg.x, seg.y);
+                } else {
+                    lightningCtx.lineTo(seg.x, seg.y);
+                }
+            });
+            lightningCtx.stroke();
+            
+            // Bright core
+            lightningCtx.strokeStyle = '#ffffff';
+            lightningCtx.shadowBlur = 15;
+            lightningCtx.lineWidth = 2;
+            lightningCtx.stroke();
+            
+            // Inner bright line
+            lightningCtx.strokeStyle = '#e0f7ff';
+            lightningCtx.shadowBlur = 5;
+            lightningCtx.lineWidth = 1;
+            lightningCtx.stroke();
+            
+            lightningCtx.restore();
+        }
+        
+        // Animation loop
+        function animate() {
+            // Clear canvases
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            lightningCtx.clearRect(0, 0, lightningCanvas.width, lightningCanvas.height);
+            
+            // Update lightning connections
+            updateLightningConnections();
+            
+            // Draw all active lightnings
+            activeLightnings.forEach((lightning) => {
+                drawLightning(lightning);
+            });
+            
+            // Draw this tab's sun
+            drawSun(sun.x, sun.y, sun.radius);
+            
+            // Update connection count
+            document.getElementById('connectionInfo').textContent = `Connected tabs: ${otherTabs.size}`;
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // Mouse events
+        canvas.addEventListener('mousedown', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const dx = mouseX - sun.x;
+            const dy = mouseY - sun.y;
+            
+            if (Math.sqrt(dx * dx + dy * dy) <= sun.radius * 2) {
+                sun.dragging = true;
+                sun.offsetX = dx;
+                sun.offsetY = dy;
+            }
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if (sun.dragging) {
+                const rect = canvas.getBoundingClientRect();
+                sun.x = e.clientX - rect.left - sun.offsetX;
+                sun.y = e.clientY - rect.top - sun.offsetY;
+                broadcastPosition();
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            sun.dragging = false;
+        });
+        
+        canvas.addEventListener('mouseleave', () => {
+            sun.dragging = false;
+        });
+        
+        // Touch events for mobile
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const rect = canvas.getBoundingClientRect();
+            const touchX = touch.clientX - rect.left;
+            const touchY = touch.clientY - rect.top;
+            const dx = touchX - sun.x;
+            const dy = touchY - sun.y;
+            
+            if (Math.sqrt(dx * dx + dy * dy) <= sun.radius * 2) {
+                sun.dragging = true;
+                sun.offsetX = dx;
+                sun.offsetY = dy;
+            }
+        });
+        
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (sun.dragging) {
+                const touch = e.touches[0];
+                const rect = canvas.getBoundingClientRect();
+                sun.x = touch.clientX - rect.left - sun.offsetX;
+                sun.y = touch.clientY - rect.top - sun.offsetY;
+                broadcastPosition();
+            }
+        });
+        
+        canvas.addEventListener('touchend', () => {
+            sun.dragging = false;
+        });
+        
+        // Window resize and move
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            lightningCanvas.width = window.innerWidth;
+            lightningCanvas.height = window.innerHeight;
+            broadcastPosition();
+        });
+        
+        // Detect window movement
+        let lastScreenX = window.screenX;
+        let lastScreenY = window.screenY;
+        setInterval(() => {
+            if (window.screenX !== lastScreenX || window.screenY !== lastScreenY) {
+                lastScreenX = window.screenX;
+                lastScreenY = window.screenY;
+                broadcastPosition();
+            }
+        }, 100);
+        
+        // Disconnect on close
+        window.addEventListener('beforeunload', () => {
+            channel.postMessage({
+                type: 'disconnect',
+                tabId: tabId
+            });
+        });
+        
+        // Broadcast position regularly
+        setInterval(broadcastPosition, 50);
+        
+        // Start
+        animate();
+        broadcastPosition();
+    </script>
+</body>
+</html>
\ No newline at end of file

From ab7a3b95ec1f70b62586446a54622e5b32d03c9c Mon Sep 17 00:00:00 2001
From: iamKaviB <iamkavib@gmail.com>
Date: Fri, 24 Oct 2025 20:31:47 +0530
Subject: [PATCH 2/2] universe

---
 epic universe/universe.html | 416 ++++++++++++++++++++++++++++++++++++
 1 file changed, 416 insertions(+)
 create mode 100644 epic universe/universe.html

diff --git a/epic universe/universe.html b/epic universe/universe.html
new file mode 100644
index 00000000..7cd79a1c
--- /dev/null
+++ b/epic universe/universe.html	
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Particle Universe</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        canvas {
+            display: block;
+            cursor: move;
+        }
+        
+        .controls {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            z-index: 10;
+            max-width: 250px;
+        }
+        
+        .controls h3 {
+            margin-bottom: 15px;
+            font-size: 18px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .control-group {
+            margin-bottom: 15px;
+        }
+        
+        .control-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 12px;
+            color: #aaa;
+        }
+        
+        input[type="range"] {
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            border-radius: 2px;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 15px;
+            height: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        
+        input[type="range"]::-moz-range-thumb {
+            width: 15px;
+            height: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            border-radius: 50%;
+            border: none;
+        }
+        
+        button {
+            width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: transform 0.2s;
+        }
+        
+        button:hover {
+            transform: scale(1.05);
+        }
+        
+        button:active {
+            transform: scale(0.95);
+        }
+        
+        .info {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 15px 20px;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            font-size: 12px;
+            max-width: 300px;
+        }
+        
+        .value-display {
+            display: inline-block;
+            float: right;
+            color: #667eea;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    
+    <div class="controls">
+        <h3>⚡ Universe Controls</h3>
+        
+        <div class="control-group">
+            <label>Particle Count <span class="value-display" id="particleValue">5000</span></label>
+            <input type="range" id="particleCount" min="1000" max="15000" value="5000" step="500">
+        </div>
+        
+        <div class="control-group">
+            <label>Speed <span class="value-display" id="speedValue">1.0</span></label>
+            <input type="range" id="speed" min="0.1" max="3" value="1" step="0.1">
+        </div>
+        
+        <div class="control-group">
+            <label>Connection Distance <span class="value-display" id="distValue">120</span></label>
+            <input type="range" id="distance" min="50" max="250" value="120" step="10">
+        </div>
+        
+        <div class="control-group">
+            <label>Wave Intensity <span class="value-display" id="waveValue">0.5</span></label>
+            <input type="range" id="wave" min="0" max="2" value="0.5" step="0.1">
+        </div>
+        
+        <button id="randomize">🎲 Randomize</button>
+        <button id="explode">💥 Explode!</button>
+    </div>
+    
+    <div class="info">
+        <strong>🎮 Controls:</strong><br>
+        • Drag to rotate<br>
+        • Scroll to zoom<br>
+        • Adjust sliders for effects
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        let width = canvas.width = window.innerWidth;
+        let height = canvas.height = window.innerHeight;
+        
+        let particles = [];
+        let mouse = { x: 0, y: 0, down: false };
+        let rotation = { x: 0, y: 0 };
+        let targetRotation = { x: 0, y: 0 };
+        let zoom = 1;
+        
+        // Settings
+        let settings = {
+            particleCount: 5000,
+            speed: 1,
+            connectionDistance: 120,
+            waveIntensity: 0.5
+        };
+        
+        class Particle {
+            constructor() {
+                this.reset();
+                this.z = Math.random() * 2000 - 1000;
+            }
+            
+            reset() {
+                const angle = Math.random() * Math.PI * 2;
+                const radius = Math.random() * 500 + 200;
+                this.x = Math.cos(angle) * radius;
+                this.y = Math.sin(angle) * radius;
+                this.z = Math.random() * 2000 - 1000;
+                
+                this.vx = (Math.random() - 0.5) * 2;
+                this.vy = (Math.random() - 0.5) * 2;
+                this.vz = (Math.random() - 0.5) * 2;
+                
+                this.hue = Math.random() * 360;
+                this.size = Math.random() * 2 + 1;
+            }
+            
+            update(time) {
+                // Wave motion
+                this.x += Math.sin(time * 0.001 + this.y * 0.01) * settings.waveIntensity;
+                this.y += Math.cos(time * 0.001 + this.x * 0.01) * settings.waveIntensity;
+                
+                // Orbital motion
+                this.x += this.vx * settings.speed;
+                this.y += this.vy * settings.speed;
+                this.z += this.vz * settings.speed;
+                
+                // Boundary check
+                if (Math.abs(this.x) > 1000 || Math.abs(this.y) > 1000 || Math.abs(this.z) > 1000) {
+                    this.reset();
+                }
+            }
+            
+            project() {
+                const perspective = 800;
+                const z = Math.max(this.z * zoom, -perspective + 1);
+                const scale = perspective / (perspective + z);
+                return {
+                    x: this.x * scale + width / 2,
+                    y: this.y * scale + height / 2,
+                    scale: Math.max(scale, 0.001)
+                };
+            }
+        }
+        
+        function initParticles() {
+            particles = [];
+            for (let i = 0; i < settings.particleCount; i++) {
+                particles.push(new Particle());
+            }
+        }
+        
+        function rotatePoint(x, y, z) {
+            // Rotate around Y axis
+            let cosY = Math.cos(rotation.y);
+            let sinY = Math.sin(rotation.y);
+            let tempX = x * cosY - z * sinY;
+            let tempZ = x * sinY + z * cosY;
+            x = tempX;
+            z = tempZ;
+            
+            // Rotate around X axis
+            let cosX = Math.cos(rotation.x);
+            let sinX = Math.sin(rotation.x);
+            let tempY = y * cosX - z * sinX;
+            z = y * sinX + z * cosX;
+            y = tempY;
+            
+            return { x, y, z };
+        }
+        
+        function animate(time) {
+            // Smooth rotation interpolation
+            rotation.x += (targetRotation.x - rotation.x) * 0.1;
+            rotation.y += (targetRotation.y - rotation.y) * 0.1;
+            
+            // Fade effect
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Update and draw particles
+            const projectedParticles = [];
+            
+            particles.forEach(p => {
+                p.update(time);
+                
+                const rotated = rotatePoint(p.x, p.y, p.z);
+                p.rx = rotated.x;
+                p.ry = rotated.y;
+                p.rz = rotated.z;
+                
+                const projected = p.project();
+                projectedParticles.push({ ...projected, particle: p });
+            });
+            
+            // Sort by z-index
+            projectedParticles.sort((a, b) => b.particle.rz - a.particle.rz);
+            
+            // Draw connections
+            ctx.strokeStyle = 'rgba(102, 126, 234, 0.1)';
+            ctx.lineWidth = 1;
+            
+            for (let i = 0; i < projectedParticles.length; i++) {
+                const p1 = projectedParticles[i];
+                
+                for (let j = i + 1; j < Math.min(i + 5, projectedParticles.length); j++) {
+                    const p2 = projectedParticles[j];
+                    
+                    const dx = p1.particle.rx - p2.particle.rx;
+                    const dy = p1.particle.ry - p2.particle.ry;
+                    const dz = p1.particle.rz - p2.particle.rz;
+                    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                    
+                    if (dist < settings.connectionDistance) {
+                        const alpha = (1 - dist / settings.connectionDistance) * 0.3;
+                        ctx.strokeStyle = `hsla(${p1.particle.hue}, 80%, 60%, ${alpha})`;
+                        ctx.beginPath();
+                        ctx.moveTo(p1.x, p1.y);
+                        ctx.lineTo(p2.x, p2.y);
+                        ctx.stroke();
+                    }
+                }
+            }
+            
+            // Draw particles
+            projectedParticles.forEach(({ x, y, scale, particle }) => {
+                const size = particle.size * scale;
+                const alpha = scale * 0.8;
+                
+                ctx.fillStyle = `hsla(${particle.hue}, 80%, 60%, ${alpha})`;
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Glow effect
+                ctx.shadowBlur = 15 * scale;
+                ctx.shadowColor = `hsla(${particle.hue}, 80%, 60%, ${alpha})`;
+                ctx.fill();
+                ctx.shadowBlur = 0;
+            });
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // Event listeners
+        canvas.addEventListener('mousedown', (e) => {
+            mouse.down = true;
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if (mouse.down) {
+                const dx = e.clientX - mouse.x;
+                const dy = e.clientY - mouse.y;
+                
+                targetRotation.y += dx * 0.005;
+                targetRotation.x += dy * 0.005;
+                
+                mouse.x = e.clientX;
+                mouse.y = e.clientY;
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            mouse.down = false;
+        });
+        
+        canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            zoom += e.deltaY * 0.001;
+            zoom = Math.max(0.5, Math.min(2, zoom));
+        });
+        
+        window.addEventListener('resize', () => {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        });
+        
+        // Controls
+        document.getElementById('particleCount').addEventListener('input', (e) => {
+            settings.particleCount = parseInt(e.target.value);
+            document.getElementById('particleValue').textContent = settings.particleCount;
+            initParticles();
+        });
+        
+        document.getElementById('speed').addEventListener('input', (e) => {
+            settings.speed = parseFloat(e.target.value);
+            document.getElementById('speedValue').textContent = settings.speed.toFixed(1);
+        });
+        
+        document.getElementById('distance').addEventListener('input', (e) => {
+            settings.connectionDistance = parseInt(e.target.value);
+            document.getElementById('distValue').textContent = settings.connectionDistance;
+        });
+        
+        document.getElementById('wave').addEventListener('input', (e) => {
+            settings.waveIntensity = parseFloat(e.target.value);
+            document.getElementById('waveValue').textContent = settings.waveIntensity.toFixed(1);
+        });
+        
+        document.getElementById('randomize').addEventListener('click', () => {
+            particles.forEach(p => {
+                p.hue = Math.random() * 360;
+                p.vx = (Math.random() - 0.5) * 4;
+                p.vy = (Math.random() - 0.5) * 4;
+                p.vz = (Math.random() - 0.5) * 4;
+            });
+        });
+        
+        document.getElementById('explode').addEventListener('click', () => {
+            particles.forEach(p => {
+                const angle = Math.atan2(p.y, p.x);
+                const force = 20;
+                p.vx = Math.cos(angle) * force;
+                p.vy = Math.sin(angle) * force;
+                p.vz = (Math.random() - 0.5) * force;
+            });
+        });
+        
+        // Initialize
+        initParticles();
+        animate(0);
+    </script>
+</body>
+</html>
\ No newline at end of file
