Bouncing Ball Physics Simulation LEVEL TWO

{"name":"Bouncing Ball Physics Simulation LEVEL TWO","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":null,"view_count":3,"fork_count":1,"expires_at":null,"created_at":"2024-01-18T20:21:05.829381Z","updated_at":"2024-01-18T20:45:17.504049Z","user_id":28,"status":"PUBLIC","parent_id":412,"id":415,"user":{"username":"jacob","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"cf1f90dc-37b2-f9e5-9b7b-608488d34314","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let balls = [];\nlet gravity = 0.5;\nlet groundLevel;\n\nlet prevMouseX = 0;\nlet prevMouseY = 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\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 }\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\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 display() {\n stroke(this.strokeColor); // set stroke color\n strokeWeight(2); //set stroke weight\n fill(this.color);\n ellipse(this.x, this.y, this.diameter);\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}\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}\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 // Now we're creating a new Ball object using our class\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}\n\n// And this will be our draw function\nfunction draw() {\n background(220);\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 }\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Bouncing Ball Physics Simulation LEVEL TWO\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":15,"comments":[{"content":"level two\r\n","id":316,"user_id":28,"user":{"username":"jacob","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"cf1f90dc-37b2-f9e5-9b7b-608488d34314","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":415,"created_at":"2024-01-18T20:45:01.697098Z","updated_at":"2024-01-18T20:45:01.697100Z"}],"steps":[]}