RippleRama

{"name":"Ripple Rama","description":"Create mesmerizing water ripple effects with interactive elements and customizable parameters for a visually stunning experience.","photo":"https://jippity.s3.amazonaws.com/CleanShot 2024-04-02 at 13.47.37@2x.png","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-05-21T22:47:24.236939Z","updated_at":"2024-05-21T22:47:24.236941Z","user_id":20,"status":"PUBLIC","parent_id":494,"id":1510,"user":{"photo":null,"email":null,"recess_id":"93334261-e433-7134-983b-ed13d90349f5","created_at":"2023-12-13T22:03:27.288318Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"easton","id":20,"password_hash":null,"updated_at":"2023-12-13T22:03:27.288320Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let ripples = [];\nlet totalFrameRate = 0;\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(255);\n frameRate(200)\n}\nfunction createRipple(x, y, strength, parent = null) {\n let ripple = {\n x: x,\n y: y,\n radius: 0,\n speed: 5 * strength,\n alpha: 255,\n parent: parent,\n childrenCreated: false,\n generation: parent ? parent.generation + 1 : 0,\n direction: parent ? -parent.direction : 1 // Add direction property\n };\n ripples.push(ripple);\n}\n\nfunction mousePressed() {\n if (frameRate() >= 30) {\n if (mouseX > width * 0.1 && mouseX < width * 0.9 && mouseY > height * 0.1 && mouseY < height * 0.9) {\n createRipple(mouseX, mouseY, random(0.5, 1.5)); // Random strength between 0.5 and 1.5\n }\n }\n}\nlet averageFrameRate = 10;\n\nlet frameCounter = 0;\n\nfunction draw() {\n background(255);\n totalFrameRate += frameRate();\n frameCount++;\n let averageFrameRate = totalFrameRate / frameCount;\n\n let maxDistance = 100 * 5; // Assume the maximum speed of a ripple is 5\n document.getElementById('fps').innerHTML = \"FPS: \" + Math.round(frameRate());\n\n for (let i = ripples.length - 1; i >= 0; i--) {\n let ripple = ripples[i];\n ripple.speed = min(ripple.speed, 16);\n\n // Check if the ripple will be visible in the next 500 frames\n let isVisible = ripple.x + ripple.radius + maxDistance > 0 && ripple.x - ripple.radius - maxDistance < width &&\n ripple.y + ripple.radius + maxDistance > 0 && ripple.y - ripple.radius - maxDistance < height;\n\n // Only update the ripple if it's visible or if the frame counter is a multiple of 15\n if (isVisible || frameCounter % 15 === 0) {\n ripple.radius += ripple.speed * ripple.direction;\n ripple.speed *= 1 - (0.01 / ripple.speed);\n ripple.alpha *= 0.98;\n\n if (!ripple.childrenCreated && ripple.radius > 50) {\n createChildrenRipples(ripple);\n }\n\n if ((ripple.x - ripple.radius < 0 || ripple.x + ripple.radius > width ||\n ripple.y - ripple.radius < 0 || ripple.y + ripple.radius > height)) {\n createRipple(ripple.x, ripple.y, ripple.speed / 5, ripple);\n }\n }\n\n stroke(0, 0, 255, ripple.alpha);\n noFill();\n ellipse(ripple.x, ripple.y, ripple.radius * 2);\n\n if (ripple.radius > 500 || ripple.alpha < 1) {\n ripples.splice(i, 1);\n }\n }\n\n // Reset the frame counter every 15 frames\n if (frameCounter >= 15) {\n frameCounter = 0;\n }\n}\nfunction createChildrenRipples(ripple) {\n if (averageFrameRate >= 60) {\n let numChildren = 5;\n let childStrength = 0.3;\n for (let j = 0; j < numChildren; j++) {\n let angle = map(j, 0, numChildren, 0, TWO_PI);\n let childX = ripple.x + cos(angle) * (ripple.radius * 0.7);\n let childY = ripple.y + sin(angle) * (ripple.radius * 0.7);\n createRipple(childX, childY, childStrength, ripple);\n }\n ripple.childrenCreated = true;\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n RippleRama\n \n \n\n\n\n

\n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":1510,"created_at":"2024-05-21T22:47:26.872770Z","output_tokens":null,"sender":"human","code_id":87676,"deleted":0,"input_tokens":null,"id":45540},{"message":"Great! Let's start by adding the customization options for the baker character. Since we need to allow players to choose outfits, hairstyles, and accessories, we'll use an HTML form to let them make these selections, and then update the character's appearance accordingly.\n\nFirst, we'll update the `index.html` file to include the customization options:\n\n```html\n\n\n\n\n \n \n RippleRama\n \n \n\n\n\n

Customize your Baker

\n Outfit:\n
\n Hairstyle:\n
\n Accessory:\n
\n \n

\n \n\n\n\n```\n\nNext, we'll add the JavaScript function to handle the updates to the character's appearance in the `script.js` file:\n\n```javascript\nfunction updateCharacter() {\n let outfit = document.getElementById('outfit').value;\n let hairstyle = document.getElementById('hairstyle').value;\n let accessory = document.getElementById('accessory').value;\n\n // Assuming you have a function to update the character's appearance\n updateBakerAppearance(outfit, hairstyle, accessory);\n}\n```\n\nFinally, we'll add a placeholder function to update the baker's appearance in the `script.js` file:\n\n```javascript\nfunction updateBakerAppearance(outfit, hairstyle, accessory) {\n // Placeholder function: Add logic to update the baker's appearance\n console.log(`Updating baker with Outfit: ${outfit}, Hairstyle: ${hairstyle}, Accessory: ${accessory}`);\n}\n```\n\n### Explanation:\n\n1. **HTML Form Creation**: We added a `div` with id `customization` to hold the form elements for selecting the outfit, hairstyle, and accessory.\n2. **Form Elements**: We used `label` and `select` elements to create dropdown menus for each customizable parameter.\n3. **Update Button**: A button is added to trigger the `updateCharacter` function when clicked.\n4. **JavaScript Function `updateCharacter`**: Reads the selected values from the dropdown menus and calls a placeholder function to update the character.\n5. **Placeholder Function `updateBakerAppearance`**: Logs the selected values to the console. This function will be expanded to actually update the character’s appearance.\n\nNext, we need to implement the actual logic for updating the baker's appearance based on the selected options.","project_id":1510,"created_at":"2024-05-21T22:47:26.879075Z","output_tokens":null,"sender":"ai","code_id":87676,"deleted":0,"input_tokens":null,"id":45541},{"message":"make the max FPS 160","project_id":1510,"created_at":"2024-05-21T22:47:39.102766Z","output_tokens":null,"sender":"human","code_id":87677,"deleted":0,"input_tokens":null,"id":45542},{"message":"Sure! To limit the maximum frame rate to 160 FPS, we'll adjust the `frameRate` function call in the `setup` function.\n\nHere is the updated code:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(255);\n frameRate(160); // Set the maximum frame rate to 160\n}\n```\n\n### Explanation:\n\n1. **frameRate Adjustment**: \n - The `frameRate` function sets the maximum frame rate for the sketch.\n - By setting it to 160, we ensure the sketch does not exceed this frame rate, which helps with performance and consistency.","project_id":1510,"created_at":"2024-05-21T22:47:39.107518Z","output_tokens":null,"sender":"ai","code_id":87677,"deleted":0,"input_tokens":null,"id":45543}],"assets":[],"messages_sent":2,"comments":[],"steps":[]}