StSS 3.1 [class]

{"name":"StSS 3.1 [class]","description":"Experience the fun and excitement of pucks bouncing off each other in this interactive and visually captivating physics simulation.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/cmq00rqq3b5w2nffvlac","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-06-25T17:15:24.146683Z","updated_at":"2024-06-25T17:15:24.146685Z","user_id":5,"status":"PUBLIC","parent_id":2048,"id":2054,"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":"// Simulate the Solar System Week 3 Class 1\n/*\n Welcome back!\nkabooooooooooooooooooooooooooooooooooo,m\n Our journey has taken us through: \n - coordinates and relative motion,\n - velocity and acceleration,\n - force and mass,\n - Pythagoras' Theorem,\n - sine and cosine,\n - and circular motion.\n\n That's a robust foundation for physics, and indeed enough to program a faithful and smooth simulation of the planets orbiting the sun.\n I would like to undertake that project next time, but you may begin now — you have the tools!\n\n This time, I want to add one more element of physics that will spice up our simulation.\n\n *Momentum*.\n\n Momentum and a little geometry will let us program accurate *collisions* between two round objects.\n We set up wall bouncing before by merely reversing velocity, but think of the problem of two billiard balls, or an asteroid and a planet, colliding.\n Unless one is MUCH larger than the other, *both* objects will bounce.\n That means we need to calculate the proper angles and velocities of both objects.\n It is not obvious how to do that — how do we handle a bounce between two objects of different masses? Different velocities?\n*/\n\n// Let's get a little code and then turn back to think more about our problem.\n\n// We will store an array of Asteroids that bounce around.\nlet asteroids = [];\n\n// For the side bar.\nlet interfaceWidth = 200;\n\n// 'P' to pause.\nlet paused = false;\n\n// Easy setup()\nfunction setup() {\n createCanvas(1000, 600);\n background(0);\n\n // An array of masses — feel free to change or add more if you spawn more Asteroids.\n let masses = [50, 20, 500];\n\n asteroids.push(new Asteroid(300, 100, masses[0], color(139, 0, 0))); // Red \n asteroids.push(new Asteroid(500, 300, masses[1], color(0, 0, 139))); // Blue\n asteroids.push(new Asteroid(1600, 1200, masses[2], color(0, 139, 0))); // Green\n}\n\n// Here's a class \"Asteroid\" that is basically just our Ball from before.\nclass Asteroid {\n constructor(x, y, r, color) { // We specify a starting (x, y), a radius (size), and a color.\n this.x = x;\n this.y = y;\n this.r = r;\n this.mass = r; // Once again we tie mass to radius. It doesn't have to be this way but it's convenient for us.\n this.vx = random(-4, 4);\n this.vy = random(-4, 4);\n this.angle = atan2(-this.vy, this.vx); // atan2() returns! (The negative corrects for the \"positive == down\" problem.)\n this.forceX = 0;\n this.forceY = 0;\n // UI stuff...\n this.textAbove = false; // Just for positioning text.\n this.dragging = false; // Are you dragging the asteroid?\n this.dragStartX = 0;\n this.dragStartY = 0;\n this.color = color;\n }\n\n /* \n I have already programmed basic movement code and a way to launch asteroids with applied forces.\n That code will be familiar to you if you go find it below, so I want to focus on new stuff.\n\n The problem: get two asteroids to collide and bounce the right way, knowing their sizes, velocities, and positions/angles.\n\n Think from the computer's perspetive. Before you adjust the velocities and angles of two colliding asteroids,\n you must first check if they are colliding at all!\n \n If they are nowhere near each other, there's no reason to run \"bounce\" code.\n \n So let's write that check. \n Two objects needs to bounce if they are colliding.\n They are colliding if they are touching.\n They are touching if *the distance from one asteroid's center to another's is less than the sum of the two radii.*\n That's less fancy than it sounds. Draw a picture!\n\n */\n\n // The good news is that we already have the math to do this. Thanks Pythagoras!\n // We'll program the collision from one Asteroid's perspective.\n // That means we pass in the \"other\" Asteroid as an argument.\n checkCollision(other) {\n // We need the distance between the centers of the Asteroids.\n // Let's do this in pure X and Y then use Pythag. to combine.\n let dx // X-distance is just subtraction!\n let dy // same for Y.\n // Pythagoras' Theorem puts them together:\n let distance\n // We have the distance between the two asteroids.\n // Now we return true (yes, they are colliding) if that distance is smaller than the sum of the radii,\n // and false (no, they are not colliding) otherwise.\n return distance < this.r + other.r; // Because of the comparison <, this comes out as true/false!\n }\n\n /*\n Test it out. Some code below prints \"Crash!\" in the console log whenever two Asteroids overlap.\n Make sure that's working, then we tackle the real puzzle: the bounce.\n\n To get bouncing to work, we'll have to employ a bit more math. \n Don't worry about the details now — the beauty of code is that you can use other people's work if you set it up right (and attribute when necessary)!\n\n Here's the basic idea:\n A moving object has a quantity called *momentum* defined as mass times velocity.\n That means you pick up more momentum the faster you go, but bigger things also have more momentum than smaller things.\n\n Momentum helps with collision computation because it is a law of physics that momentum is *conserved* in an ideal collision.\n The *total* momentum of two colliding objects does not change before and after the collision.\n\n What that means is that we can set up an equation: \n Total momentum before == total momentum after.\n\n Solving that equation (often by including a little geometry to get the angles right) gets you to the velocities of the objects when they bounce.\n\n If you feel like going deep — all the way deep — here's a link to all the fancy math: https://williamecraver.wixsite.com/elastic-equations.\n\n I'll do my best to give you a taste of the calculation without litigating every detail.\n */\n\n // A method to set velocities after a collision, from the perspective of one Asteroid.\n resolveCollision(other) {\n // As usual, we split up motion into X- and Y-components.\n let dx // X-distance between centers. \n let dy // Y-distance between centers.\n let distance // Pythagoras again to get straight-line distance between centers.\n\n // Now we calculate two important vectors that summarize the collision.\n\n // First, the *normal* vector, which points from the center of an Asteroid to the point of contact.\n // We require the normal vector to have a length of 1 to simplify calculations later.\n // We achieve this by dividing by the total distance between the Asteroids.\n // And as usual, we split the normal vector into two components:\n let nx // X-component of normal vector.\n let ny // Y-component.\n\n // The other important vector is the *tangent* vector, which represents the line of contact, like a slip of paper balanced between the Asteroids.\n // The tangent vector is always perpendicular to the normal vector.\n // This means we can calculate it by switching the normal's X for its Y and introducing a negative (draw a picture to see why).\n let tx // The X of the tangent is the negative Y of the normal.\n let ty // The Y of the tangent is the X of the normal.\n\n // The combination of normal and tangent gives a pair of right-angle vectors relative to which we will calculate our trajectories.\n // We could use translate() and rotate() as we did when centering on a Ball, but it's not required. (Try it yourself if you want — in some ways that's easier to understand!)\n\n /*\n One last piece of mathematical machinery: the *dot product*.\n On paper, the dot product is a combo of multiplication and addition of two vectors.\n Its function is measure how *aligned* two vectors are. \n If two vectors are perpendicular, their dot product is zero.\n If they point the same direction, their dot product hits its maximum, which is the product of their lengths.\n Big dot product: two vectors are aligned.\n Small dot product: they are pointing in different directions.\n */\n\n // The dot product of the Asteroid's original velocity with the normal vector.\n // This calculates how aligned the old velocity was with the direction of collision.\n let dpNorm1\n // dpNorm2 is for the other Asteroid, the one we are colliding with.\n let dpNorm2\n\n // Now the dot product of the tangent vector and the Asteroid's velocity vector.\n // The tangent is perpendicular to the direction of collision, so this measures how *unaligned* the old velocity is with the collision.\n let dpTan1\n // And for the other Asteroid.\n let dpTan2\n\n // OK, we have this toolbelt of vectors. The final piece of the puzzle, before we can actually update the velocites, is to calculate the momenta.\n // \"m1\" is the momentum of our Asteroid after the crash; \"m2\" is for the other asteroid.\n // This equation is fancy and a bit hard to understand. I will just point out that is built of pieces you already know or that we just established.\n // Send me a message and set up a time if you want to do a heavy-duty hardcore physics session to learn this math for real!\n\n // Momentum depends on mass — you see those terms. And dpNorm holds information about velocity — the other piece of momentum.\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 // At last, change the velocities of the Asteroids.\n // We add two vectors: one in the tangent direction, one in the normal direction; and we do this separately in X and Y.\n this.vx\n this.vy\n\n // Same thing for the other Asteroid.\n other.vx\n other.vy\n\n // Last but not least, recalculate the angles of both Asteroids so we can update our interface. atan2(), baby!\n this.angle\n other.angle\n }\n /*\n Take a deep breath. That was a lot and it really deserves more time and lead-up.\n Takeaways, though:\n - Collision doesn't require *that* much code. 17 lines, not including the angle updates.\n - This is because the math (geometry) of physics is so elegant and therefore programmable!\n - This method is quite general, and you can adapt this code into lots of situations.\n - If your objects are not round, calculating distance can be a little trickier, but many languages and packages have built-in tools for that.\n - You could adjust this code to support so-called \"inelastic collisions\" where the colliding objects lose a little energy (momentum) when they hit each other (realistic).\n - The easy way to do this is to multiply after-collision velocity by a number like 0.9, like we explored with wall bouncing.\n - You won't need to touch the directional code. The tangent and normal business always applies to both elastic and inelastic collisions.\n - However, you could translate and rotate you coordinate system so that the normal direction is the new X-axis and the tangent is the new Y.\n - Use push() and pop() for this. If you get the rotation and translation right, the momentum calculations simplify a lot.\n \n Now, take some time to play around. Knock the Asteroids into each other and see if you can predict how they'll bounce before it happens.\n Use 'P' to pause the simulation if you need to think.\n\n Go back to the setup() function and adjust the masses, too — see how that changes the results.\n\n If you want to check out the other code behind this (like drawing the vectors), it's all below.\n Read it at your leisure!\n */\n\n // Check if the mouse is on the Asteroid: true/false\n isMouseOver() {\n let d = dist(mouseX, mouseY, this.x, this.y);\n return d < this.r;\n }\n\n // Next three methods are so you can draw a force vector by dragging.\n startDragging() {\n this.dragging = true;\n this.dragStartX = mouseX;\n this.dragStartY = mouseY;\n paused = true;\n }\n\n // Calculate force in each direction by distance (subtraction) between mouse and Asteroid center.\n updateDragging() {\n if (this.dragging) {\n this.forceX = (mouseX - this.x) * 2; // Multiplying by 2 just for feel, so you don't have to drag out super long arrows.\n this.forceY = (mouseY - this.y) * 2;\n }\n }\n\n // When you release...\n stopDragging() {\n this.dragging = false;\n // Add to the velocity: that's acceleration!\n // a = F / m.\n this.vx += this.forceX / this.mass;\n this.vy += this.forceY / this.mass;\n\n // We envision a quick impulse of force, just one frame.\n // Then, turn off the force and let the Asteroids fly.\n this.forceX = 0;\n this.forceY = 0;\n paused = false;\n }\n\n // Familiar movement code.\n move() {\n this.x += this.vx;\n this.y += this.vy;\n // We are not saving acceleration as its own thing, so those two lines are all we need.\n\n // The next two blocks are for wall collisions, same as last week.\n if (this.x - this.r < interfaceWidth) {\n this.x = interfaceWidth + this.r; // Prevent getting stuck\n this.vx *= -1;\n } else if (this.x + this.r > width) {\n this.x = width - this.r;\n this.vx *= -1;\n }\n\n if (this.y - this.r < 0) {\n this.y = this.r;\n this.vy *= -1;\n } else if (this.y + this.r > height) {\n this.y = height - this.r;\n this.vy *= -1;\n }\n\n // We update the angle of the velocity vector with atan2()\n this.angle = atan2(-this.vy, this.vx);\n\n // And position helpful text above/below the Asteroid.\n if (this.y > (2 * height) / 3) {\n this.textAbove = true;\n } else if (this.y < height / 3) {\n this.textAbove = false;\n }\n }\n\n // Draw the Asteroid as a ball (with some vector arrows and some text)\n display() {\n // The easy part: a circle.\n fill(this.color);\n ellipse(this.x, this.y, this.r * 2, this.r * 2);\n\n // The little cross in the middle so we can see our angles.\n stroke(128);\n line(this.x - 10, this.y, this.x + 10, this.y);\n line(this.x, this.y - 10, this.x, this.y + 10);\n\n // Calculate the velocity magnitude so that fast == long arrow.\n let velocityMagnitude = Math.sqrt(this.vx * this.vx + this.vy * this.vy); // Look familiar?\n\n // Map the velocity magnitude to a suitable range of lengths.\n let arrowLength = map(velocityMagnitude, 0, 10, 0, 100);\n\n // Calculate the end point of the arrow with some trigonometry.\n let arrowX = this.x + arrowLength * cos(this.angle);\n let arrowY = this.y - arrowLength * sin(this.angle);\n\n // Adjust thickness based on velocity magnitude too.\n let strokeWeightValue = map(velocityMagnitude, 0, 10, 1, 5);\n\n // Now draw the velocity arrow. First the line.\n push();\n stroke(0, 255, 0);\n strokeWeight(strokeWeightValue);\n line(this.x, this.y, arrowX, arrowY);\n pop();\n\n // Now the arrowhead (this is kind of a pain).\n push();\n fill(0, 255, 0);\n noStroke();\n let arrowSize = map(velocityMagnitude, 0, 10, 10, 20);\n let arrowHeadLength = arrowSize * sqrt(2) / 2;\n let arrowTipX = arrowX + arrowHeadLength * cos(this.angle);\n let arrowTipY = arrowY - arrowHeadLength * sin(this.angle);\n beginShape();\n vertex(arrowTipX, arrowTipY);\n vertex(arrowTipX - arrowSize * cos(this.angle - PI / 4), arrowTipY + arrowSize * sin(this.angle - PI / 4));\n vertex(arrowTipX - arrowSize * cos(this.angle + PI / 4), arrowTipY + arrowSize * sin(this.angle + PI / 4));\n endShape(CLOSE);\n pop();\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 of velocity relative to X-axis.\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(this.color)\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 // If dragging...\n if (this.dragging) {\n stroke(255, 255, 0);\n // Draw a yellow force arrow.\n line(this.x, this.y, mouseX, mouseY);\n push();\n fill(255, 255, 0);\n noStroke();\n let dragAngle = atan2(mouseY - this.y, mouseX - this.x);\n let dragArrowSize = 10;\n let dragArrowHeadLength = dragArrowSize * sqrt(2) / 2;\n let dragArrowTipX = mouseX;\n let dragArrowTipY = mouseY;\n beginShape();\n vertex(dragArrowTipX, dragArrowTipY);\n vertex(dragArrowTipX - dragArrowSize * cos(dragAngle - PI / 4), dragArrowTipY - dragArrowSize * sin(dragAngle - PI / 4));\n vertex(dragArrowTipX - dragArrowSize * cos(dragAngle + PI / 4), dragArrowTipY - dragArrowSize * sin(dragAngle + PI / 4));\n endShape(CLOSE);\n pop();\n this.displayResultantArrow();\n }\n noStroke();\n }\n\n // The orange vector that shows where the Asteroid *will* go.\n displayResultantArrow() {\n\n // The X- and Y-components of the resultant vector are the current velocity + the acceleration induced by the force. a = F / m.\n let resultantX = this.vx + this.forceX / this.mass;\n let resultantY = this.vy + this.forceY / this.mass;\n\n // Yyou cannot escape Pythagoras' Theorem!\n let resultantMagnitude = Math.sqrt(resultantX * resultantX + resultantY * resultantY);\n\n let arrowLength = map(resultantMagnitude, 0, 10, 0, 100);\n\n let resultantAngle = atan2(-resultantY, resultantX);\n\n // Endpoint of the resultant arrow, thanks to trig.\n let arrowX = this.x + arrowLength * cos(resultantAngle);\n let arrowY = this.y - arrowLength * sin(resultantAngle);\n\n let strokeWeightValue = map(resultantMagnitude, 0, 10, 1, 5);\n\n push();\n stroke(255, 165, 0); // Orange \n strokeWeight(strokeWeightValue);\n line(this.x, this.y, arrowX, arrowY);\n pop();\n\n // Arrowhead\n push();\n fill(255, 165, 0);\n noStroke();\n let arrowSize = map(resultantMagnitude, 0, 10, 10, 20);\n let arrowHeadLength = arrowSize * sqrt(2) / 2;\n let arrowTipX = arrowX + arrowHeadLength * cos(resultantAngle);\n let arrowTipY = arrowY - arrowHeadLength * sin(resultantAngle);\n beginShape();\n vertex(arrowTipX, arrowTipY);\n vertex(arrowTipX - arrowSize * cos(resultantAngle - PI / 4), arrowTipY + arrowSize * sin(resultantAngle - PI / 4));\n vertex(arrowTipX - arrowSize * cos(resultantAngle + PI / 4), arrowTipY + arrowSize * sin(resultantAngle + PI / 4));\n endShape(CLOSE);\n pop();\n }\n\n}\n\n// 'P' toggles pause.\nfunction keyPressed() {\n if (key === 'P' || key === 'p') {\n paused = !paused;\n }\n}\n\n\n// Our old friend the draw() function.\nfunction draw() {\n background(230, 240, 250);\n\n // Draw the side panel\n fill(230, 220, 210);\n rect(0, 0, interfaceWidth, height);\n\n // Record some stats\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 asteroid of asteroids) {\n totalMomentumXBefore += asteroid.mass * asteroid.vx;\n totalMomentumYBefore += asteroid.mass * asteroid.vy;\n }\n\n // For each Asteroid\n for (let i = 0; i < asteroids.length; i++) {\n let asteroid = asteroids[i];\n let velocityResultant = sqrt(asteroid.vx * asteroid.vx + asteroid.vy * asteroid.vy);\n let angle = Math.round(degrees(atan2(asteroid.vy, asteroid.vx)));\n if (angle < 0) angle += 360;\n let momentumX = asteroid.mass * asteroid.vx;\n let momentumY = asteroid.mass * asteroid.vy;\n\n // Set text color based on asteroid index\n if (i === 0) {\n fill(139, 0, 0);\n } else if (i === 1) {\n fill(0, 0, 139);\n } else if (i === 2) {\n fill(0, 139, 0);\n } else {\n fill(0);\n }\n\n // side panel text\n textAlign(LEFT, BASELINE);\n textStyle(BOLD);\n text(`Asteroid ${i + 1}`, 10, yOffset);\n yOffset += 20;\n textStyle(NORMAL);\n fill(0);\n text(`Mass: ${asteroid.mass}`, 10, yOffset);\n yOffset += 20;\n text(`Velocity (X): ${asteroid.vx.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`Velocity (Y): ${asteroid.vy.toFixed(2)}`, 10, yOffset);\n yOffset += 20;\n text(`Total 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 += 40;\n }\n\n // An explicit calculation of total momentum of the whole *system*.\n for (let asteroid of asteroids) {\n totalMomentumXAfter += asteroid.mass * asteroid.vx;\n totalMomentumYAfter += asteroid.mass * asteroid.vy;\n }\n\n // Pythag. on momentum\n let totalMomentumResultantBefore = Math.sqrt(totalMomentumXBefore * totalMomentumXBefore + totalMomentumYBefore * totalMomentumYBefore);\n let totalMomentumResultantAfter = Math.sqrt(totalMomentumXAfter * totalMomentumXAfter + totalMomentumYAfter * totalMomentumYAfter);\n\n // Display total momentum at the bottom of theside panel\n fill(0);\n text(`Total Momentum: ${totalMomentumResultantAfter.toFixed(2)}`, 10, height - 20);\n\n // If the simulation is not paused, update and display asteroids\n if (!paused) {\n\n for (let i = 0; i < asteroids.length; i++) {\n for (let j = i + 1; j < asteroids.length; j++) {\n if (asteroids[i].checkCollision(asteroids[j])) {\n console.log(\"Crash!\");\n asteroids[i].resolveCollision(asteroids[j]);\n }\n }\n }\n\n // Update and display all asteroids\n for (let asteroid of asteroids) {\n asteroid.move();\n asteroid.display();\n }\n } else {\n // Display all asteroids without updating\n for (let asteroid of asteroids) {\n asteroid.display();\n }\n\n // Show \"Paused\".\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 before and after if want to check.\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}\n\n// Straightforward mouse stuff.\nfunction mousePressed() {\n for (let asteroid of asteroids) {\n if (asteroid.isMouseOver()) {\n asteroid.startDragging();\n break;\n }\n }\n}\n\nfunction mouseDragged() {\n for (let asteroid of asteroids) {\n if (asteroid.dragging) {\n asteroid.updateDragging();\n }\n }\n}\n\nfunction mouseReleased() {\n for (let asteroid of asteroids) {\n if (asteroid.dragging) {\n asteroid.stopDragging();\n }\n }\n}\n\n///////////////////////////////////////////////////////////////////////////////////////////////////////////// \n/*\n\n\nDiscussion/Follow-up Questions\n1. When you jump off the ground, does it push the Earth away from you? How much?\n2. Which has more momentum: a 10-kg orb travelling 10 meters per second, or a 100-kg orb travelling 1 meter per second?\n3. Two identical asteroids travelling in opposite directions but the same speed collide. What happens?\n4. Why does the total momentum of the system change when the Asteroids bounce off the wall? (It does not change when they bounce off each other.) \n5. How much momentum does an orb that is not moving have? How do you know it's not moving?\n\n*/","style.css":"","index.html":"\n\n\n\n \n \n StSS 3.1 [class]\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"cmq00rqq3b5w2nffvlac","name":"screenshot","deleted":false,"id":10973,"created_at":"2024-06-25T17:15:24.152853Z","project_id":2054,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}