Simulate the Solar System 1.2

{"name":"St SS 1 2 [Class]","description":"Embark on a funky sprite adventure where you can control colorful characters and explore a whimsical world filled with surprises and challenges.","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-06-09 at 9.35.24 AM.png","view_count":17,"fork_count":4,"expires_at":null,"created_at":"2024-06-13T16:57:33.920186Z","updated_at":"2024-06-13T16:57:33.920189Z","user_id":2,"status":"PUBLIC","parent_id":1772,"id":1866,"user":{"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// StSS Week 1 Class 2\n\n/*\n Welcome back! Let's summarize our findings from last time in one important sentence:\n ** Velocity changes position over time and acceleration changes velocity over time. **\n\n Understanding velocity and acceleration gave us a way to program smooth, natural motion.\n\n The mathematical foundation that enabled this thinking was the idea of x- and y-coordinates: numbers to describe where something is.\n\n It's up to us to choose how our coordinates work. On a computer, we can work in pixels or in gridlines that we define. For time, we use frames.\n In the real world we use meters and seconds, but the idea is no different. We just need rulers and clocks so that we can take scientific measurements.\n\n Today, we add some new words to our physics vocabulary.\n The most important of these are *force* and *mass*.\n\n In loose, informal terms, a force is a push or pull. But what does that mean for physics? How can we do math with that? How can we program it?\n\n Similarly, mass means, uh, \"stuff\"... not so precise; not enough for science. I am more massive than a mouse and a mouse is more massive than a plankton.\n We will make this idea work with our math and our code.\n\n Long story short, our hero Isaac Newton showed that force causes mass to *accelerate*.\n Likewise, mass *resists* force so that more mass means less acceleration, given the same force.\n As a mathematical equation,\n\n F = m * a.\n \n That's pretty simple — just multiplication! And yet that rule is so important that it is called \"Newton's Second Law of Motion.\"\n (Newton came up with three laws of motion that all work together — we will discuss those later. The second is the most important.)\n\n Our goal for today will be to program forces that behave like the real world, pushing masses around.\n\n This will set us up for later in the course when we program gravity in space. Spoiler alert: gravity is a force!\n\n We will also have an opportunity to discuss an essential idea in physics, one that predates even Newton: the *Principle of Relativity*.\n\n Let's push on!\n*/\n\n// First, a little setup code. I'll skip through this, but read the comments later if you want to understand where it's coming from.\n// (Pick back up at the next long line of *****s.)\n\n///////// #VARIABLES //////////\n// We are going to create multiple balls today.\n// To handle this, we will store all the balls in an array. (An array is basically a list.) [] means \"array.\"\nlet balls = [];\nlet clouds = []; // Same for our cheesy 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\nlet activeVFX = []\n// HTML-related stuff for the Stats Panel.\nlet statsDiv;\nlet centerBall0Checkbox;\nlet centerBall1Checkbox;\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// Will be used when we set up our coordinate system.\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, 150, 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 that 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, height + 10); // Position it to the right of the statsDiv\n playPauseButton.mousePressed(togglePause);\n\n //Checkbox to toggle wall bouncing\n createWallBounceCheckbox();\n\n // Create a checkbox to center on Ball #0\n centerBallCheckbox = createCheckbox('Center on Ball #0', 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 // Create a checkbox to center on Ball #1\n centerBall1Checkbox = createCheckbox('Center on Ball #1', false);\n centerBall1Checkbox.id('centerBall1Checkbox'); // Assign an ID for CSS styling\n centerBall1Checkbox.position(statsDiv.position().x, height + 170); // Position it below the centerBallCheckbox\n\n // Ensure only one checkbox can be checked at a time\n centerBallCheckbox.changed(() => {\n if (centerBallCheckbox.checked()) {\n centerBall1Checkbox.checked(false);\n }\n });\n centerBall1Checkbox.changed(() => {\n if (centerBall1Checkbox.checked()) {\n centerBallCheckbox.checked(false);\n }\n });\n\n // This is for the Force Panel\n let forceHeader = createP('Force');\n forceHeader.style('font-weight', 'bold');\n forceHeader.style('text-align', 'center');\n forceHeader.position(400, height + 80);\n forceHeader.style('width', '100px');\n\n forceXInput = createInput('0', 'number');\n forceXInput.attribute('placeholder', 'Force X');\n forceXInput.position(400, height + 120);\n forceXInput.input(() => checkForceInputs());\n\n forceYInput = createInput('0', 'number');\n forceYInput.attribute('placeholder', 'Force Y');\n forceYInput.position(400, height + 150);\n forceYInput.input(() => checkForceInputs());\n\n framesInput = createInput('0', 'number');\n framesInput.attribute('placeholder', 'Frames');\n framesInput.position(400, height + 180);\n framesInput.input(() => checkForceInputs());\n\n createForceButton = createButton('Create Force');\n createForceButton.id('createForceButton');\n createForceButton.position(400, height + 210);\n createForceButton.mousePressed(equipForce);\n\n createP('X:').position(370, height + 110);\n createP('Y:').position(370, height + 140);\n createP('Frames:').position(335, height + 170);\n\n // Enable button by default as fields contain valid zeros\n createForceButton.removeAttribute('disabled');\n\n // Set random positions for some clouds.\n initializeClouds();\n}\n\n// ********************************************************************************\n// 1.2.1 — The Principle of Relativity\n/*\n In our simulations, we decide where to start counting our coordinates. \n It can be anywhere — the corner of the screen, the center, anywhere — but we have to call *somewhere* the origin.\n\n But the universe has no origin point, no center! Where would it even be? Ohio?\n\n You are allowed to start counting coordinates anywhere, which means you can measure motion from anywhere.\n All motion is *relative* and depends on your *frame of reference*.\n\n You feel like you are sitting still, but relative to the Sun, you are flying around in a big circle.\n When you are in a car on the highway, the other cars going the same speed as you look almost stationary, but the scenery whizzes past you \"backwards.\"\n If you walk forward on a moving train, an outside observer will see you as moving *extra* fast.\n\n This idea, that all motion is relative, is called the *Principle of Relativity*.\n It connects the work of Galileo in the 1500s to Einstein in the 1900s, and it remains important for us as we program motion.\n\n Let's get a taste by programming different perspectives in our draw() function.\n*/\n\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 We want three different perspectives:\n - Center the canvas at the origin point (0,0)\n - Center the canvas on Ball #0\n - Center the canvas on Ball #1\n \n In each case, the center point we choose *will not move*. Everything else will move *relative to that point*.\n\n We will set the numbers translateX and translateY then use the translate() function below to slide the canvas those amounts.\n */\n\n // Here's the first option:\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 Ball #0 box is checked...\n let ball0 = balls[0]; // ...get that Ball...\n // ... and shift the canvas so that that Ball is always smack-dab in the middle.\n translateX -= ball0.x;\n translateY -= ball0.y;\n } else if (centerBall1Checkbox.checked() && balls.length > 1) { // Otherwise, if Ball #1 is checked...\n // ...do the same thing but with that Ball instead.\n let ball1 = balls[1];\n translateX -= ball1.x;\n translateY -= ball1.y;\n }\n \n\n // Perform the actual translation (shift the canvas).\n translate(translateX, translateY);\n drawActiveVFX()\n \n /*\n Play around with the simulation. Set up some motion and shift between the three perspectives.\n What do you see?\n\n Discussion questions:\n - If the two balls move with the same velocity and you center on one, how does the other one look?\n - Describe the difference between a frame of reference that moves with no acceleration versus one that does accelerate.\n - Why did I choose to draw those ugly clouds? (How can you tell — IRL or in the simulation — if you are moving or not?)\n */\n\n // ********************************************************************************\n\n // The rest of the draw() function just calls other functions that support the simulation. Feel free to skip.\n\n // Display stuff.\n drawClouds();\n drawTerrain(0);\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.checkTerrainCollision();\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.\n for (let ball of balls) {\n ball.display();\n }\n\n // We'll be drawing force vectors under the mouse sometimes.\n if (isForceEquipped && forceVector) {\n let adjustedForceVector = createVector(forceVector.x, -forceVector.y).mult(3); // Flip Y and scale for visibility\n drawArrow(createVector(mouseX - translateX, mouseY - translateY), adjustedForceVector, 'red');\n }\n\n mouseHeld();\n pop(); // Ends push().\n}\n\n// ************************************************************************************\n\n// 1.2.2 — Another Round of Movement Code\n\n// Pick back up here.\n// The Ball class is the main physics object in this simulation (as before).\n// Reminder: a *class* is like a recipe that tells the computer how to make anything that is a Ball.\n// We load the Ball class with attributes and methods so it can handle everything it needs to do: ...\n// ... motion, bouncing, and interfacing with the stats panel. Then we can make as many balls as we need.\nclass Ball {\n // You make a Ball by specifying x and y position, and now a radius size, hue (color), and an id number.\n constructor(x, y, r, hue, id) {\n this.x = x;\n this.y = y;\n // The Ball will also keep track of its own 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\n // We'll get into *friction* in a bit.\n this.frictionVector = null;\n\n // *Radius* tells us how big a ball is: what the distance is from its center to its edge.\n this.radius = r;\n /*\n We'll think of bigger balls as being more massive. This doesn't have to be true IRL...\n ... a marble has more mass than a balloon. But it will work for now.\n We will store mass as a number equal to the radius (size) of the ball.\n What will we do with mass? You'll see shortly.\n */\n this.mass = this.radius;\n this.hue = hue;\n // We supplement the hue with saturation and lightness.\n this.color = color(this.hue, 100, 50);\n this.id = id;\n\n // Increase currentHue when a Ball is created so that the next Ball created has a new color.\n currentHue += 35;\n currentHue = currentHue % 360;\n }\n\n // We'll use the same movement code as last time.\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 // Skip ahead/search for applyForce(). We are going to talk about a new important physics idea.\n // ********************************************************************************************\n\n // We draw the Ball as well as *vectors* (arrows) representing its velocity and acceleration.\n display() {\n fill(this.color);\n // ellipse means \"oval;\" we can use it for circles.\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\n\n // Build a single velocity vector out of the x and y components...\n let velocity = createVector(this.vx, -this.vy).mult(4); // mult() scales the size, just for visibility.\n // ...and draw it using drawArrow() (written below).\n drawArrow(createVector(this.x, this.y), velocity, '#21f00a');\n\n // Same for acceleration.\n let acceleration = createVector(this.ax, -this.ay).mult(50);\n drawArrow(createVector(this.x, this.y), acceleration, '#035afc');\n\n // Draw a friction vector if it exists.\n if (this.frictionVector) {\n drawArrow(createVector(this.x, this.y), this.frictionVector, '#FFA500');\n }\n\n // This draws the Ball's ID number.\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 // 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 handles bouncing off the green ground (not the edge of the screen)\n checkTerrainCollision() {\n let groundLevel = 0;\n\n // Is the ball hitting/below the ground?\n if (this.y + this.radius >= groundLevel) {\n // If it is, nudge it back up.\n this.y = groundLevel - this.radius;\n\n // If the vertical velocity is really small, just set it to 0 to prevent vibration or other weird effects.\n if (abs(this.vy) < 1) {\n this.vy = 0;\n } else { // But if the vertical velocity is not really small, bounce the ball and make it lose some energy.\n this.vy *= -1 * 0.9;\n }\n\n // We can also give the ground some friction (slowing the Ball down in the X direction as it rolls)\n let friction = 0.05; // Experiment with the size of this number.\n // Apply friction to the acceleration in the x direction. \n // Friction is a force, so it causes acceleration, always in the *opposite* direction of motion.\n if (this.vx > 0) {\n this.vx -= friction;\n this.frictionVector = createVector(-friction, 0).mult(500);\n } else if (this.vx < 0) {\n this.vx += friction;\n this.frictionVector = createVector(friction, 0).mult(500);\n } else {\n this.frictionVector = null;\n }\n\n if (abs(this.vx) < 0.1) {\n this.vx = 0;\n this.frictionVector = null;\n }\n } else {\n this.frictionVector = null;\n }\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// 1.2.3 — Force and Mass.\n/*\n Let's talk about *force*.\n\n Force is what causes matter to move. Move how?\n\n If motion is relative, force cannot just give objects velocity. There would be no way to make the concept consistent in math.\n\n From our everyday experience, thinking of a force as a push or pull, we require three features, each a number, of a force:\n - How strong is the force? \n - How long does the force apply?\n - How massive is the thing it is acting on?\n \n Why?\n \n Well, a stronger force should produce more motion; a weaker force, less.\n Applying a force for longer should produce more motion; shorter force, less.\n But applying a force to a big, heavy object should not move it as much; a small, light object should move more.\n\n When we say \"produce motion\" what we really mean is *accelerate*: change velocity.\n A force speeds up or slows down an object, changing its velocity over time.\n\n A mass is something that can be accelerated, but mass *resists* acceleration. (The word for this is *inertia*.)\n\n Here's how to put this mathematical puzzle together, as Isaac Newton did 337 years ago:\n\n An object's acceleration is determined by the force acting on it *divided by* its mass.\n\n As an equation,\n\n a = F / m.\n \n Think about how this works: more force means more acceleration, but more mass means *less* acceleration.\n If you can stomach a step of algebra, we can also write this equation as\n\n F = m * a.\n \n Take some time on your own to meditate on what this means and how simple yet profound the idea is.\n (It's weird to multiply a mass by an acceleration — indeed that means that units of force are units like kilograms times meters per second per second. Weird, but correct, and in fact, physicists give that unit a special name: the *Newton*. 1 N of force accelerates 1 kg 1 meter per second in one second.)\n\n Lastly, forces should have directions like velocity and acceleration; we will allow x-forces and y-forces.\n\n Don't worry about digesting every detail. Let's write some code so you can *feel* this at your fingertips.\n*/\n\n// A function to apply a force to a ball.\n// We need to specify the ball, the components of the force in both directions, and how long (how many frames) the force will apply.\nfunction applyForce(ball, forceX, forceY, frames) {\n\n // We'll save the ball's acceleration from before the force, to put back later.\n let originalAx = ball.ax;\n let originalAy = ball.ay;\n\n // Now, we use the equation above to calculate the acceleration in each direction. a = F / m.\n //\n //\n let ax = forceX / ball.mass\n let ay = forceY / ball.mass\n\n\n // Then, add those accelerations to the ball's current accelerations.\n //\n //\n // That's the core of the idea. But now let's code the timing piece of this.\n\n // setInterval is a way to set up a little timer in JavaScript.\n let interval = setInterval(() => {\n // We will make a frames counter that will count down to zero; before that, we apply the force.\n // If the frames counter is still above zero...\n if (frames > 0) {\n ball.ax += ax\n ball.ay += ay\n // ... add the acceleration to the ball...\n //\n //\n // ... and lower the frame counter.\n frames--;\n } else { // Once the timer reaches zero...\n // ...set the acceleration back to what it was before. (You can also set to 0 here to clear the old acceleration. Up to you.)\n //\n //\n ball.ax = originalAx\n ball.ay = originalAy\n clearInterval(interval);\n }\n ball.updateStats(); // And update the Stats Panel.\n }, 1000 / 60); // This makes the clock run at the right speed.\n\n // Select the ball getting the force so we can see its Stats.\n selectedBall = ball\n}\n/*\n This is subtle stuff. There are other ways to code force, too. \n But the cool thing is that it's not *that* much code, and the only math we're doing is multiplication and addition.\n This function will rely on a helper function equipForce() that will let us click on Balls to apply forces. See that below if you are curious.\n\n And please don't worry if you feel that this is hard to understand right away. Some of the greatest minds of all time fought for centuries to figure these ideas out!\n We stand on their shoulders but we need time to let the ideas soak in.\n Once your code is working, play around with the simulation for a while. Get a feel for it.\n \n Exercise: Create two copies of the same force and apply one copy to each ball. What's the difference in the results?\n\n Exercise: Pause the simulation and give a ball some acceleration, then create a force and apply it to that ball.\n Does the ball move the way you expect? What happens if the force is in the same direction as the acceleration? Opposite? A different angle?\n\n Exercise: Can you simulate the force of gravity? \n (There's two ways to do this.)\n\n Exercise: If a ball is moving upwards at a constant velocity and then a rightward force affects it, what will its path look like?\n\n Exercise: When a ball bounces off a wall or the ground (IRL), does a force apply to it? \n\n (Scroll to the very bottom for take-home questions.)\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 equipForce() {\n let forceX = parseFloat(forceXInput.value());\n let forceY = parseFloat(forceYInput.value());\n let frames = parseInt(framesInput.value());\n\n if (!isNaN(forceX) && !isNaN(forceY) && !isNaN(frames)) {\n forceVector = createVector(forceX, forceY);\n forceFrames = frames;\n isForceEquipped = true;\n }\n}\n\nfunction checkForceInputs() {\n let forceX = forceXInput.value();\n let forceY = forceYInput.value();\n let frames = framesInput.value();\n\n if (forceX !== '' && forceY !== '' && frames !== '' && !isNaN(forceX) && !isNaN(forceY) && !isNaN(frames)) {\n createForceButton.removeAttribute('disabled');\n } else {\n createForceButton.attribute('disabled', '');\n }\n}\n\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 // Add VFX at the point of collision\n let collisionX = (ball1.x + ball2.x) / 2;\n let collisionY = (ball1.y + ball2.y) / 2;\n drawCollisionVFX(collisionX, collisionY);\n }\n }\n }\n}\n\nfunction drawCollisionVFX(x, y) {\n activeVFX.push({ x, y, frames: 30 }); // Add a new VFX effect with a 30-frame lifespan\n}\n\nfunction drawActiveVFX() {\n for (let i = activeVFX.length - 1; i >= 0; i--) {\n let vfx = activeVFX[i];\n if (vfx.frames > 0) {\n push();\n noFill();\n stroke(`rgba(255, 0, 0, ${0.5 * (vfx.frames / 60)})`);\n strokeWeight(4);\n ellipse(vfx.x, vfx.y, 40 * (1 + (60 - vfx.frames) / 60), 40 * (1 + (60 - vfx.frames) / 60)); // Draw expanding circle\n strokeWeight(2);\n ellipse(vfx.x, vfx.y, 60 * (1 + (60 - vfx.frames) / 60), 60 * (1 + (60 - vfx.frames) / 60)); // Draw larger expanding circle\n pop();\n vfx.frames--; // Decrease the frame counter\n } else {\n activeVFX.splice(i, 1); // Remove the VFX effect once its frames reach zero\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(2 * width / gridSize) * gridSize;\n let gridHeight = Math.floor(2 * 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// Draw the ground (a big rectangle)\nfunction drawTerrain(yOffset) {\n let groundLevel = yOffset;\n fill(100, 50, 50);\n rect(-width, groundLevel, width * 2, height - groundLevel);\n}\n\nfunction initializeClouds() {\n for (let i = 0; i < 7; i++) {\n let x = random(-width / 2, width / 2); // Random x position within the grid\n let y = random(-yOffset, -yOffset / 2); // Random y position above the terrain but within the grid\n let cloudWidth = random(50, 150); // Random width for the cloud\n let cloudHeight = random(30, 80); // Random height for the cloud\n\n clouds.push({ x, y, cloudWidth, cloudHeight }); // Store cloud properties in array\n }\n}\n\n// Function to draw clouds\nfunction drawClouds() {\n noStroke();\n fill(255); // White color for clouds\n\n for (let cloud of clouds) {\n ellipse(cloud.x, cloud.y, cloud.cloudWidth, cloud.cloudHeight); // Draw the cloud\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\n// A checkbox to enable/disable wall bouncing.\nfunction createWallBounceCheckbox() {\n wallBounceCheckbox = createCheckbox('Wall Bounce', true);\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 if (isForceEquipped && forceVector) {\n for (let ball of balls) {\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 } else if (centerBall1Checkbox.checked() && balls.length > 1) {\n let ball1 = balls[1];\n translateX -= ball1.x;\n translateY -= ball1.y;\n }\n\n let d = dist(mouseX - translateX, mouseY - translateY, ball.x, ball.y);\n if (d < ball.radius) {\n applyForce(ball, forceVector.x, forceVector.y, forceFrames);\n isForceEquipped = false;\n forceVector = null;\n break;\n }\n }\n } else {\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 } else if (centerBall1Checkbox.checked() && balls.length > 1) {\n let ball1 = balls[1];\n translateX -= ball1.x;\n translateY -= ball1.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) || (centerBall1Checkbox.checked() && ball.id === 1)) {\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 } else if (centerBall1Checkbox.checked() && balls.length > 1) {\n let ball1 = balls[1];\n translateX -= ball1.x;\n translateY -= ball1.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}\nfunction keyPressed() {\n if (key === '1' && balls.length > 0 && forceVector) {\n applyForce(balls[0], forceVector.x, forceVector.y, forceFrames);\n } else if (key === '2' && balls.length > 1 && forceVector) {\n applyForce(balls[1], forceVector.x, forceVector.y, forceFrames);\n } else if (key === '0' && balls.length > 1 && forceVector) {\n applyForce(balls[0], forceVector.x, forceVector.y, forceFrames);\n applyForce(balls[1], forceVector.x, forceVector.y, forceFrames);\n } else if (key === '8' && balls.length > 0) {\n centerBallCheckbox.checked(!centerBallCheckbox.checked());\n if (centerBallCheckbox.checked()) {\n centerBall1Checkbox.checked(false);\n }\n } else if (key === '9' && balls.length > 1) {\n centerBall1Checkbox.checked(!centerBall1Checkbox.checked());\n if (centerBall1Checkbox.checked()) {\n centerBallCheckbox.checked(false);\n }\n } else if (key === '7') {\n const currentState = centerBallCheckbox.checked() || centerBall1Checkbox.checked();\n centerBallCheckbox.checked(!currentState);\n centerBall1Checkbox.checked(!currentState);\n } else if (key === '6') {\n wallBounceCheckbox.checked(!wallBounceCheckbox.checked());\n } else if (key === '3') {\n // Simulate gravity\n const gravity = -9.81; // Acceleration due to gravity in m/s^2 (scaled)\n forceXInput.value(0); // Force X = 0\n forceYInput.value(gravity); // Force Y = gravity\n framesInput.value(9999); // Apply for a large number of frames to simulate continuous gravity\n\n // Apply gravity to all balls\n for (let ball of balls) {\n ball.ay += gravity;\n }\n } else if (key === '4') {\n forceXInput.value(0); // Preset 2: forceX=0\n forceYInput.value(10); // Preset 2: forceY=10\n framesInput.value(120); // Preset 2: frames=120\n } else if (key === '5') {\n forceXInput.value(-10); // Preset 3: forceX=-10\n forceYInput.value(-10); // Preset 3: forceY=-10\n framesInput.value(30); // Preset 3: frames=30\n }\n}\n///////////////////////////////////////////////////////////////////////////////////////////////////////////////\n/*\n\nFollow-up questions:\n\n 1) When you're in the car and you move from a red light, what force is causing your body to accelerate?\n What about when you hit the brakes and slow down?\n\n 2) Force always causes acceleration, never velocity (directly). So why does a ball rolling on the ground slow down to a stop?\n What is different about a ball flying through the air? What about a ball in outer space?\n\n 3) F = m * a is Newton's *second* law of motion. The first is \"An object in motion remains in motion unless acted upon by an outside force.\"\n What does that mean? Can you explain it in simple English? Give an example?\n\n 4) The third law of motion is \"Every action has an equal an opposite reaction.\"\n In the language of force, that means any time an object applies a force to another object, th other object applies an equivalent force back, pushing the other way.\n How does that make sense? When a car accelerates, what is the action-reaction pair of equal and opposite forces?\n\n 5) On Earth, we measure mass using *weight*, which is defined as the strength of the force of gravity.\n How could you measure mass in space, where there is no gravity and objects are weightless?\n\n \n Email/message me! These are tricky and I'm not looking for one specific answer. \n If you're thinking, you're doing it right!\n*/","style.css":"#statsDiv {\n font-size: 16px;\n display: inline-block;\n vertical-align: top;\n width: auto;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n}\n\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');\n\n#playPauseButton {\n display: inline-block;\n width: 150px;\n height: 50px;\n font-size: 24px;\n text-align: center;\n line-height: 50px;\n margin-left: 20px;\n vertical-align: middle;\n /* Center vertically in the stats panel */\n cursor: pointer;\n border-radius: 25px;\n /* Rounded edges */\n color: white;\n /* White text */\n background-color: red;\n /* Default to red for 'Pause' */\n border: none;\n /* Remove default border */\n transition: background-color 0.3s;\n /* Smooth transition for color change */\n font-family: 'Poppins', serif;\n /* Set font to Georgia */\n justify-content: center;\n /* Center horizontally */\n align-items: center;\n /* Center vertically */\n}\n\n#playPauseButton.play {\n background-color: green;\n /* Green for 'Play' */\n}\n\n.stats-table {\n font-family: 'Poppins', sans-serif;\n border-spacing: 10px 5px;\n /* Adjust spacing between cells */\n white-space: nowrap;\n /* Prevent text from wrapping */\n}\n\n.stat-value {\n display: inline-block;\n min-width: 60px;\n /* Ensure the width matches the input fields */\n text-align: right;\n}\n\n\n\n*/ #wallBounceCheckbox {\n margin-top: 10px;\n /* Add some margin to separate from the stats panel */\n display: block;\n /* Ensure it appears on a new row */\n}\n\n#createForceButton {\n display: inline-block;\n width: 120px;\n height: 40px;\n font-size: 18px;\n text-align: center;\n line-height: 40px;\n margin-left: 20px;\n vertical-align: middle;\n cursor: pointer;\n border-radius: 20px;\n /* Rounded edges */\n color: white;\n /* White text */\n background-color: #ff69b4;\n /* More saturated reddish pink background */\n border: none;\n /* Remove default border */\n transition: background-color 0.3s;\n /* Smooth transition for color change */\n font-family: Georgia, serif;\n /* Set font to Georgia */\n justify-content: center;\n /* Center horizontally */\n align-items: center;\n /* Center vertically */\n}\n\n#createForceButton:disabled {\n background-color: #ffb6c1;\n /* Light pink background when disabled */\n cursor: not-allowed;\n /* Change cursor to indicate disabled state */\n}\ninput[type=\"number\"] {\n border-radius: 8px; /* Rounded edges */\n font-family: 'Poppins', sans-serif; /* Apply Poppins font */\n vertical-align: middle; /* Align vertically with text */\n}\ninput[type=\"checkbox\"] {\n width: 18px; /* Set the width of the checkbox */\n height: 18px; /* Set the height of the checkbox */\n border-radius: 4px; /* Rounded edges */\n vertical-align: middle; /* Align vertically with text */\n margin-right: 8px; /* Add some space to the right */\n cursor: pointer; /* Change cursor on hover */\n}","index.html":"\n\n\n\n \n \n Simulate the Solar System 1.2\n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"project_id":1866,"sender":"human","message":"make vfx look 300x better","deleted":0,"created_at":"2024-06-13T18:01:39.129148Z","output_tokens":null,"code_id":102273,"input_tokens":null,"id":51095},{"project_id":1866,"sender":"ai","message":"```javascript\nfunction drawCollisionVFX(x, y) {\n activeVFX.push({ x, y, frames: 60 }); // Add a new VFX effect with a 60-frame lifespan\n}\n```\n\n```javascript\nfunction drawActiveVFX() {\n for (let i = activeVFX.length - 1; i >= 0; i--) {\n let vfx = activeVFX[i];\n if (vfx.frames > 0) {\n push();\n noFill();\n stroke(`rgba(255, 0, 0, ${0.5 * (vfx.frames / 60)})`);\n strokeWeight(4);\n ellipse(vfx.x, vfx.y, 40 * (1 + (60 - vfx.frames) / 60), 40 * (1 + (60 - vfx.frames) / 60)); // Draw expanding circle\n strokeWeight(2);\n ellipse(vfx.x, vfx.y, 60 * (1 + (60 - vfx.frames) / 60), 60 * (1 + (60 - vfx.frames) / 60)); // Draw larger expanding circle\n pop();\n vfx.frames--; // Decrease the frame counter\n } else {\n activeVFX.splice(i, 1); // Remove the VFX effect once its frames reach zero\n }\n }\n}\n```\n\nThis code enhances the visual effects for collisions. Here’s how:\n\n1. **drawCollisionVFX Function**\n - Increased the lifespan of the VFX effect to 60 frames for a longer-lasting effect.\n\n2. **drawActiveVFX Function**\n - The VFX circles now expand over time by scaling their size based on the remaining frames.\n - The transparency of the stroke color decreases as the effect ages, giving a fading effect.\n - The VFX effect now lasts longer and appears smoother.","deleted":0,"created_at":"2024-06-13T18:01:39.135464Z","output_tokens":null,"code_id":102273,"input_tokens":null,"id":51096},{"project_id":1866,"sender":"human","message":"redo whole codebase to use matterjs","deleted":0,"created_at":"2024-06-13T18:08:33.101727Z","output_tokens":null,"code_id":102280,"input_tokens":null,"id":51097},{"project_id":1866,"sender":"ai","message":"Sure, I'll help you refactor the project to use Matter.js, a popular 2D physics engine for the web. This will help us simulate realistic physics more easily.\n\nLet's start by setting up Matter.js and refactoring our existing code to use it. We'll add Matter.js script to the HTML file, initialize the engine and world in the JavaScript file, and then update the rendering and physics calculations.\n\n### Updated HTML (index.html)\nWe'll add the Matter.js library to the HTML file.\n\n```html\n\n\n\n\n \n \n Simulate the Solar System 1.2\n \n\n\n\n \n \n \n\n\n\n```\n\n### Updated JavaScript (script.js)\nWe'll initialize Matter.js and refactor the physics and rendering to use it.\n\n```javascript\n// StSS Week 1 Class 2\n\n// Import Matter.js modules\nconst { Engine, Render, Runner, World, Bodies, Body, Events } = Matter;\n\n///////// #VARIABLES //////////\nlet engine;\nlet world;\nlet balls = [];\nlet ground;\nlet mouseConstraint;\n\nlet statsDiv;\nlet centerBallCheckbox;\nlet centerBall1Checkbox;\nlet playPauseButton;\nlet isPaused = false;\nlet isDragging = false;\nlet forceXInput, forceYInput, framesInput, createForceButton;\nlet isForceEquipped = false;\nlet forceVector = null;\nlet forceFrames = 0;\n\n//////// #MAIN FUNCTIONS/////////\nfunction setup() {\n // Create p5 canvas\n createCanvas(windowWidth, windowHeight);\n\n // Initialize Matter.js engine and world\n engine = Engine.create();\n world = engine.world;\n\n // Create renderer\n const render = Render.create({\n element: document.body,\n engine: engine,\n options: {\n width: windowWidth,\n height: windowHeight,\n wireframes: false,\n background: 'rgb(220, 50, 90)',\n },\n });\n Render.run(render);\n Runner.run(Runner.create(), engine);\n\n // Create ground\n ground = Bodies.rectangle(width / 2, height - 50, width, 100, { isStatic: true });\n World.add(world, ground);\n\n // Create initial balls\n balls.push(new Ball(300, 100, 50));\n balls.push(new Ball(500, 300, 35));\n\n // Create UI components\n createUIComponents();\n}\n\nfunction draw() {\n // p5.js draw loop\n background(220, 50, 90);\n\n // Draw balls\n for (let ball of balls) {\n ball.show();\n }\n}\n\nclass Ball {\n constructor(x, y, r) {\n this.body = Bodies.circle(x, y, r, { restitution: 0.8 });\n this.r = r;\n World.add(world, this.body);\n }\n\n show() {\n const pos = this.body.position;\n const angle = this.body.angle;\n push();\n translate(pos.x, pos.y);\n rotate(angle);\n ellipseMode(RADIUS);\n fill(127);\n stroke(200);\n strokeWeight(2);\n ellipse(0, 0, this.r);\n pop();\n }\n}\n\nfunction createUIComponents() {\n statsDiv = createDiv('');\n statsDiv.id('statsDiv');\n statsDiv.position(10, height + 10);\n\n playPauseButton = createButton('Pause');\n playPauseButton.id('playPauseButton');\n playPauseButton.position(statsDiv.position().x + 200, height + 10);\n playPauseButton.mousePressed(togglePause);\n\n createWallBounceCheckbox();\n\n centerBallCheckbox = createCheckbox('Center on Ball #0', false);\n centerBallCheckbox.id('centerBallCheckbox');\n centerBallCheckbox.position(statsDiv.position().x, height + 140);\n\n centerBall1Checkbox = createCheckbox('Center on Ball #1', false);\n centerBall1Checkbox.id('centerBall1Checkbox');\n centerBall1Checkbox.position(statsDiv.position().x, height + 170);\n\n centerBallCheckbox.changed(() => {\n if (centerBallCheckbox.checked()) {\n centerBall1Checkbox.checked(false);\n }\n });\n centerBall1Checkbox.changed(() => {\n if (centerBall1Checkbox.checked()) {\n centerBallCheckbox.checked(false);\n }\n });\n\n let forceHeader = createP('Force');\n forceHeader.style('font-weight', 'bold');\n forceHeader.style('text-align', 'center');\n forceHeader.position(400, height + 80);\n forceHeader.style('width', '100px');\n\n forceXInput = createInput('0', 'number');\n forceXInput.attribute('placeholder', 'Force X');\n forceXInput.position(400, height + 120);\n forceXInput.input(checkForceInputs);\n\n forceYInput = createInput('0', 'number');\n forceYInput.attribute('placeholder', 'Force Y');\n forceYInput.position(400, height + 150);\n forceYInput.input(checkForceInputs);\n\n framesInput = createInput('0', 'number');\n framesInput.attribute('placeholder', 'Frames');\n framesInput.position(400, height + 180);\n framesInput.input(checkForceInputs);\n\n createForceButton = createButton('Create Force');\n createForceButton.id('createForceButton');\n createForceButton.position(400, height + 210);\n createForceButton.mousePressed(equipForce);\n\n createP('X:').position(370, height + 110);\n createP('Y:').position(370, height + 140);\n createP('Frames:').position(335, height + 170);\n\n createForceButton.removeAttribute('disabled');\n}\n\nfunction applyForce(ball, forceX, forceY, frames) {\n Body.applyForce(ball.body, ball.body.position, {\n x: forceX / ball.body.mass,\n y: forceY / ball.body.mass,\n });\n}\n\nfunction togglePause() {\n isPaused = !isPaused;\n playPauseButton.html(isPaused ? 'Play' : 'Pause');\n if (isPaused) {\n noLoop();\n } else {\n loop();\n }\n}\n\nfunction createWallBounceCheckbox() {\n const wallBounceCheckbox = createCheckbox('Wall Bounce', true);\n wallBounceCheckbox.id('wallBounceCheckbox');\n wallBounceCheckbox.position(statsDiv.position().x, height + 100);\n}\n\nfunction checkForceInputs() {\n const forceX = forceXInput.value();\n const forceY = forceYInput.value();\n const frames = framesInput.value();\n if (forceX !== '' && forceY !== '' && frames !== '' && !isNaN(forceX) && !isNaN(forceY) && !isNaN(frames)) {\n createForceButton.removeAttribute('disabled');\n } else {\n createForceButton.attribute('disabled', '');\n }\n}\n\nfunction equipForce() {\n const forceX = parseFloat(forceXInput.value());\n const forceY = parseFloat(forceYInput.value());\n const frames = parseInt(framesInput.value());\n if (!isNaN(forceX) && !isNaN(forceY) && !isNaN(frames)) {\n forceVector = createVector(forceX, forceY);\n forceFrames = frames;\n isForceEquipped = true;\n }\n}\n```\n\n### Explanation:\n1. **Matter.js Setup**:\n - Added the Matter.js script to the HTML file.\n - Initialized the Matter.js engine and world in the `setup` function.\n - Created a Matter.js renderer to visualize the physics world.\n\n2. **Ball Class**:\n - Replaced the custom Ball class with a Matter.js circle body.\n - Updated the `show` method to draw the Matter.js body using p5.js.\n\n3. **UI Components**:\n - Recreated the UI components using p5.js functions.\n - Updated the `applyForce` function to use Matter.js `Body.applyForce`.\n\nThis refactor sets up the foundation for using Matter.js in your project. You can further extend this by adding more functionalities and integrating the rest of the project features.","deleted":0,"created_at":"2024-06-13T18:08:33.107775Z","output_tokens":null,"code_id":102280,"input_tokens":null,"id":51098}],"assets":[],"messages_sent":34,"comments":[],"steps":[]}