StSS 2.2

{"name":"StSS 2.2 [Class]","description":"Experience the power of rotational force in this interactive p5.js demo. Manipulate objects with rotational forces and see the fascinating effects of angular motion!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/chyljhhgmahdp6tzzm2z","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-06-20T17:01:21.387479Z","updated_at":"2024-06-20T17:01:21.387480Z","user_id":5,"status":"PUBLIC","parent_id":2003,"id":2004,"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":"// StSS2.2\n\n/*\n\n Welcome Back!\n\n Last time, we took a detour through the lush fields of mathematics.\n We picked up two huge and important ideas, both of which focused on analyzing *right triangles*.\n *Pythagoras' Theorem* solved the puzzle of the side lengths:\n If you know two sides, what's the third?\n *Sine* and *Cosine* functions solved a similar problem with angles:\n Given a vector pointing at an angle, how much of it is X and how much is Y?\n \n I explained and you can guess why those tools are so helpful for physics.\n Let's get something back for all that math work: let's upgrade our simulation!\n\n The main goal for today is to apply forces to our ball *at any angle*.\n\n A week ago we programmed forces but we had to specify x- and y-components to set them up.\n That's tiresome and unnatural in many cases. How to make it better?\n Specify a *total strength* (a magnitude) of the force;\n and an *angle* (a direction) at which it applies.\n\n The main advantage of this approach, for our purposes, is that we can then *change* that angle over time.\n Why is that so great? \n If we want to program *orbits* we will need to constantly adjust the angle of the force of gravity in space.\n The gravity-force-vector of the Earth orbiting the Sun always points towards the Sun as the Earth flies in an ellipse: the angle is always changing.\n \n So let's do it. We will inject our old simulation with more sophisticated math, looking ahead to the curvy, elliptical motion of the planets.\n*/\n\n\n// Most of this setup code is pulled from last week; feel free to speed through.\nlet balls = [];\nlet clouds = [];\n\nlet selectedBall = null; // This will keep track of which ball has been clicked last.\nlet currentHue = 280; // For colors, as we add new balls\n\n// HTML-related stuff for the Stats Panel.\nlet statsDiv;\nlet centerBall0Checkbox;\n\nlet playPauseButton;\nlet isPaused = false;\nlet isDragging = false;\n// More HTML-related stuff...\nlet forceXInput, forceYInput, framesInput, createForceButton;\nlet isForceEquipped = false;\nlet forceVector = null;\nlet forceFrames = 0;\n\nlet groundHeight = 500; // How high the ground level will be, measured from the *top* of the canvas in pixels.\n\n// For coordinates\nlet yOffset;\nlet xOffset;\n\n\n//////// #MAIN FUNCTIONS/////////\nfunction setup() {\n //Adjust frameRate to speed up or slow down the simulation. Default: 60 frames per second\n frameRate(60);\n createCanvas(windowWidth, windowHeight);\n // Hue, saturation, lightness\n colorMode(HSL);\n // Adjust the ground height to be 1/6 of the canvas height.\n groundHeight = (5 / 6) * height;\n // These will become out new origin point (0,0).\n yOffset = groundHeight;\n xOffset = width / 2;\n\n // Put two balls on the list. Check the Ball class lower down to see what the parameters mean.\n // (x, y, radius, color, ID#)\n balls.push(new Ball(-100, -yOffset / 3, 50, currentHue, balls.length));\n //balls.push(new Ball(150, -yOffset / 2, 35, currentHue, balls.length));\n // Select the first ball by default.\n selectedBall = balls[0];\n\n // Create an HTML div for displaying stats\n statsDiv = createDiv('');\n statsDiv.id('statsDiv'); // Assign an ID for CSS styling\n statsDiv.position(10, height + 10); // Position it below the canvas\n\n // Adjust the width of the statsDiv to calculate the total width\n statsDiv.style('width', 'auto');\n // Show the stats of the selected ball in the div.\n selectedBall.updateStats();\n let statsDivWidth = statsDiv.elt.offsetWidth;\n\n // Create a Play/Pause button\n playPauseButton = createButton('Pause');\n playPauseButton.id('playPauseButton'); // Assign an ID for CSS styling\n playPauseButton.position(statsDiv.position().x + statsDivWidth + 100, height + 10); // Position it to the right of the statsDiv\n playPauseButton.mousePressed(togglePause);\n\n // Add styles to make the Play/Pause button big and chunky\n playPauseButton.style('background-color', 'green');\n playPauseButton.style('color', 'white');\n playPauseButton.style('font-size', '20px');\n playPauseButton.style('font-weight', 'bold');\n playPauseButton.style('width', '150px');\n playPauseButton.style('height', '50px');\n // Checkbox to toggle wall bouncing\n createWallBounceCheckbox();\n\n // Create a checkbox to center on Ball #0\n centerBallCheckbox = createCheckbox('Center on Ball', false);\n centerBallCheckbox.id('centerBallCheckbox'); // Assign an ID for CSS styling\n centerBallCheckbox.position(statsDiv.position().x, height + 140); // Position it below the wallBounceCheckbox\n\n // This chunk is for force input, which has changed a bit.\n let forceHeader = createP('Force');\n forceHeader.style('font-weight', 'bold');\n forceHeader.style('text-align', 'center');\n forceHeader.position(470, height + 80);\n forceHeader.style('width', '100px');\n\n // Magnitude input\n let magnitudeLabel = createP('Magnitude:');\n magnitudeLabel.position(400, height + 120);\n magnitudeLabel.style('margin', '0px');\n magnitudeLabel.style('font-weight', 'bold');\n let magnitudeInput = createInput('5', 'number'); // Default value set to 1\n magnitudeInput.attribute('placeholder', 'Magnitude');\n magnitudeInput.position(490, height + 120);\n\n // Angle input\n let angleLabel = createP('Angle:');\n angleLabel.position(400, height + 160);\n angleLabel.style('margin', '0px');\n angleLabel.style('font-weight', 'bold');\n let angleInput = createInput('0', 'number');\n angleInput.attribute('placeholder', 'Angle');\n angleInput.position(490, height + 160);\n\n // Perpendicular checkboxes\n let perpendicularAnticlockwiseCheckbox = createCheckbox('Anticlockwise', false);\n perpendicularAnticlockwiseCheckbox.position(400, height + 200); // Position this checkbox on the left\n perpendicularAnticlockwiseCheckbox.changed(() => {\n if (perpendicularAnticlockwiseCheckbox.checked()) {\n perpendicularClockwiseCheckbox.checked(false);\n angleInput.attribute('disabled', '');\n } else {\n angleInput.removeAttribute('disabled');\n }\n });\n\n let perpendicularClockwiseCheckbox = createCheckbox('Clockwise', false);\n perpendicularClockwiseCheckbox.position(620, height + 200); // Position this checkbox on the right with more distance\n perpendicularClockwiseCheckbox.changed(() => {\n if (perpendicularClockwiseCheckbox.checked()) {\n perpendicularAnticlockwiseCheckbox.checked(false);\n angleInput.attribute('disabled', '');\n } else {\n angleInput.removeAttribute('disabled');\n }\n });\n\n // Frames input\n let framesLabel = createP('Frames:');\n framesLabel.position(400, height + 240);\n framesLabel.style('margin', '0px');\n framesLabel.style('font-weight', 'bold');\n framesInput = createInput('300', 'number'); // Default value set to 300\n framesInput.attribute('placeholder', 'Frames');\n framesInput.position(460, height + 240);\n\n // Apply force button\n createForceButton = createButton('Apply Force');\n createForceButton.position(400, height + 280);\n createForceButton.mousePressed(() => applyForce(magnitudeInput, angleInput, framesInput, perpendicularClockwiseCheckbox, perpendicularAnticlockwiseCheckbox));\n createForceButton.style('background-color', 'red');\n createForceButton.style('color', 'white');\n createForceButton.style('font-size', '16px');\n createForceButton.style('font-weight', 'bold');\n createForceButton.style('width', '150px');\n createForceButton.style('height', '40px');\n\n initializeClouds();\n}\n\n// The draw() function is a little different this time.\n// We include *rotation* with ball-following.\nfunction draw() {\n background(220, 50, 90);\n\n // push() tells the computer to save the current drawing settings and begin a new drawing within that.\n push();\n\n // We make variables for *translation* — sliding the whole canvas around, like the camera in a videogame.\n let translateX;\n let translateY;\n\n // Default translation:\n translateX = width / 2;\n translateY = groundHeight;\n // Translating by these amounts will shift the origin to the point we're calling (0,0), where the x- and y-axes meet.\n\n if (centerBallCheckbox.checked() && balls.length > 0) { // If the \"Center on Ball\" box is checked...\n let ball0 = balls[0]; // Get Ball #0\n\n // Calculate the angle of the velocity vector with atan2().\n\n\n // The order of what we're about to do is very important.\n // Perform the operations in the wrong order and you'll get weird results.\n // (Why?)\n\n // First, translate so that (0, 0), where the axes meet, is centered.\n\n\n // Then *rotate* the whole canvas by the opposite amount of the ball's angle of velocity.\n // This keeps the smiley face right side up!\n\n\n\n // Finally, another translation to center the ball instead of (0, 0).\n\n\n // Those three options, *in that order*, put the ball at the center, always facing right-side-up.\n } else {\n // However, if we aren't following the ball, just do the basic translation.\n translate(translateX, translateY);\n }\n\n // The rest of the draw() function just calls other functions that support the simulation.\n drawClouds();\n drawGrid();\n drawWallBounceIndicator();\n\n // Turn on our physics when the simulation is NOT paused.\n if (!isPaused) {\n for (let ball of balls) {\n ball.move();\n ball.checkWallCollision();\n ball.updateStats();\n }\n //checkBallCollisions(); // Uncomment to have the balls bounce off each other. Be warned: this takes fancy math!\n }\n\n // Show all the balls in the array (can be just one!),\n for (let ball of balls) {\n ball.display();\n }\n\n\n mouseHeld();\n pop(); // Ends push().\n}\n\n// ************************************************************************************\n\n\nclass Ball {\n // Nothing new here.\n constructor(x, y, r, hue, id) {\n this.x = x;\n this.y = y;\n // track of velocity and acceleration in x and y directions.\n this.vx = 0;\n this.vy = 0;\n this.ax = 0;\n this.ay = 0\n this.frictionVector = null;\n // *Radius* tells us how big a ball is: what the distance is from its center to its edge.\n this.radius = r;\n // Once again, set mass proportional to radius.\n this.mass = this.radius;\n this.hue = hue;\n this.color = color(this.hue, 100, 50);\n this.id = id;\n currentHue += 35;\n currentHue = currentHue % 360;\n }\n\n // We'll use the same movement code as before: pure x- and y-directions.\n // The triangle math will let us wield these for smooth diagonal and rotational motion.\n // But that math will happen in our force functions: the Ball class remains the same.\n move() {\n // Velocity gets changed by the amount of acceleration.\n this.vx += this.ax;\n this.vy += this.ay;\n // These lines cap the velocity at 40 so the ball doesn't move too fast (optional).\n //this.vx = constrain(this.vx, -40, 40);\n //this.vy = constrain(this.vy, -40, 40);\n // Position gets changed by the amount of velocity.\n this.x += this.vx;\n // The y-direction is negative because we want up to be positive, but JS calculates y-coordinates with down as positive.\n this.y -= this.vy;\n }\n\n\n // Updated display method to draw a smiley face on the ball with orientation based on velocity.\n display() {\n /*\n An additional word here. atan2() is a superstar function that gives you an angle based on two legs of a right triangle.\n It is a sort of inverted cousin of sine and cosine. Look up \"arctangent\" or \"inverse tangent\" for more details.\n The main point is that while sine and cosine (and tangent) take an angle and return a ratio (a percentage),\n arctangent takes a ratio and returns an angle. Other direction.\n */\n let angle = atan2(-this.vy, this.vx);\n // In the language of triangles, this function gives us an angle in a right triangle whose legs are this.vy and this.vx.\n\n // Save the current drawing settings and start a new drawing context\n push();\n // Move to the ball's position\n translate(this.x, this.y);\n // Rotate the canvas to match the velocity direction\n rotate(angle);\n\n // Draw the ball\n fill(this.color);\n ellipse(0, 0, this.radius * 2, this.radius * 2);\n\n // We are going to add a smiley face to *orient* the ball.\n fill(0);\n // Left eye\n ellipse(-this.radius / 3, -this.radius / 3, this.radius / 6, this.radius / 6);\n // Right eye\n ellipse(this.radius / 3, -this.radius / 3, this.radius / 6, this.radius / 6);\n // Mouth\n noFill();\n stroke(0);\n strokeWeight(2);\n arc(0, this.radius / 4, this.radius, this.radius / 2, 0, PI);\n\n\n // Restore the previous drawing settings\n pop();\n\n // Draw velocity and acceleration vectors as before\n let velocity = createVector(this.vx, -this.vy).mult(4);\n drawArrow(createVector(this.x, this.y), velocity, '#21f00a');\n\n let acceleration = createVector(this.ax, -this.ay).mult(50);\n drawArrow(createVector(this.x, this.y), acceleration, '#035afc');\n\n if (this.frictionVector) {\n drawArrow(createVector(this.x, this.y), this.frictionVector, '#FFA500');\n }\n\n // let textColor = color(255)\n // fill(textColor);\n // textAlign(CENTER, CENTER);\n // textSize(12);\n // text(`${this.id}`, this.x, this.y);\n }\n\n // ********************************************************************************************\n // Skip ahead/search for applyForce(). \n // ********************************************************************************************\n\n // This method computes bouncing off walls.\n checkWallCollision() {\n let collided = false;\n\n // If the checkbox that enables wall collision is checked...\n if (wallBounceCheckbox.checked()) {\n //...see if the ball is offscreen...\n if (this.x + this.radius < -width / 2 || this.x - this.radius > width / 2 ||\n this.y + this.radius < -yOffset || this.y - this.radius > height - yOffset) {\n //...and if so, teleport it back to the origin.\n this.x = 0;\n this.y = 0;\n return;\n }\n\n // We check for collision with left wall by checking coordinates.\n if (this.x - this.radius <= -width / 2) {\n // Nudge the ball inside the screen bounds\n this.x = -width / 2 + this.radius;\n // And *multiply* the velocity. The -1 reverses the direction (bounce); the optional 0.9 causes the Ball to slow down a little bit.\n this.vx *= -1 * 0.9;\n collided = true;\n\n // Then do the same thing for the right wall.\n } else if (this.x + this.radius >= width / 2) {\n this.x = width / 2 - this.radius;\n this.vx *= -1 * 0.9;\n collided = true;\n }\n\n // For the top wall.\n if (this.y - this.radius <= -yOffset) {\n this.y = -yOffset + this.radius;\n this.vy *= -1 * 0.9;\n collided = true;\n\n // For the bottom wall (ceiling).\n } else if (this.y + this.radius >= height - yOffset) {\n this.y = height - yOffset - this.radius;\n this.vy *= -1 * 0.9;\n collided = true;\n }\n }\n }\n\n // This method returns true or false to indicate whether a Ball is colliding with another Ball.\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.radius + other.radius;\n }\n\n // This complex method computes the trajectory of a Ball after a collision with another.\n // You can skip the nitty-gritty details, but if you're curious, dive in!\n resolveCollision(other) {\n let dx = other.x - this.x;\n let dy = other.y - this.y;\n // Pythagoras' Theorem to find the distance between the Balls' center\n let distance = sqrt(dx * dx + dy * dy);\n\n // If the Balls are overlapping, treat the distance as if there were touching edge-to-edge. This improves our calculations.\n if (distance == 0) {\n distance = this.radius + other.radius - 1;\n }\n\n /* \n We are going to build two important vectors.\n \n The *normal vector* calculates the direction of contact with the other Ball.\n Imagine a line connecting the centers of the Balls.\n \n The *tangent vector* calculates the line slicing through the point of contact.\n Imagine a thin strip sandwiched between the colliding Balls.\n */\n\n // Normal vector, split into x and y components. We divide by distance to *normalize* the vector, so that it always has a length of 1 unit and just points in the right direction.\n let nx = dx / distance;\n let ny = dy / distance;\n\n // Tangent vector, split into x and y components. It is *perpendicular* to the normal vector.\n let tx = -ny;\n let ty = nx;\n\n // We calculate the *dot product* of the Balls' velocities with the tangent vector. (Look up 'dot product' — it measures how aligned two vectors are.)\n let dpTan1 = this.vx * tx + this.vy * ty;\n let dpTan2 = other.vx * tx + other.vy * ty;\n\n // Dot product of velocities with normal vector.\n let dpNorm1 = this.vx * nx + this.vy * ny;\n let dpNorm2 = other.vx * nx + other.vy * ny;\n\n // Here we calculate the momentum (mass * velocity) of each ball ...\n // ... using *conservation of momentum* from physics.\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 // Then we use the momentum to update the Balls' velocities and point them in the right direction.\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 // If the Balls overlap, we nudge them so they don't.\n let overlap = (this.radius + other.radius - distance) / 2;\n this.x -= overlap * nx;\n this.y -= overlap * ny;\n other.x += overlap * nx;\n other.y += overlap * ny;\n }\n\n // This method makes sure the stats panel at the bottom shows the right information.\n // The instances of \"* 0.1\" transform the coordinates from pixels to grid squares. Each grid square is 10x10 pixels, so 1 pixel is 0.1 of a grid square.\n // The negative Ys are again a correction to make up the positive direction, as in standard physics.\n updateStats() {\n if (selectedBall && this.id === selectedBall.id) {\n // This is HTML...\n statsDiv.html(`\n Ball #${this.id} \n Mass: ${this.mass.toFixed(2)}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

X:	Position: ${(this.x * 0.1).toFixed(1)}	←	Velocity: ${(Math.abs(this.vx * 0.1) < 0.01 ? \"0.00\" : (this.vx * 0.1).toFixed(1))}	←	Acceleration: ${(this.ax * 0.1).toFixed(2)}
Y:	Position: ${(-this.y * 0.1).toFixed(1)}	←	Velocity: ${(Math.abs(this.vy * 0.1) < 0.01 ? \"0.00\" : (this.vy * 0.1).toFixed(1))}	←	Acceleration: ${(this.ay * 0.1).toFixed(2)}

\n `);\n }\n }\n\n // This method transforms the plain numbers into input fields.\n makeStatsEditable() {\n statsDiv.html(`\n Ball #${this.id}\n Mass: ${this.mass.toFixed(2)}\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

X:	Position:	←	Velocity:	←	Acceleration:
Y:	Position:	←	Velocity:	←	Acceleration:

\n `);\n\n // Event listeners update Ball properties in real time\n select('#posX').input(() => this.x = parseFloat(select('#posX').value()) / 0.1);\n select('#posY').input(() => this.y = -parseFloat(select('#posY').value()) / 0.1);\n select('#velX').input(() => this.vx = parseFloat(select('#velX').value()) / 0.1);\n select('#velY').input(() => this.vy = parseFloat(select('#velY').value()) / 0.1);\n select('#accX').input(() => this.ax = parseFloat(select('#accX').value()) / 0.1);\n select('#accY').input(() => this.ay = parseFloat(select('#accY').value()) / 0.1);\n }\n\n // This method switches the input fields back to plain numbers.\n makeStatsReadOnly() {\n\n if (select('#posX') && select('#posY') && select('#velX') && select('#velY') && select('#accX') && select('#accY')) {\n // Get the Ball properties from input fields\n this.x = parseFloat(select('#posX').value()) / 0.1;\n this.y = -parseFloat(select('#posY').value()) / 0.1;\n this.vx = parseFloat(select('#velX').value()) / 0.1;\n this.vy = parseFloat(select('#velY').value()) / 0.1;\n this.ax = parseFloat(select('#accX').value()) / 0.1;\n this.ay = parseFloat(select('#accY').value()) / 0.1;\n }\n\n this.updateStats();\n }\n\n}\n//////////////////////////////////////////////////////////////////\n\n// ***************************************************************\n\n/*\n This is our big change today: a new applyForce function.\n We are providing different inputs for force: magnitude and angle instead of two components,\n and we want to be able to lock a force to a direction *perpendicular* to velocity.\n (Perpendicular means \"at a right angle.\") (You will know why we are doing this once you see the results.)\n\n The output is different too: let's just have one button that applies the force to the ball without having to equip it to your mouse.\n This is especially fine when he just have the one ball.\n\n Besides changing the input calculations, we are also upgrading the function to update the angle continuously.\n If a ball is turning, you need to turn the force that's working on it to maintain its angle relative to the ball.\n So we have to program that the right way.\n\n Sines and Cosines to the rescue!\n*/\n\n// The parameters we give have changed a bit.\nfunction applyForce(magnitudeInput, angleInput, framesInput, perpendicularClockwiseCheckbox, perpendicularAnticlockwiseCheckbox) {\n // Grab the numbers from the input fields.\n let magnitude = parseFloat(magnitudeInput.value());\n let angle = parseFloat(angleInput.value());\n let frames = parseInt(framesInput.value());\n\n // The check \"!isNan\" is short for \"is NOT Not a Number\"\n // In other words, when that expression is true, we are sure there's an actual number in the input fields, and we can proceed.\n if (!isNaN(magnitude) && !isNaN(frames)) {\n if (selectedBall) {\n /* \n First up, let's set up the perpendicular forces, which turn on through checkboxes.\n The goal is to have the force constantly adjust its direction so that it's at a right angle to the directino of motion.\n That means calculating a force perpendicular to the *velocity vector*.\n */\n if (perpendicularAnticlockwiseCheckbox.checked() || perpendicularClockwiseCheckbox.checked()) {\n // We use setInterval() like we did last week to handle timing.\n let interval = setInterval(() => {\n if (frames > 0) {\n // Get the angle of the velocity using atan2().\n let velocityAngle = atan2(selectedBall.vy, selectedBall.vx);\n // Calculate the two angles perpendicular to that angle (clockwise vs. anticlockwise rotation).\n // There's a fancy way we can write this but a couple \"ifs\" would be fine. Be careful about radians versus degrees though... let me help you with that.\n\n // That will be the angle of our force.\n // Now decompose that angle into x- and y-components...\n // ...using cosine...\n\n // ...and sine.\n\n // Finish the job with a = F / m. (Newton's Second Law)\n // Calculate acceleration in x- and y-directions.\n\n\n // That's it! Now decrement the frame counter and let the process repeat.\n frames--;\n } else {\n // Once frame counter is done, turn off acceleration (this will clear any prior acceleration...that's OK for now.)\n clearInterval(interval);\n selectedBall.ax = 0;\n selectedBall.ay = 0;\n }\n }, 1000 / 60);\n\n // Now, the version if neither box is checked: you just want to apply the force in the right direction, without continuous updating. \n } else if (!isNaN(angle)) {\n // We convert degrees to radians (which the sine and cosine functions prefer.)\n let angleInRadians = radians(angle);\n // Now, use those trigonometry functions from last class!\n // Cosine tells you what percentage of a vector is pure X.\n\n // And Sine tells you what percentage is pure Y.\n\n\n let interval = setInterval(() => {\n if (frames > 0) {\n // F = m * a. Or, a = F / m.\n // Our ball expects x- and y-acceleration, so we use what we just calculated.\n\n\n frames--;\n // All this is the same.\n } else {\n clearInterval(interval);\n selectedBall.ax = 0;\n selectedBall.ay = 0;\n }\n }, 1000 / 60);\n }\n }\n }\n}\n\n/*\n This approach is an upgrade for a number of reasons.\n For one, now we can apply a force in any direction and give it just *one* number representing its strength.\n That's how we think of an individual force.\n We still split into x- and y-components to speak the language of pixels, but now that happens \"under the hood.\"\n\n The perpendicular checkboxes open the door to the astrophysics we need for our ultimate goal of planetary orbits.\n When a planet flies by the sun, gravity pulls on it continuously, at a slightly different angle each moment as the planet's position changes.\n We need a way to update the direction of a force vector every frame in order to simulate this.\n Now we have a way!\n\n Exercise: Make the ball fly in a circle.\n*/\n\n\n///////////////////////////////////////////////////////////////////////////////////////////\n// Everything after this supports the simulation but is not essential to your understanding. \n// Read it on your own time if you're a coder.\n\n/////////// #HELPER FUNCTIONS ///////////\n\nfunction checkForceInputs() {\n let magnitude = select('input[placeholder=\"Magnitude:\"]').value();\n let angle = select('input[placeholder=\"Angle:\"]').value();\n let frames = framesInput.value();\n\n if (magnitude !== '' && angle !== '' && frames !== '' && !isNaN(magnitude) && !isNaN(angle) && !isNaN(frames)) {\n createForceButton.removeAttribute('disabled');\n } else {\n createForceButton.attribute('disabled', '');\n }\n}\n\n// This function checks collision between every *pair* of Balls. (Think about why it's an outside function, not a method of the Ball class.)\nfunction checkBallCollisions() {\n for (let i = 0; i < balls.length; i++) {\n for (let j = i + 1; j < balls.length; j++) {\n let ball1 = balls[i];\n let ball2 = balls[j];\n if (ball1.checkCollision(ball2)) {\n // If two colliding Balls are detected, initiate their collision.\n ball1.resolveCollision(ball2);\n }\n }\n }\n}\n\nfunction drawWallBounceIndicator() {\n if (wallBounceCheckbox.checked()) {\n stroke('rgba(0, 0, 139, 0.2)'); // Dark blue color with 50% transparency\n strokeWeight(10); // Set the thickness of the line\n\n // Align the rectangle with the nearest gridline (10x10 grid)\n let gridSize = 10;\n let halfWidth = Math.floor(width / 2 / gridSize) * gridSize;\n let halfHeight = Math.floor(height / gridSize) * gridSize;\n\n noFill();\n rect(-halfWidth - 5, Math.floor(-yOffset / gridSize) * gridSize + 5, (Math.floor(width / gridSize) * gridSize) + (1 * gridSize), (Math.floor(halfHeight / gridSize) * gridSize + gridSize)); // Rectangle indicating the walls\n }\n noStroke()\n}\n\n// This function runs the Play/Pause button.\nfunction togglePause() {\n // toggle the state\n isPaused = !isPaused;\n playPauseButton.html(isPaused ? 'Play' : 'Pause');\n\n if (isPaused) { // If game is paused....\n playPauseButton.addClass('play'); // (This is for CSS to make button look good)\n // ...and if a Ball is selected (it should be) .....\n if (selectedBall) {\n // ...show the input fields.\n selectedBall.makeStatsEditable();\n }\n } else { // If game is NOT paused...\n playPauseButton.removeClass('play');\n if (selectedBall) {\n //...hide the input fields.\n selectedBall.makeStatsReadOnly();\n }\n }\n}\n\n// Draw a grid of 10x10 pixel squares\nfunction drawGrid() {\n strokeWeight(1);\n let gridColor = color(200, 0, 80);\n let axisColor = color(0, 0, 0);\n let gridSize = 10;\n\n // Calculate the total grid size, extending offscreen\n let gridWidth = Math.floor(20 * width / gridSize) * gridSize;\n let gridHeight = Math.floor(20 * height / gridSize) * gridSize;\n\n // Align the grid lines with the origin (width/2, groundHeight)\n let originX = Math.floor(0.5 * width / gridSize) * gridSize;\n let originY = Math.floor(groundHeight / gridSize) * gridSize;\n\n\n // Vertical lines\n for (let x = -gridWidth; x <= gridWidth; x += gridSize) {\n stroke(gridColor);\n line(x - (originX % gridSize), -gridHeight, x - (originX % gridSize), gridHeight);\n }\n\n // Horizontal lines\n for (let y = -gridHeight; y <= gridHeight; y += gridSize) {\n stroke(gridColor);\n line(-gridWidth, y - (originY % gridSize), gridWidth, y - (originY % gridSize));\n }\n\n // Draw the x-axis at groundHeight\n stroke(axisColor);\n strokeWeight(2);\n line(-gridWidth, 0, gridWidth, 0);\n\n // Draw the y-axis at width / 2\n stroke(axisColor);\n strokeWeight(2);\n line(0, -gridHeight, 0, gridHeight);\n\n noStroke();\n}\n\n\n// The clouds are a little fancier this time.\n/*\n We want lots of clouds so that we can keep our eyes oriented while the ball moves.\n A rigid grid of clouds makes sure there are clouds everywhere in the sky, but that would look bad.\n So we add a random offset to each — they clouds are *almost* in a grid. \n*/\nfunction initializeClouds() {\n let gridSize = 10; // Size of each grid square\n let cloudSpacing = 30 * gridSize; // Space clouds every 30 grid squares\n\n // Calculate the total grid size, extending offscreen\n let gridWidth = Math.floor(20 * width / gridSize) * gridSize;\n let gridHeight = Math.floor(20 * height / gridSize) * gridSize;\n\n clouds = []; // Clear any existing clouds\n\n // Populate the clouds array in a lattice pattern with a random offset\n for (let x = -gridWidth; x <= gridWidth; x += cloudSpacing) {\n for (let y = -gridHeight; y <= 0; y += cloudSpacing) {\n let cloud = {\n x: x + random(-100, 100),\n y: y + random(-100, 100),\n cloudWidth: random(50, 150),\n cloudHeight: random(30, 80)\n };\n // Put each new cloud on the list.\n clouds.push(cloud);\n }\n }\n}\n\n// The clouds themselves are not different.\nfunction drawClouds() {\n noStroke();\n fill(255); // White color for clouds\n\n // Translate the drawing context to ensure clouds are drawn correctly\n let translateX = width / 2;\n let translateY = groundHeight;\n\n for (let cloud of clouds) {\n // Adjust cloud position based on translation\n let x = cloud.x + translateX;\n let y = cloud.y + translateY;\n\n // Draw the cloud\n ellipse(x, y, cloud.cloudWidth, cloud.cloudHeight);\n }\n}\n\n// Draw an arrow — we use this for velocity and acceleration vectors.\nfunction drawArrow(base, vec, myColor) {\n if (vec.mag() < 0.01) return; // Do not draw if magnitude (length) is less than 0.001\n\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n // Prevent selecting a new Ball if already dragging one\n\n// A checkbox to enable/disable wall bouncing.\nfunction createWallBounceCheckbox() {\n wallBounceCheckbox = createCheckbox('Wall Bounce', false);\n wallBounceCheckbox.id('wallBounceCheckbox');\n wallBounceCheckbox.position(statsDiv.position().x, height + 100); // Position it below the statsDiv\n}\n\n// If you click a Ball, select it and display its stats.\nfunction mousePressed() {\n\n // Prevent selecting a new Ball if already dragging one\n if (isDragging) return;\n\n // Temporary variable to hold the new selected Ball\n let newSelectedBall = null;\n\n // Calculate translation offsets based on checkbox states\n let translateX = width / 2;\n let translateY = groundHeight;\n if (centerBallCheckbox.checked() && balls.length > 0) {\n let ball0 = balls[0];\n translateX -= ball0.x;\n translateY -= ball0.y;\n }\n\n // Check which Ball is clicked from the list\n for (let ball of balls) {\n let d = dist(mouseX - translateX, mouseY - translateY, ball.x, ball.y);\n\n // Only consider balls other than the currently checked ball\n if ((centerBallCheckbox.checked() && ball.id === 0)) {\n continue;\n }\n\n if (d < ball.radius) {\n newSelectedBall = ball;\n break;\n }\n }\n\n // If a new Ball is selected, update selectedBall and turn on isDragging\n if (newSelectedBall) {\n selectedBall = newSelectedBall;\n isDragging = true;\n // Don't want the ball to move while dragging: set velocity to 0.\n selectedBall.vx = 0;\n selectedBall.vy = 0;\n\n // Stats Panel handling\n if (isPaused) {\n selectedBall.makeStatsEditable();\n } else {\n selectedBall.makeStatsReadOnly();\n }\n }\n\n}\n\n// While holding a ball with the mouse...\nfunction mouseHeld() {\n if (isDragging && selectedBall) {\n // We record the previous Ball position so that we can calculate its velocity as you drag it.\n if (typeof selectedBall.prevX === 'undefined') {\n selectedBall.prevX = selectedBall.x;\n selectedBall.prevY = selectedBall.y;\n }\n\n // Calculate translation offsets based on checkbox states\n let translateX = width / 2;\n let translateY = groundHeight;\n if (centerBallCheckbox.checked() && balls.length > 0) {\n let ball0 = balls[0];\n translateX -= ball0.x;\n translateY -= ball0.y;\n }\n\n // Calculate target positions differently if \"Center on Ball #0\" or \"Center on Ball #1\" is checked\n let targetX = mouseX - translateX;\n let targetY = mouseY - translateY;\n\n // This chunk smooths out the movement of the ball so it doesn't look jittery while you drag.\n let smoothingFactor = 0.5; // Adjust this value for more or less smoothing\n let newX = selectedBall.x + (targetX - selectedBall.x) * smoothingFactor;\n let newY = selectedBall.y + (targetY - selectedBall.y) * smoothingFactor;\n\n // Calculate velocity of dragged ball: how much it moves divided by time passed.\n selectedBall.vx = (newX - selectedBall.prevX) * (frameRate() / 60);\n selectedBall.vy = -(newY - selectedBall.prevY) * (frameRate() / 60);\n\n // Update previous position\n selectedBall.prevX = newX;\n selectedBall.prevY = newY;\n\n // Set the Ball's position to follow the Mouse\n selectedBall.x = newX;\n selectedBall.y = newY;\n\n // Update stats to reflect current position\n selectedBall.updateStats();\n }\n}\n\n// When you release a Ball....\nfunction mouseReleased() {\n if (isDragging && selectedBall) {\n isDragging = false;\n\n // Avoid releasing Ball #0 when \"Center on Ball #0\" is checked\n if (centerBallCheckbox.checked() && selectedBall.id === 0) return; // Corrected variable name\n\n // Make sure velocity doesn't exceed 40 in either direction.\n selectedBall.vx = constrain(selectedBall.vx / (frameRate() / 60), -40, 40);\n selectedBall.vy = constrain(selectedBall.vy / (frameRate() / 60), -40, 40);\n\n // Clean up temporary properties.\n delete selectedBall.prevX;\n delete selectedBall.prevY;\n\n // If simulation is paused, make sure to restore input fields when done dragging.\n if (isPaused) {\n selectedBall.makeStatsEditable();\n }\n }\n}\n\n//////////////////////////////////////////////////////////////////////////////\n\n/*\n Follow-up/Discussion Questions:\n 1. If you change directions without changing speed, does that count as acceleration or not?\n \n 2. Does rotation without changing speed require force?\n What force makes your car move in a circle while turning?\n \n 3. The recipe for circular motion is *acceleration at a right angle to velocity*.\n What trajectory would the ball take if the force vector is pointing at a 45º angle to the velocity vector?\n \n 4. How do satellites orbit the Earth without crashing? What about the Moon? Or the Earth, orbiting the Sun?\n Try to give a physics explanation for why we have not yet spiraled into the sun.\n And why haven't we spiraled *away* from the Sun into outer space either?\n \n 5. We also Sine and Cosine to program *oscillation*. Look that up or ask Jippity — maybe try to program a *wave*.\n Sine and Cosine are as much about *circles* as they area about triangles.\n How? What do I mean?\n*/\n","style.css":"","index.html":"\n\n\n\n \n \n StSS 2.2\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"chyljhhgmahdp6tzzm2z","name":"ss","deleted":false,"id":10646,"created_at":"2024-06-20T17:01:21.395495Z","project_id":2004,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}