Puck Bounce

{"name":"Conservation of Momentum","description":"Experience the fun and excitement of pucks bouncing off each other in this interactive and visually captivating physics simulation.","photo":null,"view_count":2,"fork_count":1,"expires_at":null,"created_at":"2024-05-23T21:33:06.271895Z","updated_at":"2024-05-24T15:17:57.061839Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":1543,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"class Puck {\n constructor(x, y, r) {\n this.x = x;\n this.y = y;\n this.r = r;\n this.mass = Math.round(r); // Ensure mass is an integer\n this.vx = random(-4, 4); // Random initial velocity in x direction\n this.vy = random(-4, 4); // Random initial velocity in y direction\n this.angle = atan2(-this.vy, this.vx); // Adjust angle calculation to match the new convention\n this.textAbove = false; // Initial text position flag\n this.dragging = false; // Flag to track if the puck is being dragged\n this.dragStartX = 0; // Starting x position of the drag\n this.dragStartY = 0; // Starting y position of the drag\n this.forceX = 0; // Force to be applied in x direction\n this.forceY = 0; // Force to be applied in y direction\n }\n\n isMouseOver() {\n let d = dist(mouseX, mouseY, this.x, this.y);\n return d < this.r;\n }\n\n startDragging() {\n this.dragging = true;\n this.dragStartX = mouseX;\n this.dragStartY = mouseY;\n paused = true; // Pause the simulation while dragging\n }\n\n updateDragging() {\n if (this.dragging) {\n this.forceX = (mouseX - this.x) * 0.1; // Calculate force in x\n this.forceY = (mouseY - this.y) * 0.1; // Calculate force in y\n }\n }\n\n stopDragging() {\n this.dragging = false;\n this.vx += this.forceX; // Apply the calculated force to velocity in x\n this.vy += this.forceY; // Apply the calculated force to velocity in y\n this.forceX = 0; // Reset force in x\n this.forceY = 0; // Reset force in y\n paused = false; // Unpause the simulation when dragging stops\n }\n\n update() {\n this.x += this.vx; // Update x position based on vx\n this.y += this.vy; // Update y position based on vy\n\n // Check for collision with the walls and reverse velocity if necessary\n if (this.x - this.r < interfaceWidth) {\n this.x = interfaceWidth + this.r; // Prevent getting stuck\n this.vx *= -1 * 0.95; // Reverse and reduce x velocity\n } else if (this.x + this.r > width) {\n this.x = width - this.r; // Prevent getting stuck\n this.vx *= -1 * 0.95; // Reverse and reduce x velocity\n }\n\n if (this.y - this.r < 0) {\n this.y = this.r; // Prevent getting stuck\n this.vy *= -1 * 0.95; // Reverse and reduce y velocity\n } else if (this.y + this.r > height) {\n this.y = height - this.r; // Prevent getting stuck\n this.vy *= -1 * 0.95; // Reverse and reduce y velocity\n }\n\n // Update the angle based on the current velocity\n this.angle = atan2(-this.vy, this.vx); // Adjust angle calculation to match the new convention\n\n // Update text position based on puck's position on screen\n if (this.y > (2 * height) / 3) {\n this.textAbove = true; // Switch to above when crossing the bottom third\n } else if (this.y < height / 3) {\n this.textAbove = false; // Switch to below when crossing the top third\n }\n }\n\n display() {\n // Draw the puck\n fill(0); // Ensure the puck's fill color is black\n ellipse(this.x, this.y, this.r * 2, this.r * 2);\n\n // Draw the small cross at the center of the puck\n stroke(128); // Gray color\n line(this.x - 10, this.y, this.x + 10, this.y); // Horizontal line\n line(this.x, this.y - 10, this.x, this.y + 10); // Vertical line\n\n // Calculate the velocity magnitude\n let velocityMagnitude = sqrt(this.vx * this.vx + this.vy * this.vy);\n\n // Set the arrow length proportional to the velocity magnitude\n let arrowLength = map(velocityMagnitude, 0, 10, 0, 100); // Adjust the mapping range as needed\n\n // Calculate the end point of the arrow\n let arrowX = this.x + arrowLength * cos(this.angle);\n let arrowY = this.y - arrowLength * sin(this.angle); // Adjust for the new angle convention\n\n // Adjust stroke weight based on velocity magnitude\n let strokeWeightValue = map(velocityMagnitude, 0, 10, 1, 5); // Adjust the mapping range as needed\n\n // Draw the direction arrow\n push(); // Save the current drawing state\n stroke(0, 255, 0); // Green color\n strokeWeight(strokeWeightValue); // Thicker line proportional to velocity\n line(this.x, this.y, arrowX, arrowY);\n pop(); // Restore the previous drawing state\n\n // Draw the arrowhead at the end of the arrow\n push(); // Save the current drawing state\n fill(0, 255, 0); // Green color for the arrowhead\n noStroke();\n let arrowSize = map(velocityMagnitude, 0, 10, 10, 20); // Size of the arrowhead proportional to velocity\n let arrowHeadLength = arrowSize * sqrt(2) / 2; // Length to move the arrowhead along the arrow\n let arrowTipX = arrowX + arrowHeadLength * cos(this.angle); // Move the arrowhead tip along the arrow direction\n let arrowTipY = arrowY - arrowHeadLength * sin(this.angle); // Move the arrowhead tip along the arrow direction\n beginShape();\n vertex(arrowTipX, arrowTipY); // Tip of the arrowhead\n vertex(arrowTipX - arrowSize * cos(this.angle - PI / 4), arrowTipY + arrowSize * sin(this.angle - PI / 4)); // Left corner of the arrowhead\n vertex(arrowTipX - arrowSize * cos(this.angle + PI / 4), arrowTipY + arrowSize * sin(this.angle + PI / 4)); // Right corner of the arrowhead\n endShape(CLOSE);\n pop(); // Restore the previous drawing state\n\n noStroke();\n\n // Determine text position based on textAbove flag\n let textYOffset = this.textAbove ? -(this.r + 20) : this.r + 20;\n\n // Calculate angle for display\n let displayAngle = Math.round(degrees(this.angle) % 360);\n if (displayAngle < 0) displayAngle += 360;\n\n // Display mass, angle, and resultant velocity\n fill(255, 0, 0); // Red color for text\n textSize(12);\n textAlign(CENTER, CENTER);\n let displayText = `Mass: ${this.mass}\\nAngle: ${displayAngle}°\\nVelocity: ${velocityMagnitude.toFixed(2)}`;\n text(displayText, this.x, this.y + textYOffset);\n\n // Draw dragging arrow if the puck is being dragged\n if (this.dragging) {\n stroke(255, 0, 0); // Red color for dragging arrow\n line(this.x, this.y, mouseX, mouseY); // Draw the arrow from the puck center to the mouse\n\n // Draw the arrowhead for the dragging arrow\n push(); // Save the current drawing state\n fill(255, 0, 0); // Red color for the arrowhead\n noStroke();\n let dragAngle = atan2(mouseY - this.y, mouseX - this.x); // Calculate the angle for the dragging arrow\n let dragArrowSize = 10; // Fixed size for the dragging arrowhead\n let dragArrowHeadLength = dragArrowSize * sqrt(2) / 2;\n let dragArrowTipX = mouseX;\n let dragArrowTipY = mouseY;\n beginShape();\n vertex(dragArrowTipX, dragArrowTipY); // Tip of the arrowhead\n vertex(dragArrowTipX - dragArrowSize * cos(dragAngle - PI / 4), dragArrowTipY - dragArrowSize * sin(dragAngle - PI / 4)); // Left corner of the arrowhead\n vertex(dragArrowTipX - dragArrowSize * cos(dragAngle + PI / 4), dragArrowTipY - dragArrowSize * sin(dragAngle + PI / 4)); // Right corner of the arrowhead\n endShape(CLOSE);\n pop(); // Restore the previous drawing state\n this.displayResultantArrow();\n }\n noStroke();\n }\n\n displayResultantArrow() {\n // Calculate the resultant force components\n let resultantX = this.vx + this.forceX;\n let resultantY = this.vy + this.forceY;\n\n // Calculate the resultant velocity magnitude\n let resultantMagnitude = sqrt(resultantX * resultantX + resultantY * resultantY);\n\n // Set the arrow length proportional to the resultant velocity magnitude\n let arrowLength = map(resultantMagnitude, 0, 10, 0, 100); // Adjust the mapping range as needed\n\n // Calculate the angle for the resultant arrow\n let resultantAngle = atan2(-resultantY, resultantX); // Adjust for the new angle convention\n\n // Calculate the end point of the resultant arrow\n let arrowX = this.x + arrowLength * cos(resultantAngle);\n let arrowY = this.y - arrowLength * sin(resultantAngle); // Adjust for the new angle convention\n\n // Adjust stroke weight based on resultant velocity magnitude\n let strokeWeightValue = map(resultantMagnitude, 0, 10, 1, 5); // Adjust the mapping range as needed\n\n // Draw the resultant direction arrow\n push(); // Save the current drawing state\n stroke(0, 0, 255); // Blue color\n strokeWeight(strokeWeightValue); // Thicker line proportional to resultant velocity\n line(this.x, this.y, arrowX, arrowY);\n pop(); // Restore the previous drawing state\n\n // Draw the arrowhead at the end of the resultant arrow\n push(); // Save the current drawing state\n fill(0, 0, 255); // Blue color for the arrowhead\n noStroke();\n let arrowSize = map(resultantMagnitude, 0, 10, 10, 20); // Size of the arrowhead proportional to resultant velocity\n let arrowHeadLength = arrowSize * sqrt(2) / 2; // Length to move the arrowhead along the arrow\n let arrowTipX = arrowX + arrowHeadLength * cos(resultantAngle); // Move the arrowhead tip along the arrow direction\n let arrowTipY = arrowY - arrowHeadLength * sin(resultantAngle); // Move the arrowhead tip along the arrow direction\n beginShape();\n vertex(arrowTipX, arrowTipY); // Tip of the arrowhead\n vertex(arrowTipX - arrowSize * cos(resultantAngle - PI / 4), arrowTipY + arrowSize * sin(resultantAngle - PI / 4)); // Left corner of the arrowhead\n vertex(arrowTipX - arrowSize * cos(resultantAngle + PI / 4), arrowTipY + arrowSize * sin(resultantAngle + PI / 4)); // Right corner of the arrowhead\n endShape(CLOSE);\n pop(); // Restore the previous drawing state\n }\n\n checkCollision(other) {\n let dx = other.x - this.x;\n let dy = other.y - this.y;\n let distance = sqrt(dx * dx + dy * dy);\n return distance < this.r + other.r;\n }\n\n resolveCollision(other) {\n let dx = other.x - this.x;\n let dy = other.y - this.y;\n let distance = sqrt(dx * dx + dy * dy);\n\n // Normal vector\n let nx = dx / distance;\n let ny = dy / distance;\n\n // Tangent vector\n let tx = -ny;\n let ty = nx;\n\n // Dot product tangent direction\n let dpTan1 = this.vx * tx + this.vy * ty;\n let dpTan2 = other.vx * tx + other.vy * ty;\n\n // Dot product normal direction\n let dpNorm1 = this.vx * nx + this.vy * ny;\n let dpNorm2 = other.vx * nx + other.vy * ny;\n\n // Conservation of momentum in 1D\n let m1 = (dpNorm1 * (this.mass - other.mass) + 2 * other.mass * dpNorm2) / (this.mass + other.mass);\n let m2 = (dpNorm2 * (other.mass - this.mass) + 2 * this.mass * dpNorm1) / (this.mass + other.mass);\n\n this.vx = tx * dpTan1 + nx * m1;\n this.vy = ty * dpTan1 + ny * m1;\n other.vx = tx * dpTan2 + nx * m2;\n other.vy = ty * dpTan2 + ny * m2;\n\n // Update the angles after collision\n this.angle = atan2(-this.vy, this.vx); // Adjust angle calculation to match the new convention\n other.angle = atan2(-other.vy, other.vx); // Adjust angle calculation to match the new convention\n }\n}\nlet pucks = [];\n\nlet interfaceWidth = 200; // Width of the interface bar\nlet paused = false; // Variable to track paused state\n\nfunction keyPressed() {\n if (key === 'P' || key === 'p') {\n paused = !paused; // Toggle the paused state\n }\n}\nfunction setup() {\n createCanvas(1000, 600);\n background(220);\n\n pucks.push(new Puck(300, 100, 50)); // Position pucks away from the interface\n pucks.push(new Puck(500, 300, 50));\n}\n\nfunction draw() {\n background(220);\n\n // Draw the interface bar\n fill(180);\n rect(0, 0, interfaceWidth, height);\n\n // Display puck information on the interface bar\n fill(0);\n textSize(16);\n let yOffset = 20;\n let totalMomentumXBefore = 0;\n let totalMomentumYBefore = 0;\n let totalMomentumXAfter = 0;\n let totalMomentumYAfter = 0;\n\n // Calculate total momentum before updates\n for (let puck of pucks) {\n totalMomentumXBefore += puck.mass * puck.vx;\n totalMomentumYBefore += puck.mass * puck.vy;\n }\n\n // Display individual puck information\n for (let i = 0; i < pucks.length; i++) {\n let puck = pucks[i];\n let velocityResultant = sqrt(puck.vx * puck.vx + puck.vy * puck.vy);\n let angle = Math.round(degrees(atan2(puck.vy, puck.vx)));\n if (angle < 0) angle += 360;\n let momentumX = puck.mass * puck.vx;\n let momentumY = puck.mass * puck.vy;\n\n textAlign(LEFT, BASELINE);\n text(`Puck ${i + 1}`, 10, yOffset);\n yOffset += 20;\n text(`Mass: ${puck.mass}`, 10, yOffset);\n yOffset += 20;\n text(`vx: ${puck.vx.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`vy: ${puck.vy.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`Velocity: ${velocityResultant.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`Angle: ${angle}°`, 10, yOffset);\n yOffset += 20;\n text(`Momentum X: ${momentumX.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`Momentum Y: ${momentumY.toFixed(2)}`, 10, yOffset);\n yOffset += 30; // Add extra space between pucks\n }\n\n for (let puck of pucks) {\n totalMomentumXAfter += puck.mass * puck.vx;\n totalMomentumYAfter += puck.mass * puck.vy;\n }\n\n // Calculate total momentum resultant\n let totalMomentumResultantBefore = sqrt(totalMomentumXBefore * totalMomentumXBefore + totalMomentumYBefore * totalMomentumYBefore);\n let totalMomentumResultantAfter = sqrt(totalMomentumXAfter * totalMomentumXAfter + totalMomentumYAfter * totalMomentumYAfter);\n\n // Display total momentum at the bottom of the interface bar\n text(`Total Momentum: ${totalMomentumResultantAfter.toFixed(2)}`, 10, height - 20);\n\n // If the simulation is not paused, update and display pucks\n if (!paused) {\n // Check for and resolve collisions\n for (let i = 0; i < pucks.length; i++) {\n for (let j = i + 1; j < pucks.length; j++) {\n if (pucks[i].checkCollision(pucks[j])) {\n pucks[i].resolveCollision(pucks[j]);\n }\n }\n }\n\n // Update and display all pucks\n for (let puck of pucks) {\n puck.update();\n puck.display();\n }\n } else {\n // Display all pucks without updating\n for (let puck of pucks) {\n puck.display();\n }\n\n // Display paused message\n // fill(255, 0, 0);\n // textSize(32);\n // textAlign(CENTER, CENTER);\n // text(\"Paused\", width / 2, height / 2);\n }\n\n // Log total momentum for verification\n console.log(`Total Momentum X Before: ${totalMomentumXBefore.toFixed(2)}, Total Momentum X After: ${totalMomentumXAfter.toFixed(2)}`);\n console.log(`Total Momentum Y Before: ${totalMomentumYBefore.toFixed(2)}, Total Momentum Y After: ${totalMomentumYAfter.toFixed(2)}`);\n console.log(`Total Momentum Resultant Before: ${totalMomentumResultantBefore.toFixed(2)}, Total Momentum Resultant After: ${totalMomentumResultantAfter.toFixed(2)}`);\n}\nfunction mousePressed() {\n for (let puck of pucks) {\n if (puck.isMouseOver()) {\n puck.startDragging();\n break;\n }\n }\n}\n\nfunction mouseDragged() {\n for (let puck of pucks) {\n if (puck.dragging) {\n puck.updateDragging();\n }\n }\n}\n\nfunction mouseReleased() {\n for (let puck of pucks) {\n if (puck.dragging) {\n puck.stopDragging();\n }\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Puck Bounce\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":43,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-05-23T21:33:06.280461","id":8566,"title":"Create visual elements for pucks","instruction":"Draw and display visual elements representing the pucks on the screen.","created_at":"2024-05-23T21:33:06.280458","project_id":1543},{"step_number":1,"complete":false,"updated_at":"2024-05-23T21:33:06.280545","id":8567,"title":"Implement puck movement","instruction":"Enable the pucks to move smoothly and dynamically within the canvas area.","created_at":"2024-05-23T21:33:06.280544","project_id":1543},{"step_number":2,"complete":false,"updated_at":"2024-05-23T21:33:06.280600","id":8568,"title":"Add collision detection","instruction":"Detect collisions between the pucks and change their directions accordingly upon collision.","created_at":"2024-05-23T21:33:06.280599","project_id":1543},{"step_number":3,"complete":false,"updated_at":"2024-05-23T21:33:06.280647","id":8569,"title":"Implement visual effects","instruction":"Add visual feedback such as bouncing animation or trails to enhance the visual appeal of the pucks' movement.","created_at":"2024-05-23T21:33:06.280646","project_id":1543},{"step_number":4,"complete":false,"updated_at":"2024-05-23T21:33:06.280692","id":8570,"title":"Add user interaction","instruction":"Allow users to interact with the pucks, such as clicking to add new pucks or dragging to move them around.","created_at":"2024-05-23T21:33:06.280692","project_id":1543},{"step_number":5,"complete":false,"updated_at":"2024-05-23T21:33:06.280737","id":8571,"title":"Optimize performance","instruction":"Ensure the smooth rendering and movement of pucks even with a large number of them on the screen.","created_at":"2024-05-23T21:33:06.280736","project_id":1543},{"step_number":6,"complete":false,"updated_at":"2024-05-23T21:33:06.280777","id":8572,"title":"Implement boundaries","instruction":"Define boundaries within which the pucks can move to prevent them from leaving the visible area of the screen.","created_at":"2024-05-23T21:33:06.280777","project_id":1543},{"step_number":7,"complete":false,"updated_at":"2024-05-23T21:33:06.280821","id":8573,"title":"Add customization options","instruction":"Provide options for users to customize the appearance and behavior of the pucks, such as changing colors or sizes.","created_at":"2024-05-23T21:33:06.280820","project_id":1543}]}