Advanced particle generator with draggable menu for Drawaria, using multiple techniques
// ==UserScript== // @name Drawaria Advanced Particles Generator With Menu // @namespace http://tampermonkey.net/ // @version 2025-02-23 // @description Advanced particle generator with draggable menu for Drawaria, using multiple techniques // @author YouTubeDrawaria // @match https://drawaria.online/* // @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online // @grant none // @license MIT // @require https://unpkg.com/[email protected]/dist/draggabilly.pkgd.min.js // @require https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js // @require https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js // ==/UserScript== (function() { 'use strict'; const styles = ` .particle-menu { position: fixed; top: 20px; left: 20px; background: rgba(40, 44, 52, 0.9); border-radius: 10px; padding: 15px; z-index: 10000; min-width: 250px; /* Increased width */ box-shadow: 0 0 15px rgba(0,0,0,0.3); cursor: move; user-select: none; /* Prevent text selection */ } .particle-menu h3 { color: #fff; margin: 0 0 15px 0; /* Increased bottom margin */ text-align: center; cursor: move; font-size: 1.2em; /* Larger font */ } .particle-button { display: block; width: 100%; margin: 8px 0; /* Increased vertical margin */ padding: 10px; /* Increased padding */ border: none; border-radius: 5px; background: linear-gradient(45deg, #4CAF50, #45a049); color: white; cursor: pointer; transition: 0.3s; font-size: 1em; /* Standardized font size */ } .particle-button:hover { transform: scale(1.05); background: linear-gradient(45deg, #45a049, #4CAF50); } #particles-js, #canvas-particles, #threejs-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } #threejs-particles { z-index: 2; /* Ensure Three.js is above particles.js */ } `; const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // --- Particle Containers --- const particleContainer = document.createElement('div'); particleContainer.id = 'particles-js'; document.body.appendChild(particleContainer); const canvasContainer = document.createElement('canvas'); canvasContainer.id = 'canvas-particles'; document.body.appendChild(canvasContainer); const threejsContainer = document.createElement('div'); threejsContainer.id = 'threejs-particles'; document.body.appendChild(threejsContainer); // --- Menu --- const menu = document.createElement('div'); menu.className = 'particle-menu'; menu.innerHTML = ` <h3>Particle Generator</h3> <button class="particle-button" data-type="constellation">✨ Constellation</button> <button class="particle-button" data-type="dna">🧬 DNA Helix</button> <button class="particle-button" data-type="fireflies">🌟 Fireflies</button> <button class="particle-button" data-type="rain">🌧️ Rain</button> <button class="particle-button" data-type="atoms">⚛️ Atoms</button> <button class="particle-button" data-type="bubbles">🫧 Magic Bubbles</button> <button class="particle-button" data-type="matrix">👾 Matrix Rain</button> <button class="particle-button" data-type="clear">🧹 Clear</button> `; document.body.appendChild(menu); new Draggabilly(menu, { handle: 'h3' }); // --- Particle.js Configs (Improved) --- const particleConfigs = { constellation: { particles: { number: { value: 150, density: { enable: true, value_area: 800 } }, color: { value: "#ffffff" }, shape: { type: "star", polygon: { nb_sides: 5 } }, opacity: { value: 0.7, random: true, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 3, random: true, anim: { enable: true, speed: 4, size_min: 0.1, sync: false } }, line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 }, move: { enable: true, speed: 1, direction: "none", random: false, straight: false, out_mode: "out", bounce: false } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false }, onclick: { enable: false }, resize: true } }, retina_detect: true }, fireflies: { particles: { number: { value: 70, density: { enable: true, value_area: 800 } }, color: { value: "#ffeb3b" }, shape: { type: "circle" }, opacity: { value: 0.9, random: true, anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 3, random: true, anim: { enable: true, speed: 2, size_min: 0.1, sync: false } }, line_linked: { enable: false }, move: { enable: true, speed: 1, direction: "none", random: true, straight: false, out_mode: "out", bounce: false } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false }, onclick: { enable: false }, resize: true } }, retina_detect: true }, //Basic config for the other systems, just for not get an error dna:{}, rain:{}, atoms:{}, bubbles:{}, matrix:{}, }; // --- Canvas-Based Rain (Improved) --- let rainParticles = []; function initRain() { const canvas = document.getElementById('canvas-particles'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; rainParticles = []; // Clear previous particles for (let i = 0; i < 200; i++) { rainParticles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, length: Math.random() * 10 + 5, speed: Math.random() * 5 + 2, }); } function drawRain() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = 'rgba(135, 206, 235, 0.8)'; // Light blue ctx.lineWidth = 1; for (const particle of rainParticles) { ctx.beginPath(); ctx.moveTo(particle.x, particle.y); ctx.lineTo(particle.x, particle.y + particle.length); ctx.stroke(); particle.y += particle.speed; if (particle.y > canvas.height) { particle.y = Math.random() * -20; // Reset above the screen particle.x = Math.random() * canvas.width; // New random x } } requestAnimationFrame(drawRain); } drawRain() } // --- Three.js DNA Helix --- let dnaScene, dnaCamera, dnaRenderer, dnaParticles, dnaGroup; function initDNA() { if (!dnaScene) { // Only initialize once dnaScene = new THREE.Scene(); dnaCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); dnaRenderer = new THREE.WebGLRenderer({ alpha: true }); // Use alpha for transparency dnaRenderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('threejs-particles').appendChild(dnaRenderer.domElement); dnaCamera.position.z = 100; // Create a group to hold the particles (for rotation) dnaGroup = new THREE.Group(); dnaScene.add(dnaGroup); const particleCount = 200; // More particles for a denser helix const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { const i3 = i * 3; const helixRadius = 20; const angle = (i / particleCount) * Math.PI * 8; // 4 full turns // Distribute along the helix positions[i3 + 0] = Math.sin(angle) * helixRadius; // X positions[i3 + 1] = (i / particleCount) * 80 - 40; // Y (spread along the height) positions[i3 + 2] = Math.cos(angle) * helixRadius; // Z } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ size: 2.5, // Slightly larger color: 0xFF4444, // More vibrant red transparent: true, opacity: 0.7, }); dnaParticles = new THREE.Points(geometry, material); dnaGroup.add(dnaParticles); // --- Create connecting lines --- const lineGeometry = new THREE.BufferGeometry(); const linePositions = new Float32Array(particleCount * 2 * 3); // * 2 for start/end points const lineMaterial = new THREE.LineBasicMaterial({ color: 0xFF0000, opacity: 0.3, transparent: true }); // Connect particles along the helix for (let i = 0; i < particleCount - 1; i++) { // -1 to avoid connecting the last to the first const i6 = i * 6; // * 6 because we have two 3D points per line segment linePositions[i6 + 0] = positions[i * 3 + 0]; linePositions[i6 + 1] = positions[i * 3 + 1]; linePositions[i6 + 2] = positions[i * 3 + 2]; linePositions[i6 + 3] = positions[(i + 1) * 3 + 0]; linePositions[i6 + 4] = positions[(i + 1) * 3 + 1]; linePositions[i6 + 5] = positions[(i + 1) * 3 + 2]; } lineGeometry.setAttribute('position', new THREE.BufferAttribute(linePositions, 3)); const dnaLines = new THREE.LineSegments(lineGeometry, lineMaterial); //Use LineSegments dnaGroup.add(dnaLines); // --- Animation Loop --- function animateDNA() { if (dnaScene) { requestAnimationFrame(animateDNA); // Rotate the entire group dnaGroup.rotation.y += 0.005; // Rotate around the Y-axis dnaGroup.rotation.x += 0.002; // Slight rotation on X for a more dynamic look dnaRenderer.render(dnaScene, dnaCamera); } } animateDNA(); } } // --- Three.js Atoms --- let atomsScene, atomsCamera, atomsRenderer, atomParticles, nucleus; function initAtoms() { if (!atomsScene) { atomsScene = new THREE.Scene(); atomsCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); atomsRenderer = new THREE.WebGLRenderer({ alpha: true }); atomsRenderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('threejs-particles').appendChild(atomsRenderer.domElement); atomsCamera.position.z = 100; // Nucleus const nucleusGeometry = new THREE.SphereGeometry(10, 32, 32); const nucleusMaterial = new THREE.MeshBasicMaterial({ color: 0x3498db }); nucleus = new THREE.Mesh(nucleusGeometry, nucleusMaterial); atomsScene.add(nucleus); // Electrons (Particles) const electronCount = 8; // Fewer electrons const electronGeometry = new THREE.BufferGeometry(); const electronPositions = new Float32Array(electronCount * 3); const electronOrbits = []; // Store orbit data (radius, speed) for (let i = 0; i < electronCount; i++) { const i3 = i * 3; // Initial positions (will be updated in animation) electronPositions[i3 + 0] = 0; electronPositions[i3 + 1] = 0; electronPositions[i3 + 2] = 0; // Randomize orbit radius and speed electronOrbits.push({ radius: 20 + Math.random() * 30, // Varying radii speed: 0.01 + Math.random() * 0.02, // Varying speeds angle: Math.random() * Math.PI * 2, // Start at random angle }); } electronGeometry.setAttribute('position', new THREE.BufferAttribute(electronPositions, 3)); const electronMaterial = new THREE.PointsMaterial({ size: 4, color: 0xffffff }); atomParticles = new THREE.Points(electronGeometry, electronMaterial); atomsScene.add(atomParticles); // --- Animation --- function animateAtoms() { if (atomsScene) { requestAnimationFrame(animateAtoms); // Update electron positions const positions = atomParticles.geometry.attributes.position.array; for (let i = 0; i < electronCount; i++) { const i3 = i * 3; const orbit = electronOrbits[i]; // Circular motion orbit.angle += orbit.speed; positions[i3 + 0] = Math.cos(orbit.angle) * orbit.radius; // x positions[i3 + 1] = Math.sin(orbit.angle) * orbit.radius; // y positions[i3 + 2] = 0; // Keep in the same plane (for simplicity) } atomParticles.geometry.attributes.position.needsUpdate = true; // Rotate the nucleus slightly for a more dynamic look. nucleus.rotation.y += 0.005; nucleus.rotation.x += 0.003; atomsRenderer.render(atomsScene, atomsCamera); } } animateAtoms(); } } // --- Three.js Bubbles --- let bubblesScene, bubblesCamera, bubblesRenderer, bubbleParticles; function initBubbles() { if (!bubblesScene) { bubblesScene = new THREE.Scene(); bubblesCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); bubblesRenderer = new THREE.WebGLRenderer({ alpha: true }); bubblesRenderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('threejs-particles').appendChild(bubblesRenderer.domElement); bubblesCamera.position.z = 200; // Further away const bubbleCount = 40; // More bubbles const bubbleGeometry = new THREE.BufferGeometry(); const bubblePositions = new Float32Array(bubbleCount * 3); const bubbleSizes = new Float32Array(bubbleCount); // Store sizes const bubbleSpeeds = new Float32Array(bubbleCount); // Store speeds const bubbleColors = []; // Array to store colors const colorPalette = [ new THREE.Color(0x87ceeb), // Sky Blue new THREE.Color(0x00bfff), // Deep Sky Blue new THREE.Color(0x1e90ff) // Dodger Blue ]; for (let i = 0; i < bubbleCount; i++) { const i3 = i * 3; // Random positions within a range bubblePositions[i3 + 0] = (Math.random() - 0.5) * 200; // x bubblePositions[i3 + 1] = (Math.random() - 0.5) * 200; // y bubblePositions[i3 + 2] = (Math.random() - 0.5) * 200; // z // Random sizes bubbleSizes[i] = 5 + Math.random() * 15; //Random Speeds bubbleSpeeds[i] = 0.5 + Math.random() * 1.5; // Slower speeds // Randomly select a color from the palette bubbleColors.push(colorPalette[Math.floor(Math.random() * colorPalette.length)]); } bubbleGeometry.setAttribute('position', new THREE.BufferAttribute(bubblePositions, 3)); bubbleGeometry.setAttribute('size', new THREE.BufferAttribute(bubbleSizes, 1)); // Shader Material for custom appearance (including varied colors) const bubbleMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0xffffff) }, // Default color (will be overridden) colors: { value: bubbleColors} }, vertexShader: ` attribute float size; varying vec3 vColor; // Pass color to fragment shader uniform vec3 colors[${bubbleCount}]; void main() { vColor = colors[gl_VertexID]; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); // Scale with distance gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 color; varying vec3 vColor; void main() { float distance = length(gl_PointCoord - vec2(0.5, 0.5)); if (distance > 0.5) discard; // Make it a circle gl_FragColor = vec4(vColor, 0.5 + (0.5 * (1.0-distance*2.0))); // Use varied color, add gradient } `, transparent: true, //blending: THREE.AdditiveBlending // Optional: For a brighter, additive effect }); bubbleParticles = new THREE.Points(bubbleGeometry, bubbleMaterial); bubblesScene.add(bubbleParticles); function animateBubbles() { if(bubblesScene) { requestAnimationFrame(animateBubbles); const positions = bubbleParticles.geometry.attributes.position.array; for (let i = 0; i < bubbleCount; i++) { const i3 = i * 3; positions[i3 + 1] += bubbleSpeeds[i]; // Move upwards // Reset if out of bounds if (positions[i3 + 1] > window.innerHeight / 2) { positions[i3 + 0] = (Math.random() - 0.5) * 200; positions[i3 + 1] = -window.innerHeight / 2; positions[i3 + 2] = (Math.random() - 0.5) * 200; } } bubbleParticles.geometry.attributes.position.needsUpdate = true; bubblesRenderer.render(bubblesScene, bubblesCamera); } } animateBubbles(); } } // --- Canvas Matrix Rain (Working Version) --- function initMatrix() { const canvas = document.getElementById('canvas-particles'); // Use the existing canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext('2d'); const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; // More characters const fontSize = 16; const columns = canvas.width / fontSize; const drops = []; for (let x = 0; x < columns; x++) { drops[x] = 1; } function drawMatrix() { ctx.fillStyle = 'rgba(0, 0, 0, 0.04)'; // More transparent background ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0F0'; // Green color ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = chars[Math.floor(Math.random() * chars.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } function animateMatrix() { if (canvas.style.display !== 'none') { // Check if canvas is visible drawMatrix(); requestAnimationFrame(animateMatrix); } } animateMatrix() } // --- Clear Function --- function clearParticles() { // particles.js clear particlesJS('particles-js', { particles: { number: { value: 0 } } }); // Canvas clear const canvas = document.getElementById('canvas-particles'); if (canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); } rainParticles = []; // Reset rain particles array // Three.js clear (DNA) if (dnaScene) { while (dnaScene.children.length > 0) { dnaScene.remove(dnaScene.children[0]); } dnaRenderer.dispose(); // Dispose of resources document.getElementById('threejs-particles').innerHTML = ''; // Clear container } dnaScene = null; // Set to null so it can be reinitialized // Three.js clear (Atoms) if (atomsScene) { while(atomsScene.children.length > 0){ atomsScene.remove(atomsScene.children[0]); } atomsRenderer.dispose(); document.getElementById('threejs-particles').innerHTML = ''; } atomsScene = null; // Three.js clear (Bubbles) if (bubblesScene) { while(bubblesScene.children.length > 0){ bubblesScene.remove(bubblesScene.children[0]); } bubblesRenderer.dispose(); document.getElementById('threejs-particles').innerHTML = ''; } bubblesScene = null; } // --- Event Listener (with improved logic) --- menu.addEventListener('click', (e) => { if (e.target.classList.contains('particle-button')) { const type = e.target.dataset.type; clearParticles(); // Clear previous effects before starting a new one //Hide all canvas document.getElementById('particles-js').style.display = 'none'; document.getElementById('canvas-particles').style.display = 'none'; document.getElementById('threejs-particles').style.display = 'none'; switch (type) { case 'constellation': document.getElementById('particles-js').style.display = 'block'; particlesJS('particles-js', particleConfigs.constellation); break; case 'dna': document.getElementById('threejs-particles').style.display = 'block'; initDNA(); break; case 'fireflies': document.getElementById('particles-js').style.display = 'block'; particlesJS('particles-js', particleConfigs.fireflies); break; case 'rain': document.getElementById('canvas-particles').style.display = 'block'; initRain(); break; case 'atoms': document.getElementById('threejs-particles').style.display = 'block'; initAtoms(); break; case 'bubbles': document.getElementById('threejs-particles').style.display = 'block'; initBubbles(); break; case 'matrix': document.getElementById('canvas-particles').style.display = 'block'; // Show canvas initMatrix(); break; case 'clear': // Clear is already handled by clearParticles() break; } } }); // --- Resize Handling --- function handleResize() { const canvas = document.getElementById('canvas-particles'); if (canvas) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; //For Rain if(rainParticles.length > 0) initRain(); // Re-initialize rain on resize } // Three.js resize handling (DNA) if (dnaRenderer) { dnaCamera.aspect = window.innerWidth / window.innerHeight; dnaCamera.updateProjectionMatrix(); dnaRenderer.setSize(window.innerWidth, window.innerHeight); } // Three.js resize handling (Atoms) if (atomsRenderer) { atomsCamera.aspect = window.innerWidth / window.innerHeight; atomsCamera.updateProjectionMatrix(); atomsRenderer.setSize(window.innerWidth, window.innerHeight); } // Three.js resize handling (Bubbles) if (bubblesRenderer) { bubblesCamera.aspect = window.innerWidth / window.innerHeight; bubblesCamera.updateProjectionMatrix(); bubblesRenderer.setSize(window.innerWidth, window.innerHeight); } } window.addEventListener('resize', handleResize); })();
