[TEMPLATE] Physics

{"name":"Physics Template [Brownsville LINC]","description":"Physics playground!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/g40fcmb9fp3svolhkre9","view_count":5,"fork_count":2,"expires_at":null,"created_at":"2024-10-16T19:09:30.120558Z","updated_at":"2024-10-16T19:09:30.120561Z","user_id":235,"status":"PRIVATE","parent_id":3612,"id":3720,"user":{"photo":null,"email":"jacob.kam@alpha.school","recess_id":null,"created_at":"2024-10-15T14:40:09.061696Z","reset_token":null,"stripe_customer_id":"","seats":null,"username":"jacobk","id":235,"password_hash":"$2b$12$4HeF7xul0vjMqVfw7io.beR3TszMo2TX7TD1URe/7Lphahp007BC2","updated_at":"2024-10-15T14:40:09.061702Z","reset_token_expiry":null,"subscription_status":""},"code":{"script.js":"/*\n PHYSICS \n————— template by Jacob —————\n\nA physics simulation framework including velocity, acceleration, and collision.\n\nThis template can serve as a basis for physics in a game, or as a learning and reference tool.\n\nEmail questions or bugs to jacob@jippity.pro.\n*/\n\n/*\n\nHi everyone!\n\nI wrote this computer program as a physics playground that you can play with and edit.\n\nThere's a lot of code below. I will explain some, skip some, and you can mess around with it when you're feeling ready.\n\nBut first, let's see what it does. Hit *Run*!\n\nWatch the balls bounce. Pick them up and drop them! Toss them!\n\nNotice also, if you scroll down a little, a \"Stats Panel\" will appear containing some scientific words and numbers.\n\nMove a ball around and watch those numbers change. Any guesses for what they mean?\n\n.\n.\n.\n\nThe most straightforward is 'position.' Those numbers describe *where* the ball is on the screen.\nQuestions: What do the 'x' and 'y' show? What does a positive vs. a negative number mean?\n\nThose numbers are measured in little squares from the black dot in the middle of the ground. Let's check that!\n\nNumbers that describe where something is are called *coordinates*. \nMathematicians, scientists, and programmers use coordinates ALL THE TIME, in the real world and in imagined worlds.\n\n[Let's do a little coordinate practice.]\n\nBIG IDEA: Any time you use a number to describe or measure something, you're using *coordinates.*\n\nIn math, physics, and coding, the x-coordinate measures left-and-right; the y-coordinate measures up-and-down.\n\nYou also have to measure *from* some point that you call home.\n\n\"I am sitting 7 feet left and 2 feet down from my door.\"\n\n\"I am 3 miles north and 8 miles west of City Hall.\"\n\n\"This rocket is 30,000 meters above Brownsville, TX.\"\n\nAnd in our little example here: \"The red ball is 3 squares right (x) and 10 squares up (y) from the *origin point* in the middle of the ground.\"\n\nSince coordinates are numbers, they can also be decimals or fractions, and even negative. If right is positive, left is negative, and so on.\n\n[Think of some examples of measuring things with coordinates — using numbers!]\n\n~ ~ ~\n\nNow we know how to describe *where* a ball (or anything) is.\n\nBut physics is about how things *move.*\n\nCan you think of any numbers that describe how something moves?\n\nThe straightforward answer is *speed*. \n\n\"I am running 7 miles an hour.\"\n\n\"The car is driving 60 miles per hour.\"\n\n\"The rocket is blasting off at 100 meters per second.\"\n\nWhen we talk about speed, we include a measurement of *distance* and a measuremet of *time*.\n\nOn a computer screen, we can talk about distance using *pixels* or we can use the little squares that the program draws on screen.\nFor time, we can use seconds, but we can also use *frames.* A frame is one flash of an image on a computer screen.\nPrograms like this demo and lots of video games run at 60 frames per second. Every second, 60 images flash on the screen!\nWe can use that tiny unit of time as a measurement for our program.\n\nSo instead of \"miles per hour,\" we can measure speed as \"squares per frame.\"\n\nThe word physicists use for speed is **velocity.**\n\nVelocity is a measurement of how much distance something traveled divided by how much time has passed.\n\nLet's do a little bit of math practice with velocity!\n\n[...]\n\nToss one of the balls and watch its velocity. Pay attention to negative vs. positive.\n\nImportant question: why does the ball have *two* velocites, X and Y? What does that mean?\n\nThink about it this way: if I say I am moving 3 mph, it would be fair to ask me \"in what direction?\"\nI could be moving North, South, East, West, up, down, left, right, diagonal...anything.\nIn physics, we can measure a tilted velocity as a mix of X and Y. [Draw example.]\nTest it out by tossing the balls around!\n\nThe green arrow coming out of each ball represents its velocity. It points in the direction the ball is moving, and the faster the ball moves, the longer the arrow.\n\n~ ~ ~\n\nNow let's focus on how velocity changes as the ball moves and bounces.\n\nLet a ball bounce up and down. Describe how the green arrow changes. Watch it get longer and shorter.\n\nWhat causes that?\n\nWhen velocity changes, we call it *acceleration.* \"Accelerate\" means \"speed up\" or \"change speed.\"\n\nIn the world of physics, acceleration happens because of *force* — a push or a pull.\n\nIn our little playground, there are two sources of force:\n1) Collisions — when balls crash into each other or bounce off walls;\n2) *Gravity.*\n\nWhat's gravity?\n\nIt's a force! It's the force of the Earth pulling everything else towards it.\n\nGravity pulls you towards the ground so you don't float away. But gravity isn't that strong, so your muscles can overcome it — if only for a moment — when you stand up or jump.\n\nLet's think about this. Why is the force of gravity enough to create the beautiful smooth motion of the ball?\n\nThe \"story\" of the ball bouncing:\n\n0. Hold the ball above the ground. It is not moving at all. No velocity.\n1. Let it go. Gravity pulls down on the ball, causing it to accelerate. Its downward velocity increases. Slowly at first, then faster and faster.\n2. The longer gravity pulls on it, the faster the ball goes.\n3. The ball reaches its maximum downward velocity a moment before it hits the ground.\n4. When the ball hits the ground, the ground hits it with a quick force *upwards*, causing it to accelerate off the ground.\n5. When it first bounces, the ball is moving fast. But gravity is pulling down!\n6. The downward pull of gravity causes the ball to slow down until it comes to a stop at the peak of its trajectory.\n7. Gravity keeps pulling down, so the ball begins to fall again...the cycle repeats!\n\nWe can even play with the strength of gravity in our simulation. That's the power of code!\n\nhit 'Pause' and type in different numbers in the 'Acceleration' boxes. \nYou can make it like gravity is stronger or weaker, or points sideways!\n\nA HUGE question that you can think about for a long time:\n\"How is the force that pulls objects onto the ground the same force that makes the Moon orbit th Earth and the Earth orbit the Sun?\"\nIsaac Newton came up with the first good answer to that question in the 1680s!\n\nWe'll talk about it. Next time we'll get into how I wrote some of this code, how you can read it, edit it, and how you can write your own!\n\n\n\n*/\n\n///////// #VARIABLES //////////\n// We will store all the balls in an array.\nlet balls = [];\n\n// This will keep track of which ball has been clicked last\nlet selectedBall = null;\n\n// For colors, as we add new balls\nlet currentHue = 0;\n\n// Will be an HTML element that shows stats of a ball\nlet statsDiv;\n\nlet playPauseButton;\n\nlet isPaused = false;\n\nlet isDragging = false;\n\n// How high the ground level will be, measured from the *top* of the canvas\nlet groundHeight = 500;\n\n// Will be used when we set up our coordinate system.\nlet yOffset;\n\nlet xOffset;\n\n// Represents the strength of gravity\nlet gravity = 0.25;\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 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\n// This runs over and over, updating the state of the simulation.\nfunction draw() {\n // Light blue-ish gray.\n background(220, 50, 90);\n // translate() shifts the coordinates of the canvas. \n translate(xOffset, yOffset);\n // Now (0,0) is at the center of the canvas on the ground (where the axes meet).\n // This means we can calculate positions relative to that origin point, instead of the top-left (JavaScript default)\n\n //We draw the ground at a height of *0* now, thanks to translate().\n drawTerrain(0);\n\n // Same thing for the coordinate grid.\n drawGrid(xOffset, yOffset);\n\n // If the simulation if not paused, move the balls and check collisions.\n if (!isPaused) {\n // Do this for every ball on the list of balls.\n for (let ball of balls) {\n ball.move();\n ball.checkWallCollision();\n ball.checkTerrainCollision();\n ball.updateStats()\n }\n checkBallCollisions();\n }\n // Whether or not simulation is paused, draw the balls.\n for (let ball of balls) {\n ball.display();\n }\n\n // This function handles the mouse when it is held down.\n mouseHeld();\n}\n\n/////// #CLASSES //////////\n// The Ball class is the main physics object in this simulation.\n// 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.\nclass Ball {\n // You make a Ball by specifying x and y position, 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 // Gravity *is* acceleration.\n this.ay = -gravity;\n this.radius = r;\n // The Ball's mass will correspond to its size (its radius)\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 // This is the core of movement physics.\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 // 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 // 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 0.95 causes the Ball to slow down a little bit.\n this.vx *= -1 * 0.95;\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 *= -0.95;\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 *= -0.95;\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 *= -0.95;\n collided = true;\n }\n }\n }\n\n // This handles bouncing off the 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.95;\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 // Subtract a little bit from velocity until it gets to 0.\n if (this.vx > 0) {\n this.vx = max(this.vx - friction, 0);\n } else if (this.vx < 0) {\n this.vx = min(this.vx + friction, 0);\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 \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 \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/*\nfunction keyPressed() {\n // Add keyboard functionality here!\n\n}\n*/\n\n\nclass Player {\n constructor(x, y, r, color) {\n this.x = x;\n this.y = y;\n this.radius = r;\n this.color = color;\n this.speed = 5; // Speed of the player\n }\n\n display() {\n fill(this.color);\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\n }\n\n move() {\n // Move the player based on key presses\n if (keyIsDown(LEFT_ARROW)) {\n this.x -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n this.x += this.speed;\n }\n if (keyIsDown(UP_ARROW)) {\n this.y -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW)) {\n this.y += this.speed;\n }\n }\n}\n\n// Phew! What a juicy class! That Ball is doing a lot of math work.\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\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(xOffset, yOffset) {\n strokeWeight(1);\n let gridColor = color(200, 0, 80);\n let axisColor = color(0, 0, 0);\n let originColor = color(0, 0, 0);\n let gridSize = 10;\n\n // Adjust the offset to ensure axes align with grid lines\n let halfWidth = floor(width / 2 / gridSize) * gridSize;\n let halfHeight = floor(yOffset / gridSize) * gridSize;\n\n // Vertical lines\n for (let x = -halfWidth; x <= halfWidth; x += gridSize) {\n stroke(x === 0 ? axisColor : gridColor);\n strokeWeight(x === 0 ? 2 : 1);\n line(x, -yOffset, x, height - yOffset);\n }\n\n // Horizontal lines\n for (let y = -halfHeight; y <= height - yOffset; y += gridSize) {\n stroke(y === 0 ? axisColor : gridColor);\n strokeWeight(y === 0 ? 2 : 1);\n line(-xOffset, y, xOffset, y);\n }\n\n // The origin point\n fill(originColor);\n ellipse(0, 0, 5, 5);\n}\n\n// Draw the ground (a big rectangle)\nfunction drawTerrain(yOffset) {\n let groundLevel = yOffset;\n fill(100, 50, 50);\n rect(-width / 2, groundLevel, width, height - groundLevel);\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 // 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 // Check which Ball is clicked from the list\n for (let ball of balls) {\n let d = dist(mouseX - width / 2, mouseY - yOffset, ball.x, ball.y);\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// While holding a ball with the mouse...\nfunction mouseHeld() {\n if (isDragging && selectedBall) {\n\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 // The Ball will move towards the Mouse\n // We subtract Offsets because the Mouse is not on our new coordinate system.\n let targetX = mouseX - xOffset;\n let targetY = mouseY - yOffset;\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 the stats panel in real-time\n selectedBall.updateStats();\n }\n}\n\n// When you release a Ball....\nfunction mouseReleased() {\n if (isDragging && selectedBall) {\n isDragging = false;\n\n // Make sure velocity doesn't exceed 40 in either direciton.\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","style.css":"#statsDiv {\n font-size: 16px;\n display: inline-block;\n vertical-align: top;\n width: auto;\n}\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: Georgia, 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: monospace;\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}","index.html":"\n\n\n\n \n \n [TEMPLATE] Physics\n \n\n\n\n \n \n\n\n"},"chat_history":[{"code_id":164572,"deleted":0,"sender":"human","input_tokens":null,"id":80635,"message":"Let's get started!","project_id":3720,"created_at":"2024-10-16T19:10:54.526927Z","output_tokens":null},{"code_id":164572,"deleted":0,"sender":"ai","input_tokens":null,"id":80636,"message":"Great! Could you tell me a bit more about your project idea? Are you thinking about making a game, a simulation, or something else? What features or elements would you like to add or explore in your physics playground?","project_id":3720,"created_at":"2024-10-16T19:10:54.534390Z","output_tokens":null},{"code_id":164574,"deleted":0,"sender":"human","input_tokens":null,"id":80637,"message":"soccer game","project_id":3720,"created_at":"2024-10-16T19:11:14.850772Z","output_tokens":null},{"code_id":164574,"deleted":0,"sender":"ai","input_tokens":null,"id":80638,"message":"A soccer game sounds like a fun project! We can work on creating a simple soccer game using physics. In this game, you could have a ball that players can kick around and goals to score points. \n\nTo get started, could you tell me more about the specific features you'd like in your soccer game? For example, do you want to control players, or just have the ball move around? Would you like to add goals, and how would you like scoring to work?","project_id":3720,"created_at":"2024-10-16T19:11:14.860055Z","output_tokens":null},{"code_id":164575,"deleted":0,"sender":"human","input_tokens":null,"id":80639,"message":"yes","project_id":3720,"created_at":"2024-10-16T19:11:27.675753Z","output_tokens":null},{"code_id":164575,"deleted":0,"sender":"ai","input_tokens":null,"id":80640,"message":"Awesome! To start building your soccer game, we can use the existing physics simulation as a foundation. We'll need to make some adjustments and add features like goals and player controls.\n\nHere are a couple of questions to help us get started:\n1. Do you want to control any players, or should the game just focus on moving the soccer ball around?\n2. How would you like to handle scoring goals? Should there be specific areas on the field to act as goals?\n\nLet me know your thoughts on these, and we can start implementing your ideas!","project_id":3720,"created_at":"2024-10-16T19:11:27.682708Z","output_tokens":null},{"code_id":164576,"deleted":0,"sender":"human","input_tokens":null,"id":80641,"message":"add player","project_id":3720,"created_at":"2024-10-16T19:11:41.006082Z","output_tokens":null},{"code_id":164576,"deleted":0,"sender":"ai","input_tokens":null,"id":80642,"message":"To add a player to your soccer game, we can create a new class to represent the player and add functionality to control the player using the keyboard. Let's start by creating a basic player class and adding it to the game.\n\n### Step 1: Add a Player Class\n\nFirst, we'll define a new class for the player. This class will include properties like position, size, and controls for movement.\n\n```javascript\n// Add this code above the setup() function\n\nclass Player {\n constructor(x, y, r, color) {\n this.x = x;\n this.y = y;\n this.radius = r;\n this.color = color;\n this.speed = 5; // Speed of the player\n }\n\n display() {\n fill(this.color);\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\n }\n\n move() {\n // Move the player based on key presses\n if (keyIsDown(LEFT_ARROW)) {\n this.x -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n this.x += this.speed;\n }\n if (keyIsDown(UP_ARROW)) {\n this.y -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW)) {\n this.y += this.speed;\n }\n }\n}\n```\n\n### Step 2: Create and Display the Player\n\nNext, we'll create an instance of the player in the `setup` function and update the `draw` function to display and move it.\n\n```javascript\n// Add this global variable at the top of your script.js\nlet player;\n\n// Update the setup() function to create the player\nfunction setup() {\n frameRate(60);\n createCanvas(windowWidth, windowHeight);\n colorMode(HSL);\n groundHeight = (5 / 6) * height;\n yOffset = groundHeight;\n xOffset = width / 2;\n\n // Create player instance\n player = new Player(0, -yOffset / 2, 30, color(240, 100, 50)); // Adjust the position and size as needed\n\n // Existing setup code...\n}\n\n// Update the draw() function to display and move the player\nfunction draw() {\n background(220, 50, 90);\n translate(xOffset, yOffset);\n drawTerrain(0);\n drawGrid(xOffset, yOffset);\n\n if (!isPaused) {\n for (let ball of balls) {\n ball.move();\n ball.checkWallCollision();\n ball.checkTerrainCollision();\n ball.updateStats();\n }\n checkBallCollisions();\n }\n\n for (let ball of balls) {\n ball.display();\n }\n\n // Display and move player\n player.display();\n player.move();\n\n mouseHeld();\n}\n```\n\n### Explanation\n- **Player Class**: Defines a player with position, radius, and color. It includes a `display` method to draw the player and a `move` method to handle keyboard inputs.\n- **Player Instance**: Creates a player instance in the `setup` function with specific attributes.\n- **Movement Logic**: Updates the player's position based on arrow key presses.\n\nFeel free to adjust the player's position, size, and speed as needed. Let me know if you'd like to add more features or make any changes!","project_id":3720,"created_at":"2024-10-16T19:11:41.050275Z","output_tokens":null}],"assets":[{"project_id":3720,"creator":null,"cloudinary_id":"g40fcmb9fp3svolhkre9","deleted":false,"id":29072,"name":"gif","created_at":"2024-10-16T19:09:30.148688Z","resource_type":"image","tags":null},{"project_id":3720,"creator":null,"cloudinary_id":"m6iriyrjyvkhx6rhfsos","deleted":false,"id":29071,"name":"SS","created_at":"2024-10-16T19:09:30.140414Z","resource_type":"image","tags":null}],"messages_sent":4,"comments":[],"steps":[]}