ParticleVerse
\nAn interactive particle playground
\n\n \n
\n
body.html
Changed around line 1
+
+
+
ParticleVerse
+
An interactive particle playground
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Move your mouse to interact with particles
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://particleverse.scroll.pub
+ metaTags
+ editButton /edit.html
+ title ParticleVerse - Interactive Particle Playground
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "1d1e16d8-6f3a-4fab-be5c-ab39a4a918d4",
+ "object": "chat.completion",
+ "created": 1735651364,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "\n\n---domain---\nparticleverse.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://particleverse.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ParticleVerse - Interactive Particle Playground\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #00b894;\n --bg-color: #2d3436;\n --text-color: #dfe6e9;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--bg-color);\n color: var(--text-color);\n font-family: 'Arial', sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nheader h1 {\n font-size: 3rem;\n color: var(--primary-color);\n text-shadow: 0 0 10px var(--primary-color);\n}\n\nheader p {\n font-size: 1.2rem;\n color: var(--text-color);\n}\n\n.controls {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin-bottom: 2rem;\n padding: 1rem;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n}\n\n.controls label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.controls input[type=\"range\"] {\n width: 100%;\n}\n\n.controls button {\n padding: 0.5rem 1rem;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.controls button:hover {\n background-color: var(--secondary-color);\n}\n\n.canvas-container {\n position: relative;\n width: 100%;\n height: 70vh;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n}\n\ncanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: rgba(255, 255, 255, 0.05);\n margin-top: auto;\n}\n\n@media (max-width: 768px) {\n header h1 {\n font-size: 2rem;\n }\n \n .controls {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\nconst canvas = document.getElementById('particleCanvas');\nconst ctx = canvas.getContext('2d');\nlet particles = [];\nlet mouse = { x: null, y: null };\nlet colorMode = 'random';\n\nclass Particle {\n constructor(x, y, size, speed) {\n this.x = x;\n this.y = y;\n this.size = size;\n this.speedX = (Math.random() * speed) - speed/2;\n this.speedY = (Math.random() * speed) - speed/2;\n this.color = this.getColor();\n }\n\n getColor() {\n if (colorMode === 'random') {\n return `hsl(${Math.random() * 360}, 50%, 50%)`;\n } else {\n return '#6c5ce7';\n }\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n \n if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;\n if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;\n \n this.draw();\n }\n\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fillStyle = this.color;\n ctx.fill();\n }\n}\n\nfunction initParticles(count, size, speed) {\n particles = [];\n for (let i = 0; i < count; i++) {\n const x = Math.random() * canvas.width;\n const y = Math.random() * canvas.height;\n particles.push(new Particle(x, y, size, speed));\n }\n}\n\nfunction animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n particles.forEach(particle => {\n particle.update();\n \n if (mouse.x && mouse.y) {\n const dx = particle.x - mouse.x;\n const dy = particle.y - mouse.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < 100) {\n ctx.beginPath();\n ctx.moveTo(particle.x, particle.y);\n ctx.lineTo(mouse.x, mouse.y);\n ctx.strokeStyle = particle.color;\n ctx.lineWidth = 0.2;\n ctx.stroke();\n }\n }\n });\n \n requestAnimationFrame(animate);\n}\n\nfunction resizeCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight * 0.7;\n initParticles(\n particleCount.value,\n particleSize.value,\n particleSpeed.value\n );\n}\n\n// Event Listeners\nwindow.addEventListener('resize', resizeCanvas);\nwindow.addEventListener('mousemove', (e) => {\n mouse.x = e.x;\n mouse.y = e.y;\n});\nwindow.addEventListener('mouseout', () => {\n mouse.x = null;\n mouse.y = null;\n});\n\n// Control Elements\nconst particleCount = document.getElementById('particleCount');\nconst particleSpeed = document.getElementById('particleSpeed');\nconst particleSize = document.getElementById('particleSize');\nconst colorModeBtn = document.getElementById('colorMode');\n\nparticleCount.addEventListener('input', () => {\n initParticles(\n particleCount.value,\n particleSize.value,\n particleSpeed.value\n );\n});\n\nparticleSpeed.addEventListener('input', () => {\n particles.forEach(particle => {\n particle.speedX = (Math.random() * particleSpeed.value) - particleSpeed.value/2;\n particle.speedY = (Math.random() * particleSpeed.value) - particleSpeed.value/2;\n });\n});\n\nparticleSize.addEventListener('input', () => {\n particles.forEach(particle => {\n particle.size = particleSize.value;\n });\n});\n\ncolorModeBtn.addEventListener('click', () => {\n colorMode = colorMode === 'random' ? 'solid' : 'random';\n particles.forEach(particle => {\n particle.color = particle.getColor();\n });\n});\n\n// Initialization\nresizeCanvas();\nanimate();\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 247,
+ "completion_tokens": 1774,
+ "total_tokens": 2021,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 247
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # particleverse1.scroll.pub
+ Website generated by DeepSeek from prompt: a particle website showing lots of particles with some cool controls and interactivity
script.js
Changed around line 1
+ const canvas = document.getElementById('particleCanvas');
+ const ctx = canvas.getContext('2d');
+ let particles = [];
+ let mouse = { x: null, y: null };
+ let colorMode = 'random';
+
+ class Particle {
+ constructor(x, y, size, speed) {
+ this.x = x;
+ this.y = y;
+ this.size = size;
+ this.speedX = (Math.random() * speed) - speed/2;
+ this.speedY = (Math.random() * speed) - speed/2;
+ this.color = this.getColor();
+ }
+
+ getColor() {
+ if (colorMode === 'random') {
+ return `hsl(${Math.random() * 360}, 50%, 50%)`;
+ } else {
+ return '#6c5ce7';
+ }
+ }
+
+ update() {
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
+ if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
+
+ this.draw();
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ }
+ }
+
+ function initParticles(count, size, speed) {
+ particles = [];
+ for (let i = 0; i < count; i++) {
+ const x = Math.random() * canvas.width;
+ const y = Math.random() * canvas.height;
+ particles.push(new Particle(x, y, size, speed));
+ }
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach(particle => {
+ particle.update();
+
+ if (mouse.x && mouse.y) {
+ const dx = particle.x - mouse.x;
+ const dy = particle.y - mouse.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < 100) {
+ ctx.beginPath();
+ ctx.moveTo(particle.x, particle.y);
+ ctx.lineTo(mouse.x, mouse.y);
+ ctx.strokeStyle = particle.color;
+ ctx.lineWidth = 0.2;
+ ctx.stroke();
+ }
+ }
+ });
+
+ requestAnimationFrame(animate);
+ }
+
+ function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight * 0.7;
+ initParticles(
+ particleCount.value,
+ particleSize.value,
+ particleSpeed.value
+ );
+ }
+
+ // Event Listeners
+ window.addEventListener('resize', resizeCanvas);
+ window.addEventListener('mousemove', (e) => {
+ mouse.x = e.x;
+ mouse.y = e.y;
+ });
+ window.addEventListener('mouseout', () => {
+ mouse.x = null;
+ mouse.y = null;
+ });
+
+ // Control Elements
+ const particleCount = document.getElementById('particleCount');
+ const particleSpeed = document.getElementById('particleSpeed');
+ const particleSize = document.getElementById('particleSize');
+ const colorModeBtn = document.getElementById('colorMode');
+
+ particleCount.addEventListener('input', () => {
+ initParticles(
+ particleCount.value,
+ particleSize.value,
+ particleSpeed.value
+ );
+ });
+
+ particleSpeed.addEventListener('input', () => {
+ particles.forEach(particle => {
+ particle.speedX = (Math.random() * particleSpeed.value) - particleSpeed.value/2;
+ particle.speedY = (Math.random() * particleSpeed.value) - particleSpeed.value/2;
+ });
+ });
+
+ particleSize.addEventListener('input', () => {
+ particles.forEach(particle => {
+ particle.size = particleSize.value;
+ });
+ });
+
+ colorModeBtn.addEventListener('click', () => {
+ colorMode = colorMode === 'random' ? 'solid' : 'random';
+ particles.forEach(particle => {
+ particle.color = particle.getColor();
+ });
+ });
+
+ // Initialization
+ resizeCanvas();
+ animate();
style.css
Changed around line 1
+ :root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #00b894;
+ --bg-color: #2d3436;
+ --text-color: #dfe6e9;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: 'Arial', sans-serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ main {
+ flex: 1;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ header h1 {
+ font-size: 3rem;
+ color: var(--primary-color);
+ text-shadow: 0 0 10px var(--primary-color);
+ }
+
+ header p {
+ font-size: 1.2rem;
+ color: var(--text-color);
+ }
+
+ .controls {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ }
+
+ .controls label {
+ display: block;
+ margin-bottom: 0.5rem;
+ }
+
+ .controls input[type="range"] {
+ width: 100%;
+ }
+
+ .controls button {
+ padding: 0.5rem 1rem;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ }
+
+ .controls button:hover {
+ background-color: var(--secondary-color);
+ }
+
+ .canvas-container {
+ position: relative;
+ width: 100%;
+ height: 70vh;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+ }
+
+ canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ footer {
+ text-align: center;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ margin-top: auto;
+ }
+
+ @media (max-width: 768px) {
+ header h1 {
+ font-size: 2rem;
+ }
+
+ .controls {
+ grid-template-columns: 1fr;
+ }
+ }