<!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U... Prompt 1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Speed-Reactive Particle Trail</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> <style> /* Basic CSS to make the canvas fill the screen */ html, body { margin: 0; padding: 0; overflow: hidden; /* Prevents scrollbars */ background-color: #111; /* Dark background for the page */ } </style> </head> <body> <script> // An array to hold all of our particle objects let particles = []; function setup() { createCanvas(windowWidth, windowHeight); // Use HSB color mode, which is great for smooth color transitions // Hue (0-360), Saturation (0-100), Brightness (0-100), Alpha (0-1) colorMode(HSB, 360, 100, 100, 1.0); noStroke(); } function draw() { // A semi-transparent background creates a trailing/fading effect background(20, 0.2); // Calculate the speed of the mouse // dist() calculates the distance between two points (current and previous mouse position) let mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY); // Only create particles if the mouse is moving if (mouseSpeed > 1) { // Map the mouse speed to the number of particles to create each frame. // Faster movement = more particles. let numParticles = map(mouseSpeed, 1, 50, 1, 5); for (let i = 0; i < numParticles; i++) { // Add a new particle to the array at the mouse position, // passing the current speed to the particle's constructor. particles.push(new Particle(mouseX, mouseY, mouseSpeed)); } } // Loop through all particles in the array backwards. // Looping backwards is important when removing items from an array. for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.update(); // Update its position and state p.display(); // Draw it to the canvas // If the particle's lifespan is over, remove it from the array if (p.isFinished()) { particles.splice(i, 1); } } } // This function is called automatically whenever the browser window is resized. function windowResized() { resizeCanvas(windowWidth, windowHeight); } // --- Particle Class --- // This is the blueprint for each individual particle. class Particle { constructor(x, y, speed) { this.pos = createVector(x, y); // Position // Give it a random velocity so particles scatter outwards this.vel = p5.Vector.random2D().mult(random(0.5, 2)); this.lifespan = 1.0; // Life will be from 1.0 (full) to 0.0 (dead) this.lifeDecrement = random(0.005, 0.015); // *** This is where the mouse speed changes the visualization! *** // Map speed to size: slow = small, fast = large // constrain() keeps the value within a reasonable min/max range. this.size = constrain(map(speed, 1, 40, 4, 30), 4, 30); // Map speed to color: slow = cool (cyan), fast = hot (red) this.hue = map(speed, 1, 40, 180, 360); } // Checks if the particle should be removed isFinished() { return this.lifespan <= 0; } // Updates the particle's state update() { this.pos.add(this.vel); // Move the particle this.lifespan -= this.lifeDecrement; // Decrease its life } // Draws the particle on the canvas display() { // The fill color is determined by the hue set in the constructor. // The alpha (transparency) is linked to the particle's remaining lifespan. fill(this.hue, 90, 90, this.lifespan); ellipse(this.pos.x, this.pos.y, this.size); } } </script> </body> </html> Responses: ---
Prompt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Speed-Reactive Particle Trail</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> <style> /* Basic CSS to make the canvas fill the screen */ html, body { margin: 0; padding: 0; overflow: hidden; /* Prevents scrollbars */ background-color: #111; /* Dark background for the page */ } </style> </head> <body> <script> // An array to hold all of our particle objects let particles = []; function setup() { createCanvas(windowWidth, windowHeight); // Use HSB color mode, which is great for smooth color transitions // Hue (0-360), Saturation (0-100), Brightness (0-100), Alpha (0-1) colorMode(HSB, 360, 100, 100, 1.0); noStroke(); } function draw() { // A semi-transparent background creates a trailing/fading effect background(20, 0.2); // Calculate the speed of the mouse // dist() calculates the distance between two points (current and previous mouse position) let mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY); // Only create particles if the mouse is moving if (mouseSpeed > 1) { // Map the mouse speed to the number of particles to create each frame. // Faster movement = more particles. let numParticles = map(mouseSpeed, 1, 50, 1, 5); for (let i = 0; i < numParticles; i++) { // Add a new particle to the array at the mouse position, // passing the current speed to the particle's constructor. particles.push(new Particle(mouseX, mouseY, mouseSpeed)); } } // Loop through all particles in the array backwards. // Looping backwards is important when removing items from an array. for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.update(); // Update its position and state p.display(); // Draw it to the canvas // If the particle's lifespan is over, remove it from the array if (p.isFinished()) { particles.splice(i, 1); } } } // This function is called automatically whenever the browser window is resized. function windowResized() { resizeCanvas(windowWidth, windowHeight); } // --- Particle Class --- // This is the blueprint for each individual particle. class Particle { constructor(x, y, speed) { this.pos = createVector(x, y); // Position // Give it a random velocity so particles scatter outwards this.vel = p5.Vector.random2D().mult(random(0.5, 2)); this.lifespan = 1.0; // Life will be from 1.0 (full) to 0.0 (dead) this.lifeDecrement = random(0.005, 0.015); // *** This is where the mouse speed changes the visualization! *** // Map speed to size: slow = small, fast = large // constrain() keeps the value within a reasonable min/max range. this.size = constrain(map(speed, 1, 40, 4, 30), 4, 30); // Map speed to color: slow = cool (cyan), fast = hot (red) this.hue = map(speed, 1, 40, 180, 360); } // Checks if the particle should be removed isFinished() { return this.lifespan <= 0; } // Updates the particle's state update() { this.pos.add(this.vel); // Move the particle this.lifespan -= this.lifeDecrement; // Decrease its life } // Draws the particle on the canvas display() { // The fill color is determined by the hue set in the constructor. // The alpha (transparency) is linked to the particle's remaining lifespan. fill(this.hue, 90, 90, this.lifespan); ellipse(this.pos.x, this.pos.y, this.size); } } </script> </body> </html>
A system prompt was added to support web rendering
