Light Bounce Mania

{"name":"Secret Light","description":"Create an interactive light show where clicking on a black background will generate white lights that shoot out and bounce around.","photo":null,"view_count":15,"fork_count":0,"expires_at":null,"created_at":"2024-04-02T01:08:13.450252Z","updated_at":"2024-04-02T01:08:13.450255Z","user_id":59,"status":"PUBLIC","parent_id":972,"id":1007,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"\n\nlet mic;\nlet fft;\nlet mino = 100;\n\nfunction setup() {\n createCanvas(510, 510);\n background(0);\n\n // Initialize microphone input\n mic = new p5.AudioIn();\n mic.start(); // Start capturing audio from the microphone\n\n // Initialize FFT for audio analysis\n fft = new p5.FFT();\n fft.setInput(mic); // Set FFT to analyze microphone input\n}\n\nlet lights = [];\n\nfunction draw() {\n background(0);\n\n // Analyze the audio input\n let spectrum = fft.analyze();\n let energy = fft.getEnergy(200, 400); // Analyze energy in a frequency range\n\n // Condition to trigger lights based on audio energy\n if (energy > mino && random() < 0.10) { // Adjust this condition as needed\n shootLights(energy);\n }\n\n for (let i = 0; i < lights.length; i++) {\n lights[i].move();\n lights[i].display();\n lights[i].bounce();\n for (let j = i + 1; j < lights.length; j++) {\n if (lights[i].collidesWith(lights[j]) && lights[i].birth + 1000 < millis()) {\n const biggerLight = lights[i].mergeWith(lights[j]);\n lights.splice(j, 1); // Remove the light at index j \n lights[i] = biggerLight; // Replace the light at index i with the bigger light \n setTimeout(() => { // Wait 1 second before checking and potentially removing lights without 3 matches\n checkLightSizes();\n }, 1000 * 0); //!CHANGE How Many Seconds to wait!\n }\n }\n }\n}\n\nfunction checkLightSizes() {\n // Count how many lights there are of each size\n let sizeCounts = lights.reduce((acc, light) => {\n acc[light.diameter] = (acc[light.diameter] || 0) + 1;\n return acc;\n }, {});\n\n // Remove lights that do not have more than 3 other lights with the same size\n lights = lights.filter(light => sizeCounts[light.diameter] > 3);\n}\n\nfunction shootLights() {\n const angles = [0, PI / 2, PI, (3 * PI) / 2]; // Directions: right, down, left, up\n let spectrum = fft.analyze();\n console.log(spectrum)\n let maxIndex = spectrum.findIndex(value => value === Math.max(...spectrum)); // Find the index of the maximum value in the spectrum\n let hueValue = map(maxIndex, 0, spectrum.length - 1, 0, 360); // Map it to a hue value (using HSB color mode)\n hueValue = maxIndex % 360\n hueValue = hueValue * hueValue\n colorMode(HSL);\n\n let diameter = 10; // Default diameter or based on some other logic\n for (let angle of angles) {\n lights.push(new Light(width / 2, height / 2, angle + (frameCount / 100), diameter, hueValue)); // Create and add light with color based on frequency index\n }\n}\n\nclass Light {\n constructor(x, y, angle, diameter, hue) {\n this.x = x;\n this.y = y;\n this.angle = angle;\n this.speed = 5;\n this.diameter = diameter;\n this.birth = millis();\n this.hue = hue;//hue = color\n }\n\n move() {\n this.x += this.speed * cos(this.angle);\n this.y += this.speed * sin(this.angle);\n }\n\n display() {\n colorMode(HSB); // Use HSB color mode\n fill(this.hue, 100, 100); // Use the hue for color, with full saturation and brightness\n ellipse(this.x, this.y, this.diameter, this.diameter);\n colorMode(RGB); // Switch back to RGB color mode if needed elsewhere\n }\n\n bounce() {\n if (this.x <= 0 || this.x >= width) {\n this.angle = PI - this.angle;\n }\n\n if (this.y <= 0 || this.y >= height) {\n this.angle = -this.angle;\n }\n }\n collidesWith(other) {\n const distance = dist(this.x, this.y, other.x, other.y);\n return distance < (this.diameter / 2 + other.diameter / 2);\n }\n mergeWith(other) {\n const newX = this.x\n const newY = this.y\n\n const combinedArea = PI * (this.diameter / 2) ** 2 + PI * (other.diameter / 2) ** 2;\n const newDiameter = 2 * sqrt(combinedArea / PI);\n const newColor = this.hue - 10\n\n return new Light(newX, newY, this.angle, newDiameter, newColor);\n }\n}\n\n//use Map function","style.css":"body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: black;\n}\n\ncanvas {\n background-color: black;\n}","index.html":"\n\n\n\n \n \n Light Bounce Mania\n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":1007,"created_at":"2024-04-02T01:08:16.169357Z","output_tokens":null,"sender":"human","code_id":59083,"deleted":0,"input_tokens":null,"id":32604},{"message":"To start with, let's implement the core functionality of generating light particles when clicking on the black background. This involves updating the `mousePressed` function to create white light particles at the mouse position and ensuring these particles move and bounce off the walls. We'll also need to confirm the `Light` class is properly set up to handle movement, display, and bouncing behavior. \n\nFirst, we'll add or update the `mousePressed` function:\n\n```javascript\nfunction mousePressed() {\n const angles = [0, PI / 2, PI, (3 * PI) / 2]; // Directions: right, down, left, up\n for (let angle of angles) {\n lights.push(new Light(mouseX, mouseY, angle)); // Create and add light to the array at the mouse position\n }\n}\n```\n\n- The `mousePressed` function generates new light particles in four directions (right, down, left, up) from the position where the mouse is clicked.\n- Each new light is an instance of the `Light` class, with its initial position set to the mouse's current `x` and `y` coordinates.\n- These light instances are pushed into the `lights` array, allowing them to be updated and rendered in the `draw` loop.\n\nNext, we ensure the `Light` class is properly defined to support movement and bouncing:\n\n```javascript\nclass Light {\n constructor(x, y, angle) {\n this.x = x;\n this.y = y;\n this.angle = angle;\n this.speed = 5;\n this.diameter = 10;\n }\n\n move() {\n this.x += this.speed * cos(this.angle);\n this.y += this.speed * sin(this.angle);\n }\n\n display() {\n fill(255); // White color\n","project_id":1007,"created_at":"2024-04-02T01:08:16.175014Z","output_tokens":null,"sender":"ai","code_id":59083,"deleted":0,"input_tokens":null,"id":32605},{"message":"can we just make the screen full size","project_id":1007,"created_at":"2024-04-02T01:10:18.994908Z","output_tokens":null,"sender":"human","code_id":59086,"deleted":0,"input_tokens":null,"id":32608},{"message":"To make the canvas fill the entire browser window, you'll need to adjust the `createCanvas` function within the `setup` function to use `windowWidth` and `windowHeight`, which automatically resize the canvas to the full dimensions of the browser window. Here's how you can do it:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Set canvas to full browser window size\n background(0);\n\n // Initialize microphone input\n mic = new p5.AudioIn();\n mic.start(); // Start capturing audio from the microphone\n\n // Initialize FFT for audio analysis\n fft = new p5.FFT();\n fft.setInput(mic); // Set FFT to analyze microphone input\n}\n```\n\n- `windowWidth` and `windowHeight` are p5.js variables that store the width and height of the browser window, respectively.\n- By using these variables in `createCanvas`, the canvas automatically adjusts to the full size of the browser window.\n- This change ensures that the interactive light show takes advantage of the entire screen, enhancing the user experience.","project_id":1007,"created_at":"2024-04-02T01:10:19.002112Z","output_tokens":null,"sender":"ai","code_id":59086,"deleted":0,"input_tokens":null,"id":32609}],"assets":[{"project_id":1007,"creator":null,"cloudinary_id":"wuh0ppo2rx3zkx5j5ole","deleted":false,"id":2672,"created_at":"2024-04-02T01:08:13.459305Z","name":"song","resource_type":"audio","tags":null}],"messages_sent":2,"comments":[],"steps":[{"title":"Interactive Light Show","instruction":"Click on the black background to generate white light particles that move and bounce off the walls.","created_at":"2024-03-21T09:49:44.772742","project_id":1007,"complete":false,"step_number":0,"updated_at":"2024-04-02T01:08:13.454088","id":5133},{"title":"Realistic Physics","instruction":"Implement realistic physics for the bouncing effect of the white light particles.","created_at":"2024-03-21T09:49:44.772801","project_id":1007,"complete":false,"step_number":1,"updated_at":"2024-04-02T01:08:13.454198","id":5134},{"title":"Multiple Lights","instruction":"Allow users to click multiple times to create and control multiple bouncing light particles.","created_at":"2024-03-21T09:49:44.772843","project_id":1007,"complete":false,"step_number":2,"updated_at":"2024-04-02T01:08:13.454273","id":5135},{"title":"Visual Feedback","instruction":"Provide visual feedback for the user's interaction with the light particles.","created_at":"2024-03-21T09:49:44.772882","project_id":1007,"complete":false,"step_number":3,"updated_at":"2024-04-02T01:08:13.454346","id":5136},{"title":"Customizable Lights","instruction":"Add options for users to customize the appearance and behavior of the light particles.","created_at":"2024-03-21T09:49:44.772921","project_id":1007,"complete":false,"step_number":4,"updated_at":"2024-04-02T01:08:13.454416","id":5137}]}