Bouncing Ball Physics Simulation LEVEL THREE

{"name":"Bouncing Ball Physics Simulation LEVEL THREE","description":"Bounce, Drag, and Have Fun! Experience the thrill of interacting with a bouncing ball that obeys the laws of physics and responds to your touch.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/dy8t7ud9pcf4wp7zkep4","view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-02-12T20:08:59.464895Z","updated_at":"2024-02-12T20:08:59.464898Z","user_id":5,"status":"PUBLIC","parent_id":416,"id":621,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let balls = [];\nlet gravity = 0.5;\nlet gravitySlider;\nlet spawnButton;\n\nlet groundLevel;\n\nlet prevMouseX = 0;\nlet prevMouseY = 0;\n\nlet hue = 0;\n\n\nlet draggedBall = null;\n\nlet mouseVelocities = [];\n\nconst colorRed = [255, 0, 0]; // red\nconst colorGreen = [0, 255, 0]; // green\nconst colorBlue = [0, 0, 255]; // blue\nconst colorYellow = [255, 255, 0]; // yellow\nconst colorCyan = [0, 255, 255]; // cyan\nconst colorMagenta = [255, 0, 255]; // magenta\n\nlet boing; //for sound\n\n\nfunction preload() {\n boing = loadSound('@asset(\"boing\")'); // Load the sound in preload\n}\n\nclass Ball {\n constructor(x, y, diameter, color) {\n this.x = x;\n this.y = y;\n this.diameter = diameter;\n this.color = color;\n this.strokeColor = color.map(v => Math.max(v - 40, 0));\n this.yVelocity = 0;\n this.xVelocity = 0;\n this.dragging = false;\n this.deformation = 0\n }\n\n move() {\n if (!this.dragging) {\n this.yVelocity += gravity;\n this.y += this.yVelocity;\n this.x += this.xVelocity;\n\n // Cap the ball's velocity\n this.yVelocity = constrain(this.yVelocity, -50, 50);\n this.xVelocity = constrain(this.xVelocity, -50, 50);\n }\n }\n\n bounce() {\n // Make the ball bounce when it hits the ceiling\n if (this.y - this.diameter / 2 < 0) {\n this.y = 0 + this.diameter / 2; // Set the ball's y position to the ceiling level\n this.yVelocity = -this.yVelocity * 0.9;\n }\n\n // Make the ball bounce when it hits the ground\n if (this.y + this.diameter / 2 > groundLevel) {\n this.y = groundLevel - this.diameter / 2; // Set the ball's y position to the ground level\n this.yVelocity = -this.yVelocity * 0.9; // Reverse the ball's yVelocity and reduce it to simulate energy loss\n }\n\n // Make the ball bounce when it hits the sides of the canvas\n if (this.x + this.diameter / 2 > width || this.x - this.diameter / 2 < 0) {\n this.xVelocity = -this.xVelocity * 0.9;\n }\n\n // // Play the boing sound whenever the ball bounces\n // if (this.y + this.diameter / 2 > groundLevel || this.y - this.diameter / 2 < 0 ||\n // this.x + this.diameter / 2 > windowWidth || this.x - this.diameter / 2 < 0) {\n\n // // Calculate the velocity magnitude\n // let velocityMagnitude = sqrt(this.xVelocity * this.xVelocity + this.yVelocity * this.yVelocity);\n\n // // Map the velocity magnitude to a volume level between 0.0 and 1.0\n // let volume = map(velocityMagnitude, 0, 50, 0.0, 1.0);\n // volume = constrain(volume, 0.0, 1.0); // Ensure volume is between 0.0 and 1.0\n\n // // Set the volume and play the sound \n // boing.setVolume(volume);\n // boing.play();\n // }\n }\n\n drag() {\n // Update ball position when dragging\n if (this.dragging) { // Change this line\n this.x = constrain(mouseX, 0 + this.diameter / 2, windowWidth - this.diameter / 2);\n this.y = constrain(mouseY, 0 + this.diameter / 2, groundLevel - this.diameter / 2);\n }\n }\n\n\n\n display() {\n push(); // save the current drawing style and transformation\n translate(this.x, this.y); // move the origin to the ball's center\n rotate(atan2(this.yVelocity, this.xVelocity) + PI / 2); // rotate the canvas based on the ball's velocity and adjust by 90 degrees\n stroke(this.strokeColor); // set stroke color\n strokeWeight(2); // set stroke weight\n fill(this.color);\n ellipse(0, 0, this.diameter + this.deformation, this.diameter - this.deformation); // draw the ball at the origin, which is now at the ball's center\n pop(); // restore the drawing style and transformation\n this.deformation *= 0.9;\n }\n\n\n collidesWith(otherBall) {\n let d = dist(this.x, this.y, otherBall.x, otherBall.y);\n if (d < (this.diameter + otherBall.diameter) / 2) {\n return true;\n }\n return false;\n }\n\n resolveCollision(otherBall) {\n // calculate displacement, or the distance between ball centers\n let dx = this.x - otherBall.x;\n let dy = this.y - otherBall.y;\n\n // calculate the combined radius\n let combinedRadius = (this.diameter + otherBall.diameter) / 2;\n\n // calculate the overlap between balls\n let overlap = 0.5 * (combinedRadius - sqrt(dx * dx + dy * dy));\n\n // displace current ball\n this.x += overlap * dx / combinedRadius;\n this.y += overlap * dy / combinedRadius;\n\n // displace other ball\n otherBall.x -= overlap * dx / combinedRadius;\n otherBall.y -= overlap * dy / combinedRadius;\n\n // calculate the collision angle\n let angle = atan2(dy, dx);\n\n // calculate velocity components in relation to the collision angle\n let v1 = sqrt(this.xVelocity * this.xVelocity + this.yVelocity * this.yVelocity);\n let v2 = sqrt(otherBall.xVelocity * otherBall.xVelocity + otherBall.yVelocity * otherBall.yVelocity);\n let dir1 = atan2(this.yVelocity, this.xVelocity);\n let dir2 = atan2(otherBall.yVelocity, otherBall.xVelocity);\n let vx1 = v1 * cos(dir1 - angle);\n let vy1 = v1 * sin(dir1 - angle);\n let vx2 = v2 * cos(dir2 - angle);\n let vy2 = v2 * sin(dir2 - angle);\n\n // conservation of momentum\n let fvx1 = ((this.diameter - otherBall.diameter) * vx1 + (otherBall.diameter + otherBall.diameter) * vx2) / (this.diameter + otherBall.diameter);\n let fvx2 = ((this.diameter + this.diameter) * vx1 + (otherBall.diameter - this.diameter) * vx2) / (this.diameter + otherBall.diameter);\n let fvy1 = vy1;\n let fvy2 = vy2;\n\n // apply the final velocities\n this.xVelocity = cos(angle) * fvx1 + cos(angle + PI / 2) * fvy1;\n this.yVelocity = sin(angle) * fvx1 + sin(angle + PI / 2) * fvy1;\n otherBall.xVelocity = cos(angle) * fvx2 + cos(angle + PI / 2) * fvy2;\n otherBall.yVelocity = sin(angle) * fvx2 + sin(angle + PI / 2) * fvy2;\n\n // apply a deformation based on the magnitude of the collision\n let collisionMagnitude = sqrt(this.xVelocity * this.xVelocity + this.yVelocity * this.yVelocity);\n this.deformation = collisionMagnitude;\n otherBall.deformation = collisionMagnitude;\n }\n}\n\n\nclass Slider {\n constructor(min, max, value, x, y) {\n this.min = min;\n this.max = max;\n this.value = value;\n this.x = x;\n this.y = y;\n this.dragging = false;\n }\n\n label(labelText) {\n fill(0); // Set the fill color to black\n noStroke(); // Don't draw a stroke\n textAlign(CENTER, BOTTOM); // Align the text to the center bottom\n text(labelText, this.x + 50, this.y - 10); // Display the text above the slider\n }\n\n\n display() {\n strokeWeight(1);\n stroke(0);\n line(this.x, this.y, this.x + 100, this.y); // Draw the line\n this.value = constrain(this.value, this.min, this.max); // Constrain the value\n let px = map(this.value, this.min, this.max, this.x, this.x + 100); // Map the value to the line\n if (this.dragging) {\n px = constrain(mouseX, this.x, this.x + 100); // If dragging, set px to mouseX\n this.value = map(px, this.x, this.x + 100, this.min, this.max); // Update the value\n }\n fill(255);\n ellipse(px, this.y, 10, 10); // Draw the circle\n }\n\n mousePressed() {\n let d = dist(mouseX, mouseY, this.x, this.y);\n if (d < 50) { // If the mouse is close to the line\n this.dragging = true;\n }\n }\n\n mouseReleased() {\n this.dragging = false;\n }\n}\n\n\n\nfunction mousePressed() {\n for (let i = 0; i < balls.length; i++) {\n let d = dist(mouseX, mouseY, balls[i].x, balls[i].y);\n if (d < balls[i].diameter / 2) {\n balls[i].dragging = true; // Change this line\n draggedBall = balls[i];\n break;\n }\n }\n gravitySlider.mousePressed();\n}\n\nfunction mouseDragged() {\n if (draggedBall) {\n let currentVelocity = createVector(mouseX - pmouseX, mouseY - pmouseY);\n mouseVelocities.push(currentVelocity);\n\n // Update the position of the dragged ball\n draggedBall.x = mouseX;\n draggedBall.y = mouseY;\n\n // Keep the array size manageable\n if (mouseVelocities.length > 10) {\n mouseVelocities.shift();\n }\n }\n}\n\nfunction mouseReleased() {\n if (draggedBall) {\n // Calculate the average mouse velocity\n let averageVelocity = createVector(0, 0);\n for (let i = 0; i < mouseVelocities.length; i++) {\n averageVelocity.add(mouseVelocities[i]);\n }\n averageVelocity.div(mouseVelocities.length);\n\n // Apply the average mouse velocity to the ball\n draggedBall.xVelocity = averageVelocity.x;\n draggedBall.yVelocity = averageVelocity.y;\n draggedBall.dragging = false; // Add this line\n }\n\n draggedBall = null;\n mouseVelocities = []; // Clear the array\n gravitySlider.mouseReleased();\n}\n\n\n\n// This will be our setup function\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(220);\n groundLevel = windowHeight - 1;\n\n\n // Make da balls\n balls.push(new Ball(2 * windowWidth / 8, groundLevel - (windowHeight / 1.5), 50, colorRed));\n // balls.push(new Ball(3 * windowWidth / 8, groundLevel - (windowHeight / 2.5), 35, colorGreen));\n // balls.push(new Ball(4 * windowWidth / 8, groundLevel - (windowHeight / 3.5), 75, colorBlue));\n // balls.push(new Ball(5 * windowWidth / 8, groundLevel - (windowHeight / 4.5), 60, colorYellow));\n // balls.push(new Ball(6 * windowWidth / 8, groundLevel - (windowHeight / 5.5), 100, colorCyan));\n // balls.push(new Ball(7 * windowWidth / 8, groundLevel - (windowHeight / 6.5), 40, colorMagenta));\n\n //make da Slider\n gravitySlider = new Slider(-1, 11, gravity, 100, 100);\n\n // Create a button for spawning balls\n spawnButton = createButton('New Ball');\n spawnButton.position(gravitySlider.x + 120, 10); // Position the button to the right of the slider\n spawnButton.mousePressed(spawnBall);\n\n}\n\n// And this will be our draw function\nfunction draw() {\n clear();\n colorMode(HSB, 360, 100, 100); // Add this line\n background(hue, 25, 100);\n hue = (hue + 0.25) % 360\n\n colorMode(RGB);\n\n // Update the gravity using the slider value\n gravitySlider.display();\n gravitySlider.label(\"Strength of Gravity\"); // Display the label\n gravity = gravitySlider.value;\n\n // We call the Ball object methods to manage their movement, bouncing, dragging and display\n for (let i = 0; i < balls.length; i++) {\n balls[i].move();\n balls[i].bounce();\n balls[i].drag();\n balls[i].display();\n for (let j = i + 1; j < balls.length; j++) {\n if (balls[i].collidesWith(balls[j])) {\n balls[i].resolveCollision(balls[j]);\n }\n }\n }\n}\n\nfunction randomColor() {\n let order = floor(random(3)); // Randomly choose which color component will be below 128\n let c1 = random(128, 255);\n let c2 = random(128, 255);\n let c3 = random(128);\n if (order === 0) {\n return [c3, c1, c2]; // Red is below 128\n } else if (order === 1) {\n return [c1, c3, c2]; // Green is below 128\n } else {\n return [c1, c2, c3]; // Blue is below 128\n }\n}\n\nfunction spawnBall() {\n balls.push(new Ball(10 + random(windowWidth - 20), 10 + random(windowHeight - 20), random(30, 100), randomColor()));\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Bouncing Ball Physics Simulation LEVEL THREE\n Bouncing Ball Physics Simulation LEVEL FOUR\n\n\n\n \n \n \n \n\n\n"},"chat_history":[{"project_id":621,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-02-12T20:15:45.885216Z","output_tokens":null,"code_id":38482,"input_tokens":null,"id":21778},{"project_id":621,"sender":"ai","message":"","deleted":0,"created_at":"2024-02-12T20:15:45.891514Z","output_tokens":null,"code_id":38482,"input_tokens":null,"id":21779},{"project_id":621,"sender":"human","message":"could we increase the limit for the gravity slider?","deleted":0,"created_at":"2024-02-12T20:16:05.422779Z","output_tokens":null,"code_id":38483,"input_tokens":null,"id":21780},{"project_id":621,"sender":"ai","message":"Sure, let's modify the `Slider` class's constructor in the script.js file to increase the maximum value of the slider.\n\n```javascript\nclass Slider {\n constructor(min, max, value, x, y) {\n this.min = min;\n this.max = max;\n this.value = value;\n this.x = x;\n this.y = y;\n this.dragging = false;\n }\n // ... rest of the code\n}\n```\n\nAnd update the `setup` function to reflect the new maximum value for the gravity slider:\n\n```javascript\nfunction setup() {\n // ... rest of the code\n\n //make da Slider\n gravitySlider = new Slider(-0.5, 5.0, gravity, 50, 50);\n\n // ... rest of the code\n}\n```\n\n- The `Slider` class's constructor takes five parameters: `min`, `max`, `value`, `x`, and `y`. These represent the minimum value, maximum value, initial value, and the x and y coordinates of the slider respectively.\n\n- We increase the `max` parameter from `2.0` to `5.0`. This change will increase the maximum value of the gravity slider to `5.0`. \n\n- In the `setup` function, we create the `gravitySlider` object with the new maximum value of `5.0`.","deleted":0,"created_at":"2024-02-12T20:16:05.429057Z","output_tokens":null,"code_id":38483,"input_tokens":null,"id":21781}],"assets":[{"cloudinary_id":"vgazl6aedhnvdm8gh3f4","name":"boing","deleted":false,"id":1164,"created_at":"2024-02-12T20:08:59.470134Z","project_id":621,"resource_type":"video"}],"messages_sent":2,"comments":[{"content":"i think I just made The 2024 War Of Balls\r\n\r\n","id":904,"user_id":220,"user":{"photo":null,"email":null,"recess_id":"ea6c6752-55b0-41a0-801d-9b4247696f1b","created_at":"2024-10-08T18:33:46.888263Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"jonathan","id":220,"password_hash":null,"updated_at":"2024-10-08T18:33:46.888277Z","reset_token_expiry":null,"subscription_status":null},"project_id":621,"created_at":"2024-10-08T18:38:51.457300Z","updated_at":"2024-10-08T18:38:51.457303Z"},{"content":"I basically just got like a million balls and set gravity to full\r\n","id":905,"user_id":220,"user":{"photo":null,"email":null,"recess_id":"ea6c6752-55b0-41a0-801d-9b4247696f1b","created_at":"2024-10-08T18:33:46.888263Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"jonathan","id":220,"password_hash":null,"updated_at":"2024-10-08T18:33:46.888277Z","reset_token_expiry":null,"subscription_status":null},"project_id":621,"created_at":"2024-10-08T18:40:09.206262Z","updated_at":"2024-10-08T18:40:09.206264Z"}],"steps":[]}