Droplet Splash

{"name":"Droplet Splash","description":"Create a playful water droplet animation that responds to user interaction. Start with a basic droplet and gradually add more interactive elements to make it engaging and fun.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/jzrqzqfiabl6jzfzjhdr","view_count":12,"fork_count":0,"expires_at":null,"created_at":"2024-02-20T01:08:50.837575Z","updated_at":"2024-08-22T23:53:58.628934Z","user_id":25,"status":"PUBLIC","parent_id":661,"id":691,"user":{"photo":null,"email":"roserasp.rcl@gmail.com","recess_id":"b0325c1e-fa33-e420-3bbd-16e23deec92c","created_at":"2023-12-19T12:40:25.190376Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"unibunny","id":25,"password_hash":"$2b$12$T8DLx5HV8mYkO6ID/7yXxOe2XWdeWxkYEFlZHZ8igj1Ovbd.zs2aO","updated_at":"2023-12-19T12:40:25.190378Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// for (let ripple of ripples) {\n// y += ripple.calculateY(x);\n// }\n\n\n\n\n\n\n// let show = false;\n// let drops = [];\n// let ripples = [];\n\n// class Drop {\n// constructor() {\n// this.x = random(400);\n// this.y = 0;\n// this.sX = 25;\n// this.sY = 25;\n// this.speed = 1;\n// this.fall = false;\n// this.num = 0\n// }\n// }\n\n// class Ripple {\n// constructor(x) {\n// this.x = x;\n// this.amplitude = 50;\n// this.wavelength = 50;\n// this.velocity = 0.1;\n// this.phase = 0;\n// }\n\n// update() {\n// this.amplitude -= 0.5;\n// this.phase += this.velocity;\n// }\n\n// calculateY(x) {\n// if (this.amplitude < 0) {\n// return 0; // if the amplitude is less than 0, the ripple has dissipated\n// }\n// return this.amplitude * sin((x - this.x) / this.wavelength + this.phase);\n// }\n// }\n\n// function setup() {\n// createCanvas(400, 400);\n// x = random(25, 375);\n// }\n\n// function draw() {\n// background(255);\n\n// stroke(200, 225, 250);\n\n// //rectMode(CENTER);\n// fill(225, 250, 255);\n\n// let waveHeight = 20;\n// let waveFrequency = 0.02;\n\n// // stroke(255, 0, 0)\n// // line(0, 325, 400, 325)\n\n// //rect(200, 355, 400, 95);\n\n\n\n\n\n\n// // Now draw the wave with ripples on top\n// stroke(200, 225, 250);\n// strokeWeight(2); // make the wave a bit thicker\n// //noFill(); // don't fill the wave\n\n// beginShape();\n// for (let x = 0; x < width; x++) {\n// let y = 325;\n// for (let ripple of ripples) {\n// y += ripple.calculateY(x);\n// }\n// y += waveHeight * sin(waveFrequency * x + frameCount * 0.1);\n// vertex(x, y);\n// }\n// endShape();\n\n// for (let i = 0; i < ripples.length; i++) {\n// ripples[i].update();\n\n// // Remove the ripple if its amplitude is less than 0\n// if (ripples[i].amplitude < 0) {\n// ripples.splice(i, 1);\n// i--; // decrement i so the next ripple is not skipped\n// }\n// }\n\n// if (show == true) {\n// for (let i = 0; i < drops.length; i++) {\n// drops[i].y += drops[i].speed;\n// drops[i].sY += 0.25;\n// drops[i].sX -= 0.25;\n// drops[i].speed += 0.5;\n\n// //&& drops[i].y <= 300\n// if (drops[i].y >= 200) {\n// drops[i].sY -= 0.25;\n// drops[i].sX += 0.25;\n// }\n\n// if (drops[i].y >= 280 && drops[i].y <= 324 - drops[i].sY / 2) {\n// drops[i].sY = 25;\n// drops[i].sX = 25;\n// }\n\n// //this is the code that triggers the bounce\n// if (drops[i].y >= 325 + waveHeight * sin(waveFrequency * drops[i].x + frameCount * 0.1) - (drops[i].sY / 2)) {\n// if (drops[i].num <= 5) {\n// drops[i].y = 324 + waveHeight * sin(waveFrequency * drops[i].x + frameCount * 0.1) - (drops[i].sY / 2);\n// drops[i].num++;\n// drops[i].speed = -0.9 * drops[i].speed;\n// ripples.push(new Ripple(drops[i].x));\n// } else {\n// drops[i].speed = 1;\n// }\n// }\n\n// stroke(200, 225, 250);\n\n\n// fill(225, 250, 255);\n// ellipse(drops[i].x, drops[i].y, drops[i].sX, drops[i].sY);\n// }\n// }\n\n\n// }\n\n// function mousePressed() {\n// show = true;\n\n// drops.push(new Drop());\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\n\n\n\n\n\n\nlet show = false;\nlet drops = [];\nlet ripples = [];\nlet r, g, b\nlet c = 1\n\nclass Drop {\n constructor() {\n this.x = random(width);\n this.y = 0;\n this.sX = 25;\n this.sY = 25;\n this.speed = 1;\n this.num = 0\n }\n}\n\nclass Ripple {\n constructor(x) {\n this.x = x;\n this.waveW = 10; // short or tall waves or wave width\n this.waveL = 35; // short or long waves or wave length\n this.pace = 0.3;//speed of wave\n this.phase = 0;//x for the speed \"this.phase += this.pace;\"\n this.waterW = 0.5; // damage to wave or water weight\n }\n\n update() {\n this.waveW -= this.waterW;\n this.phase += this.pace;\n }\n\n calculateY(x) {\n if (this.waveW < 0) {\n return 0; // if the amplitude is less than 0, the ripple has dissipated\n }\n return this.waveW * sin((x - this.x) / this.waveL + this.phase);\n }\n}\n\nfunction setup() {\n createCanvas(400, 400);\n x = random(width);\n}\nfunction draw() {\n r = map(c, 0, 255, 0, 400);\n g = map(c, 100, 200, 100, 200);\n b = map(c, 255, 0, 0, 400);\n background(r, g, b);\n\n let waveHeight = 10;\n let waveFrequency = 0.01;\n\n // Draw the blue area below the wave\n beginShape();// wave\n stroke(200, 225, 250);\n fill(225, 250, 255);//color of wave\n\n for (let x = 0; x < width; x++) {\n let y = 325;\n for (let ripple of ripples) {\n y += ripple.calculateY(x);\n }\n y += waveHeight * sin(waveFrequency * x + frameCount * 0.1);\n vertex(x, y);\n }\n vertex(width, height);\n vertex(0, height);\n endShape(CLOSE);\n\n stroke(200, 225, 250);\n strokeWeight(2); // make the wave a bit thicker\n noFill(); // don't fill the wave\n\n // Increase the resolution by calculating the y-value at smaller increments of x\n beginShape();\n for (let x = 0; x < width; x += 0.5) {\n let y = 325;\n for (let ripple of ripples) {\n y += ripple.calculateY(x);\n }\n y += waveHeight * sin(waveFrequency * x + frameCount * 0.1);\n vertex(x, y);\n }\n endShape();\n\n\n for (let i = 0; i < ripples.length; i++) {\n ripples[i].update();\n\n // Remove the ripple if its amplitude is less than 0\n if (ripples[i].waveW < 0) {\n ripples.splice(i, 1);\n i--; // decrement i so the next ripple is not skipped\n }\n }\n\n if (show == true) {\n for (let i = 0; i < drops.length; i++) {\n drops[i].y += drops[i].speed;\n drops[i].sY += 0.25;\n drops[i].sX -= 0.25;\n drops[i].speed += 0.5;\n\n //&& drops[i].y <= 300\n if (drops[i].y >= 200) {\n drops[i].sY -= 0.25;\n drops[i].sX += 0.25;\n c += 0.1\n }\n\n if (drops[i].y >= 280 && drops[i].y <= 324 - drops[i].sY / 2) {\n drops[i].sY = 25;\n drops[i].sX = 25;\n }\n\n //this is the code that triggers the bounce\n if (drops[i].y >= 325 + waveHeight * sin(waveFrequency * drops[i].x + frameCount * 0.1) - (drops[i].sY / 2)) {\n if (drops[i].num <= 5) {\n drops[i].y = 324 + waveHeight * sin(waveFrequency * drops[i].x + frameCount * 0.1) - (drops[i].sY / 2);\n drops[i].num++;\n drops[i].speed = -0.9 * drops[i].speed;\n ripples.push(new Ripple(drops[i].x));\n } else {\n drops[i].speed = 1;\n }\n }\n\n stroke(200, 225, 250);\n fill(225, 250, 255);\n\n ellipse(drops[i].x, drops[i].y, drops[i].sX, drops[i].sY);\n }\n }\n\n\n}\n\n\nfunction mousePressed() {\n show = true;\n\n drops.push(new Drop());\n}","style.css":"","index.html":"\n\n\n \n \n Droplet Splash\n \n\n\n

\n \n \n\n"},"chat_history":[],"assets":[{"cloudinary_id":"jzrqzqfiabl6jzfzjhdr","name":"nale","deleted":false,"id":18754,"created_at":"2024-08-22T23:53:50.921356Z","project_id":691,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[{"instruction":"Display a static water droplet on the canvas","title":"Create a static water droplet","created_at":"2024-02-17T01:05:04.179250","project_id":691,"complete":true,"step_number":0,"updated_at":"2024-02-20T01:08:50.841348","id":3682},{"instruction":"Implement a click event to create ripples when the user clicks on the droplet","title":"Add interactive click functionality","created_at":"2024-02-17T01:05:04.179370","project_id":691,"complete":false,"step_number":1,"updated_at":"2024-02-20T01:08:50.841457","id":3683},{"instruction":"Animate the movement of the droplet when clicked","title":"Animate the droplet movement","created_at":"2024-02-17T01:05:04.179437","project_id":691,"complete":false,"step_number":2,"updated_at":"2024-02-20T01:08:50.841527","id":3684},{"instruction":"Detect collisions between droplets and the canvas boundaries","title":"Implement collision detection","created_at":"2024-02-17T01:05:04.179501","project_id":691,"complete":false,"step_number":3,"updated_at":"2024-02-20T01:08:50.841594","id":3685},{"instruction":"Introduce a scoring system based on the number of droplets created","title":"Add scoring system","created_at":"2024-02-17T01:05:04.179562","project_id":691,"complete":false,"step_number":4,"updated_at":"2024-02-20T01:08:50.841660","id":3686},{"instruction":"Add obstacles that affect droplet movement and scoring","title":"Introduce obstacles","created_at":"2024-02-17T01:05:04.179643","project_id":691,"complete":false,"step_number":5,"updated_at":"2024-02-20T01:08:50.841725","id":3687},{"instruction":"Add visual effects such as ripples, splashes, and particle effects","title":"Enhance visuals","created_at":"2024-02-17T01:05:04.179707","project_id":691,"complete":false,"step_number":6,"updated_at":"2024-02-20T01:08:50.841791","id":3688},{"instruction":"Ensure the animation is responsive and optimized for mobile devices","title":"Optimize for mobile","created_at":"2024-02-17T01:05:04.179770","project_id":691,"complete":false,"step_number":7,"updated_at":"2024-02-20T01:08:50.841858","id":3689}]}