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":22,"fork_count":2,"expires_at":null,"created_at":"2024-03-30T01:30:08.468929Z","updated_at":"2024-03-30T01:30:08.468931Z","user_id":52,"status":"PUBLIC","parent_id":880,"id":972,"user":{"username":"jacob_test","id":52,"password_hash":null,"updated_at":"2024-02-16T16:19:43.342187Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"aee5de8c-dfb6-47e5-be7b-10763ea21e94","created_at":"2024-02-16T16:19:43.342184Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"// let lights = [];\n\n// function setup() {\n// createCanvas(400, 400);\n// background(0);\n// }\n\n// function draw() {\n// background(0);\n// for (let light of lights) {\n// light.move();\n// light.display();\n// light.bounce();\n// }\n// }\n\n// function 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));\n// }\n// }\n\n// class 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// ellipse(this.x, this.y, this.diameter, this.diameter);\n// }\n\n// bounce() {\n// if (this.x <= 0 || this.x >= width) {\n// this.angle = PI - this.angle;\n// }\n// if (this.y <= 0 || this.y >= height) {\n// this.angle = -this.angle;\n// }\n// }\n// }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// function setup() {\n// createCanvas(510, 510);\n// background(0);\n// }\n\n// let lights = [];\n\n// function draw() {\n// background(0);\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])) {\n// if (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// }\n// }\n// }\n// }\n\n\n// // map(1, 100, 50, 1000)\n\n\n// }\n\n// function 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 + (frameCount / 100), 10, 255)); // Create and add light to the array\n// lights.push(new Light(width / 2, height / 2, angle + (frameCount / 100), 10, 255)); // Create and add light to the array\n// }\n\n\n\n// // for (let light of lights) {\n// // console.log(light.birth)\n// // }\n// }\n\n// class Light {\n// constructor(x, y, angle, diameter, color) {\n// this.x = x;\n// this.y = y;\n// this.angle = angle;\n// this.speed = 5;\n// this.diameter = diameter; // this.diameter = 10; or this.diameter = diameter;\n// this.birth = millis();\n// this.color = 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// fill(this.x / 2, this.diameter * 2, this.y / 2); // this.color \n// ellipse(this.x, this.y, this.diameter, this.diameter);\n// }\n\n// bounce() {\n// if (this.x <= 0 || this.x >= width) {\n\n// this.angle = PI - this.angle;\n\n// }\n\n// if (this.y <= 0 || this.y >= height) {\n\n// this.angle = -this.angle;\n\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.color - 10\n\n// //\"const\" is like let or var, \"const\" means not changing.\n\n// // const newDiameter = this.diameter * 1.5\n// return new Light(newX, newY, this.angle, newDiameter, newColor);\n// }\n// }\n\n// //use Map function\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// function setup() {\n// createCanvas(510, 510);\n// background(0);\n// }\n\n// let lights = [];\n\n// function draw() {\n// background(0);\n\n// for (let i = 0; i < lights.length; i++) {\n// lights[i].move();\n// lights[i].bounce();\n// for (let j = i + 1; j < lights.length; j++) {\n// if (lights[i].collidesWith(lights[j])) {\n// lights[i].bounceOff(lights[j]);\n// }\n// }\n// }\n\n// for (let light of lights) {\n// light.display();\n// }\n// }\n\n// function 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 + (frameCount / 100), 10, 255)); // Create and add light to the array\n// }\n// }\n\n// class Light {\n// constructor(x, y, angle, diameter, color) {\n// this.x = x;\n// this.y = y;\n// this.angle = angle;\n// this.speed = 5;\n// this.diameter = diameter; // this.diameter = 10; or this.diameter = diameter;\n// this.birth = millis();\n// this.color = 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// fill(this.x / 2, this.diameter * 2, this.y / 2); // this.color \n// ellipse(this.x, this.y, this.diameter, this.diameter);\n// }\n\n// bounce() {\n// if (this.x <= 0 || this.x >= width) {\n\n// this.angle = PI - this.angle;\n\n// }\n\n// if (this.y <= 0 || this.y >= height) {\n\n// this.angle = -this.angle;\n\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\n// bounceOff(other) {\n// const angleBetween = atan2(other.y - this.y, other.x - this.x);\n// this.angle = 2 * angleBetween - this.angle;\n// other.angle = 2 * angleBetween - other.angle;\n// }\n// }\n\n// //use Map function\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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":[],"assets":[{"cloudinary_id":"wuh0ppo2rx3zkx5j5ole","project_id":972,"created_at":"2024-03-30T01:30:08.476986Z","deleted":false,"name":"song","resource_type":"video","id":2635}],"messages_sent":0,"comments":[{"content":"wait how does this work? idk why but it asked me if it could use my mic","id":647,"user_id":37,"user":{"username":"penweirdo234","id":37,"password_hash":null,"updated_at":"2024-01-08T20:25:39.562191Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"93936db1-854e-2590-4381-1a26eb64d507","created_at":"2024-01-08T20:25:39.562188Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":972,"created_at":"2024-06-03T19:34:02.992040Z","updated_at":"2024-06-03T19:34:02.992042Z"}],"steps":[{"instruction":"Click on the black background to generate white light particles that move and bounce off the walls.","title":"Interactive Light Show","created_at":"2024-03-21T09:49:44.772742","project_id":972,"complete":false,"step_number":0,"updated_at":"2024-03-30T01:30:08.472667","id":4935},{"instruction":"Implement realistic physics for the bouncing effect of the white light particles.","title":"Realistic Physics","created_at":"2024-03-21T09:49:44.772801","project_id":972,"complete":false,"step_number":1,"updated_at":"2024-03-30T01:30:08.472742","id":4936},{"instruction":"Allow users to click multiple times to create and control multiple bouncing light particles.","title":"Multiple Lights","created_at":"2024-03-21T09:49:44.772843","project_id":972,"complete":false,"step_number":2,"updated_at":"2024-03-30T01:30:08.472789","id":4937},{"instruction":"Provide visual feedback for the user's interaction with the light particles.","title":"Visual Feedback","created_at":"2024-03-21T09:49:44.772882","project_id":972,"complete":false,"step_number":3,"updated_at":"2024-03-30T01:30:08.472834","id":4938},{"instruction":"Add options for users to customize the appearance and behavior of the light particles.","title":"Customizable Lights","created_at":"2024-03-21T09:49:44.772921","project_id":972,"complete":false,"step_number":4,"updated_at":"2024-03-30T01:30:08.472877","id":4939}]}