commit 85395890a324cb89771d17605cd8bf424e8618e9
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 13:23:13 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..1897605
--- /dev/null
+++ b/body.html
@@ -0,0 +1,27 @@
+<main>
+ <header>
+ <h1>ParticleVerse</h1>
+ <p>An interactive particle playground</p>
+ </header>
+
+ <section class="controls">
+ <label for="particleCount">Particle Count:</label>
+ <input type="range" id="particleCount" min="10" max="1000" value="300">
+
+ <label for="particleSpeed">Particle Speed:</label>
+ <input type="range" id="particleSpeed" min="0.1" max="5" value="1" step="0.1">
+
+ <label for="particleSize">Particle Size:</label>
+ <input type="range" id="particleSize" min="1" max="20" value="5">
+
+ <button id="colorMode">Toggle Color Mode</button>
+ </section>
+
+ <div class="canvas-container">
+ <canvas id="particleCanvas"></canvas>
+ </div>
+</main>
+
+<footer>
+ <p>Move your mouse to interact with particles</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..366c5bf
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://particleverse.scroll.pub
+metaTags
+editButton /edit.html
+title ParticleVerse - Interactive Particle Playground
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6c5f6d6
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<main>\n <header>\n <h1>ParticleVerse</h1>\n <p>An interactive particle playground</p>\n </header>\n \n <section class=\"controls\">\n <label for=\"particleCount\">Particle Count:</label>\n <input type=\"range\" id=\"particleCount\" min=\"10\" max=\"1000\" value=\"300\">\n \n <label for=\"particleSpeed\">Particle Speed:</label>\n <input type=\"range\" id=\"particleSpeed\" min=\"0.1\" max=\"5\" value=\"1\" step=\"0.1\">\n \n <label for=\"particleSize\">Particle Size:</label>\n <input type=\"range\" id=\"particleSize\" min=\"1\" max=\"20\" value=\"5\">\n \n <button id=\"colorMode\">Toggle Color Mode</button>\n </section>\n \n <div class=\"canvas-container\">\n <canvas id=\"particleCanvas\"></canvas>\n </div>\n</main>\n\n<footer>\n <p>Move your mouse to interact with particles</p>\n</footer>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..62d47d1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# particleverse1.scroll.pub
+Website generated by DeepSeek from prompt: a particle website showing lots of particles with some cool controls and interactivity
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..21c26c7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,134 @@
+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();
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d169e29
--- /dev/null
+++ b/style.css
@@ -0,0 +1,111 @@
+: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;
+ }
+}
\ No newline at end of file