PHYSICS tutorial 1: Position, Velocity, Acceleration

{"name":"Simulate the Solar System 1","description":"Move a ball around on screen with math and code.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/oarf8fltpzhcj1hn97lt","view_count":58,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:46:20.251364Z","updated_at":"2025-08-06T08:46:20.251365Z","user_id":246,"status":"DELETED","parent_id":1601,"id":1767,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"Ball.js":"/* \\n******************************************\\nThis is the important part: the Ball class.\\nA class is a code recipe for an object.\\nThe Ball class will allow us to make any Ball we want and it will work in our program.\\nOur job is to give the Ball some physics!\\n******************************************\\n*/\\n\\n\\nclass Ball {\\n // Ignore most of this for now. You'll understand it all in like 10 minutes.\\n constructor(x, y, vx, vy, ax, ay) {\\n this.x = x; // The Ball's x-coordinate.\\n this.y = y; // The Ball's y-coordinate.\\n this.vx = vx;\\n this.vy = vy;\\n this.ax = ax;\\n this.ay = ay;\\n this.radius = 20;\\n this.color = color(100, 10, 150); // purple: (100, 10, 150)\\n this.prevX = x;\\n this.prevY = y;\\n this.prevVx = vx;\\n this.prevVy = vy;\\n }\\n\\n // *************** MAKE THE BALL MOVE!! ***************\\n /*\\n To make the ball move, we need to change its coordinates over time.\\n The simplest way to do this is to add numbers to its coordinates.\\n This works, but it ain't so flexible. Try it anyway, then we'll get a little fancier.\\n */\\n move() {\\n\\n this.vx = this.vx + this.ax;\\n this.vy = this.vy + this.ay;\\n\\n this.x = this.x + this.vx;\\n this.y = this.y - this.vy;\\n\\n }\\n /*\\n If we add 1 pixel to the ball's position every frame, it will move slowly.\\n If we add 10 pixels every frame, it will move much faster — 60 grid squares every second.\\n This shows how we can control speed using numbers.\\n In physics, we use a slightly richer concept than speed to talk about how objects move.\\n We use the word *velocity* to give a number to an object's *directional speed*.\\n In other words, 1 unit of velocity upwards is different than 1 unit of velocity leftwards.\\n In fact, we can write independent velocities for an object's x-direction and y-direction, keeping us aligned with our code so far.\\n Use this.vx and this.vy to set the Ball's x- and y-velocities. Then simply *add* those to this.x and this.y — voilà — we can control motion in any direction.\\n\\n In one sentence: *velocity is how much position changes.*\\n\\n We measure velocity in units of distance per units of time. (\\\"Per\\\", mathematically, means \\\"divided by\\\".)\\n Miles per hour; meters per second; pixels per frame; gridlines per millisecond — all of these measure velocity.\\n */\\n\\n // 1.1.3 — The Speed of Speed\\n\\n /*\\n By setting this.vx and this.vy and adding those to this.x and this.y, we can simulate any trajectory of *linear* (straight-line) motion.\\n What can't we do yet? Speeding up and slowing down, or curving. Let's crack that nut.\\n \\\"Speed up\\\" — what is that phrase hinting at?\\n To make the ball speed up, we need its velocity to increase over time.\\n In slow motion:\\n frame 0: Ball moves 0 pixels\\n frame 1: Ball moves 1 pixel\\n frame 2: Ball moves 2 additional pixels\\n .\\n .\\n .\\n If the velocity is changing over time, it is almost like the speed has its own speed — its own rate of change.\\n The phsyics word for \\\"the rate of change of velocity\\\" is *acceleration*.\\n\\n Use this.ax and this.ay to update this.vx and this.vy *the same way* velocity updates position (through addition)!\\n\\n What kind of motion does this produce? Try various combinations of velocity and acceleration in each direction, mixing positives and negatives.\\n\\n Once you have it working, feel free to use the interface below the canvas to change the velocity and acceleration of the ball without going into the code.\\n\\n The best way to learn with a simulation: change some numbers, *predict* what will happen, then test your prediction. That's science!\\n\\n Exercise: If the ball starts with positive x-velocity but negative x-acceleration, how will it move? Describe its trajectory.\\n\\n Challenge: Set up *inital conditions* — velocity and acceleration — for the ball that produce a nice natural arc of motion, like you threw the ball in the air. \\n\\n The basics of physics boil down to one sentence:\\n **Acceleration changes velocity over time and velocity changes position over time.**\\n\\n Wield this power and you can simulate anything that moves!\\n */\\n\\n\\n // 1.1.4 — Add Some Visual Feedback\\n\\n /*\\n It's easy enough to draw a circle on the screen. But what if we want to represent velocity and acceleration with pictures?\\n Moreover, what if we want to combine x-velocity and y-velocity into a single \\\"THE velocity,\\\" so that we can say something like \\\"the Ball's velocity is 10 pixels per frame Northeast\\\"?\\n Or, \\\"the Ball is traveling at 43.2 pixels per frame, 40º above horizontal.\\\"\\n \\n The standard representation that combines x- and y-velocities into a single package is a *vector*.\\n A vector is basically an arrow that represents a magnitude (a size, a number) and a direction.\\n A long vector pointing straight down represents the ball in free-fall.\\n A short vector pointing right shows a gentle rightward slide. And so on.\\n We will work out the math that concocts vectors next week, but for now, we will happily use JavaScript's createVector() function.\\n It's easy; just put this.vx and this.vy into createVector to, well, create a single vector that captures the ball's composite velocity.\\n \\n I wrote a helper function drawArrow() that draws an arrow based on a vector.\\n Including these vectors in the Ball's display() method will help us visualize how the ball moves.\\n \\n */\\n\\n display() {\\n // This is the easy part — the Ball itself.\\n fill(this.color);\\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\\n\\n // Now we build a velocity vector. (The negative y is once again to correct for JavaScript's down-by-default y behavior.)\\n let velocity = createVector(this.vx, -this.vy).mult(4); // We multiply the vector by 4 just to make it big enough to see clearly.\\n // Uncomment the line below to display the arrow.\\n drawArrow(createVector(this.x, this.y), velocity, '#21f00a');\\n\\n // Now do the same with acceleration.\\n let acceleration = createVector(this.ax, -this.ay).mult(50);\\n drawArrow(createVector(this.x, this.y), acceleration, '#035afc');\\n\\n // This little chunk shows the ball's coordinates. You can comment it out if you want to clean up the display.\\n let textX = this.x;\\n let textY = this.y + this.radius + 15; // Default to below the ball\\n if (this.y > height / 4) {\\n textY = this.y - this.radius - 15; // Move above the ball if in the bottom quarter\\n }\\n fill(0);\\n textAlign(CENTER);\\n text(`(${(this.x * 0.1).toFixed(1)}, ${(-this.y * 0.1).toFixed(1)})`, textX, textY);\\n\\n // Exercise: Make the color of each arrow change depending on the velocity/acceleration. Idea: brighter color for bigger arrow.\\n }\\n\\n // 1.1.5 — Bouncing\\n /*\\n As a bonus, let's add a checkCollision() method that has the Ball bounce off the \\\"walls\\\" — the edges of the canvas.\\n This sounds complicated, but it turns out to be straightforward in the language of velocity.\\n When a ball bounces off a wall, it goes the opposite direction. We simulate this by multiplying the velocity (in the direction of the bounce) by -1. Easy!\\n */\\n checkCollision() {\\n let collided = false;\\n\\n if (wallBounceCheckbox.checked()) {\\n // For safety, check if the ball is offscreen, and if it is, teleport back home.\\n if (this.x + this.radius < -width / 2 || this.x - this.radius > width / 2 ||\\n this.y + this.radius < -height / 2 || this.y - this.radius > height / 2) {\\n this.x = 0;\\n this.y = 0;\\n return;\\n }\\n\\n // If the ball hits the left or right wall, multiply its x-velocity by -1.\\n if (this.x - this.radius <= -width / 2 || this.x + this.radius >= width / 2) {\\n this.vx *= -1;\\n collided = true;\\n }\\n\\n // Do the same to the y-velocity for the top/bottom wall.\\n if (this.y - this.radius <= -height / 2 || this.y + this.radius >= height / 2) {\\n this.vy *= -1;\\n collided = true;\\n }\\n }\\n // Challenge: Adjust this code so that when the ball hits a wall, it loses a little bit of energy and slows down, as would happen in real life.\\n }\\n\\n // Now is a good time to return to script.js.\\n\\n\\n // *************************************************\\n // This is HTML for the Stats Panel below the Canvas.\\n // The only interesting part is the multiplcation by 0.1 — that is the coordinate transformation from pixels to gridlines.\\n // By default, positive Y is *down* in JavaScript, but the physics convention is *up*. We correct for this with the \\\"-this.y\\\" below.\\n updateStats() {\\n statsDiv.html(`\\n Purple Ball:
\\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: ${(this.vx * 0.1).toFixed(1)}	←	Acceleration: ${(this.ax * 0.1).toFixed(2)}
Y:	Position: ${(-this.y * 0.1).toFixed(1)}	←	Velocity: ${(this.vy * 0.1).toFixed(1)}	←	Acceleration: ${(this.ay * 0.1).toFixed(2)}

\\n`);\\n }\\n\\n makeStatsEditable() {\\n statsDiv.html(`\\n Purple Ball:
\\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 // This sets up the input fields and corrects for the coordinate transformation in reverse.\\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 makeStatsReadOnly() {\\n if (select('#posX') && select('#posY') && select('#velX') && select('#velY') && select('#accX') && select('#accY')) {\\n // Update Ball stats from input fields and reverse coordinate transformations.\\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}","script.js":"/*\\n\\nWelcome to **Simulate the Solar System**!\\n\\nThis is a course about *physics* (and soon, *astrophysics*).\\n\\nPhysics is an old discipline, dating back centuries.\\n\\nThe central question of physics is \\\"how does matter move through space?\\\" (Ignore the questions \\\"what is matter?\\\" and \\\"what is space?\\\" for now.)\\n\\nModern physics blossomed when Sir Isaac Newton published his *Principia Mathematica* in 1687.\\nNewtown's innovation was to cast laws of physics in the language of mathematics — in particular, *calculus*, which he invented to solve physics problems.\\n\\nAstronomers had discovered mathematical rules governing the cosmos long before Newton, but Newton revolutionized the field, and it is his mathematics that dominates introductory physics courses to this day.\\n\\nSince the time of Newton, *theoretical* physics has been done on pencil and paper by setting up simplified versions of the universe and solving equations that describe how bodies move through that universe.\\n\\nBut it ain't 1687 no more. This is the world of Pokémon and Doritos. We can leap-frog past pencil-and-paper, to the hippest tool ever created:\\n\\n**THE COMPUTER**\\n\\nComputers can do math fast and automatically. This is great news for us physicists.\\n\\nOur goal is revolutionize the way physics is taught and learned, replacing old-school math with new-school *code*.\\n\\nThis is not really a coding course. You will be thinking like a physicist and mathematician, not like a software engineer.\\nBut the code will let us see and feel the math faster than any other physics students in history.\\nI will write setup code for you, but you will be responsible for the most important code: the physics code! \\nThat is to say, the *movement* code.\\n\\nHere's how our course will work:\\n- I will upload code files (like this one). You *fork* them and fill in missing physics code.\\n- I will include some questions at the end of a file. I want you to think through them and type up your own answers.\\n It's not about being right or wrong! These aren't math problems. The goal is to get you to think about physics — that's it.\\n Please email me your answers. I will respond if you leave me enough time!\\n- You are free to modify and expand any of the code demos. If you want to make everything pink and purple, go for it. If you want to add fancier physics, be my guest. They're your projects.\\n- Our ultimate goal is to write a program that simulates the solar system: the planets orbiting the Sun. *Not* an animation, but a simulation running in real-time.\\n We can get there in a matter of weeks! It's less code than you think.\\n If we set up our simulation right, we can answer funky questions like:\\n - \\\"What would happen to the Solar System if gravity were twice as strong?\\\"\\n - \\\"What if Jupiter were ten times bigger?\\\"\\n - \\\"What if Mars started orbiting the other way?\\\"\\n\\nThis is gonna be fun.\\n\\nEmail me at support@jippity.pro for any support. I'm here for you.\\n\\nLet's do it! Let's learn some physics!\\n\\n*/\\n\\n// 1.1.1 — The Map of the Territory\\n\\n/*\\n\\nFirst things first: run the current version of this program. What do you see?\\n\\nYou should see a purple ball on a grid and two numbers. If you click-and-drag the ball, it will move and the numbers will change.\\n\\nThose numbers are called *coordinates*.\\n\\nCoordinates are numbers that describe where something is.\\n\\nEvery number on a ruler is a coordinate. Times on a clock are coordinates.\\n\\nIn physics, we want to do math. To do math, we need numbers. That's why we need coordinates.\\n\\nOn a screen, you can move up-down or left-right, and those directions are independent.\\n\\nThat means to locate any position on the screen, we need *two* coordinates.\\nWhen we say the screen is \\\"two-dimensional\\\", what we mean is we need two coordinates to describe it. (Imagine trying to describe a place on screen with just one number — won't go well!)\\n\\nThe first coordinate describes where the ball is *horizontally* (left-right). We call this the *X coordinate.*\\nThe second coordinate, the *Y coordinate*, describes where the ball is *vertically* (up-down).\\n\\nSo how do those numbers work?\\n\\nOne thing we must do as physicists is declare where to start counting coordinates. In other words, say where zero is for each coordinate.\\nThen we have to decide how big one unit is for each coordinate.\\n\\nWe will make a natural choice: start counting from the center of the canvas. We call that point *the origin*.\\n\\nThe origin has coordinates (0, 0) by definition.\\n\\nThe black vertical line represents all the locations whose x-coordinate is zero. We call it the *x-axis*.\\nThe black horizontal line is called the *y-axis* and it shows all locations whose y-coordinate is zero.\\n\\nI set up a grid of lighter lines spaced 10 pixels apart. 1 unit in our system will be the distance between two gridlines: 10 pixels.\\n\\nThat means 1 pixel is 0.1 units. (We could have used pixels as coordinates, too. It is up to the physicist to choose their units, and we can even do math to transform from one coordinate system to another, like translating from feet to meters, or Fahrenheit to Celsius.)\\n\\nWe also declare that right is the positive direction on the x-axis so that left is negative.\\nLikewise, up is positive for y so that down is negative.\\n\\nTake a second to make sure you get this. Move the ball around and make sure it's showing the right coordinates.\\n\\nThe exact coordinate of the ball is determined by its *center* point.\\n\\nExercise: drag the ball to:\\n (3.0, 3.0)\\n (0.0, 5.0)\\n (0.0, -5.0)\\n (16.0, -2.0)\\n (-3.2, 0.0)\\n (-5.1, 6.8)\\n\\n Challenge question: if we used pixels instead of gridlines as coordinates, how would the numbers you see change?\\n\\nGreat — we have a map of our territory. We're using pixels and gridlines to measure distances. \\nIn the physical world, we use units like feet and inches or meters and kilometers, but the idea is the same: numbers that tell you where you are.\\n\\nIn fancy professional physics, we think of the world as 4-dimensional: (x, y, z, t) where the x-, y-, and z-coordinates represent three dimensions of space and t represent time as its own dimension.\\nThat way, any *event* in the universe can be described with four numbers: (this long, this high, this deep, at this time).\\n\\n*/\\n\\n// 1.1.2 — Make it Move\\n\\n// Here's some setup code that will lay out the basic features we'll explore today. You can speed through this or skip it entirely.\\n// Variables...\\nlet ball;\\nlet statsDiv;\\nlet playPauseButton;\\nlet isPaused = false;\\n\\nfunction setup() {\\n createCanvas(windowWidth, windowHeight);\\n\\n // This makes the Ball you see. Don't worry about the numbers — we'll define those shortly.\\n ball = new Ball(0, 0, 0, 0, 0, 0);\\n\\n // This stuff make HTML for the Stats Panel beneath the canvas.\\n statsDiv = createDiv('');\\n statsDiv.id('statsDiv');\\n statsDiv.position(10, height + 10);\\n statsDiv.style('width', 'auto');\\n\\n ball.updateStats(); // The Ball will talk to the Stats Panel as it moves.\\n\\n let statsDivWidth = statsDiv.elt.offsetWidth;\\n playPauseButton = createButton('Pause');\\n playPauseButton.id('playPauseButton');\\n playPauseButton.position(statsDiv.position().x + statsDivWidth, height + 10);\\n playPauseButton.mousePressed(togglePause);\\n createWallBounceCheckbox();\\n\\n // **Useful for testing**\\n frameRate(60) // Adjust this to speed up/slow down time. Default is 60 fps.\\n}\\n\\n/*\\n\\nNow let's check out the code that makes the ball work.\\n\\nIn the files menu above here, click the little arrow and choose Ball.js.\\nThat file holds the physics code for the Ball.\\n\\nWhen you're finished there, you can check out the rest of the code below.\\n\\n*/\\n\\n\\n\\n\\n\\n// ** MAIN LOOP **\\n// This runs over and over, calculating where the ball should go each frame. \\nfunction draw() {\\n // Start with a gray background.\\n background(220);\\n // Move our coordinates so that (0, 0) is the center of the canvas.\\n translate(width / 2, height / 2);\\n // Draw the coordinate grid.\\n drawGrid();\\n\\n // When the simulation is NOT Paused...\\n if (!isPaused) {\\n ball.move(); // ...move the Ball...\\n ball.checkCollision(); // ...check collisions...\\n ball.updateStats(); // ...and update the Stats panel.\\n }\\n mouseHeld() // Deal with the mouse.\\n\\n // And finally, draw the Ball in the right spot.\\n ball.display();\\n}\\n\\n// **********************\\n// HELPER FUNCTIONS BELOW — investigate if you're a coder who wants to build something like this yourself.\\n// **********************\\n\\nfunction drawGrid() {\\n stroke(200);\\n fill(120);\\n // Changing this number will adjust the size of the grid. \\n // If you do that, you'll have to adjust calculations elsewhere to make the Stats Panel agree.\\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(height / 2 / gridSize) * gridSize;\\n\\n // Draw vertical lines\\n for (let x = -halfWidth; x <= halfWidth; x += gridSize) {\\n stroke(x === 0 ? 0 : 200); // Darker line for the y-axis\\n line(x, -halfHeight, x, halfHeight);\\n }\\n\\n // Draw horizontal lines\\n for (let y = -halfHeight; y <= halfHeight; y += gridSize) {\\n stroke(y === 0 ? 0 : 200); // Darker line for the x-axis\\n line(-halfWidth, y, halfWidth, y);\\n }\\n\\n // Draw origin point\\n fill(0);\\n ellipse(0, 0, 5, 5); // Small dot at the origin\\n}\\n\\nfunction drawArrow(base, vec, myColor) {\\n if (vec.mag() < 0.01) return; // Do not draw if magnitude 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\\nlet isDragging = false;\\n\\nfunction mousePressed() {\\n // Check if the mouse is over the ball\\n let d = dist(mouseX - width / 2, mouseY - height / 2, ball.x, ball.y);\\n if (d < ball.radius) {\\n isDragging = true;\\n\\n if (!isPaused) togglePause(); // Pause if not already paused\\n\\n }\\n}\\n\\nfunction mouseHeld() {\\n if (isDragging) {\\n // Calculate velocity based on change in position\\n let newVx = (mouseX - width / 2 - ball.prevX);\\n let newVy = -(mouseY - height / 2 - ball.prevY); // Negate Y value\\n\\n // Update position\\n ball.prevX = ball.x;\\n ball.prevY = ball.y;\\n ball.x = mouseX - width / 2;\\n ball.y = mouseY - height / 2;\\n\\n // Update velocity and reset acceleration\\n ball.vx = newVx;\\n ball.vy = newVy;\\n\\n // Update stats to reflect current position and velocity\\n ball.updateStats();\\n }\\n}\\n\\nfunction mouseReleased() {\\n if (isDragging) {\\n isDragging = false;\\n\\n // Check if both velocity and acceleration are zero\\n if (ball.vx === 0 && ball.vy === 0 && ball.ax === 0 && ball.ay === 0) {\\n ball.makeStatsEditable();\\n return; // Do not toggle pause\\n }\\n\\n if (isPaused) togglePause();\\n }\\n}\\n\\n\\nfunction togglePause() {\\n isPaused = !isPaused;\\n playPauseButton.html(isPaused ? 'Play' : 'Pause');\\n\\n // Change button color based on state\\n if (isPaused) {\\n playPauseButton.addClass('play');\\n ball.makeStatsEditable();\\n } else {\\n playPauseButton.removeClass('play');\\n ball.makeStatsReadOnly();\\n }\\n}\\n\\nfunction createWallBounceCheckbox() {\\n wallBounceCheckbox = createCheckbox('Wall Bounce', false);\\n wallBounceCheckbox.id('wallBounceCheckbox');\\n wallBounceCheckbox.position(playPauseButton.position().x + playPauseButton.width + 20, height + 10);\\n}\\n\\n// ******************************************************************************************************\\n\\n/*\\n\\nFollow-up Questions [email/message me answers, or open a discussion in the class Recess chat!]\\n\\n1. Imagine the Ball begins with zero velocity but positive x-acceleration. How will the ball move? Describe its trajectory.\\n\\n 1b. What if the Ball begins with zero velocity but positive x-acceleration *and* positive y-acceleration?\\n\\n2. What does it feel like to accelerate in a car? Where do you feel the force (the push and pull)? When? What about while turning?\\n\\n 2b. What about in an elevator?\\n\\n3. Gravity pulls you down to the ground. Does gravity cause velocity? Acceleration?\\n\\n4. Can you simulate smacking the ball? Is that more about velocity or acceleration?\\n\\n5. Imagine you have two balls. One has a constant x-velocity of 15 pixels per frame. The other starts with 0 x-velocity but has an x-acceleration of 3 pixels per frame per frame.\\n When will the second ball be traveling the same speed as the first?\\n\\n 5b. [Challenge!] When will the second ball catch up to the first ball?\\n\\nExtra Bonus Challenge: Write an equation or a JS function that tells you how far a ball travels after T frames (or seconds), given that the ball starts with 0 velocity and A acceleration.\\n [T and A will be variables in the equation or arguments in the function.]\\n\\n*/","style.css":"/* All this is just to make the Stats Panel look good. */\\n\\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#statsDiv {\\n font-size: 16px;\\n display: inline-block;\\n vertical-align: top;\\n width: auto;\\n background-color: beige;\\n\\n padding: 10px;\\n border-radius: 5px;\\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\\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 cursor: pointer;\\n border-radius: 25px;\\n color: beige;\\n background-color: red;\\n /* Keep button red for 'Pause' */\\n border: none;\\n transition: background-color 0.3s;\\n font-family: Georgia, serif;\\n justify-content: center;\\n align-items: center;\\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\\n}\\n\\nbody {\\n background-color: #321b32\\n}\\n\\n\\n#wallBounceCheckbox {\\n color: beige;\\n\\n display: inline-block;\\n padding: 10px;\\n border-radius: 5px;\\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\\n\\n background-color: #321b32\\n}","index.html":"\\n\\n\\n\\n \\n \\n PHYSICS tutorial 1: Position, Velocity, Acceleration\\n \\n\\n\\n\\n \\n \\n \\n\\n\\n"},"chat_history":[],"assets":[{"project_id":1767,"creator":null,"cloudinary_id":"oarf8fltpzhcj1hn97lt","deleted":false,"id":69667,"created_at":"2025-04-09T16:49:39.011804Z","name":"ss","resource_type":"image","tags":null}],"messages_sent":10,"comments":[{"content":".","id":1289,"user_id":817,"user":{"photo":null,"email":"","recess_id":null,"created_at":"2025-10-08T03:48:12.389275Z","reset_token":null,"stripe_customer_id":"cus_TCClLqMnGBDKkC","seats":0,"username":"constantinelevin","id":817,"password_hash":"djghfsdfjkghds","updated_at":"2025-10-08T03:48:12.389282Z","reset_token_expiry":null,"subscription_status":"canceled"},"project_id":1767,"created_at":"2025-10-08T03:53:40.579221Z","updated_at":"2025-10-08T03:53:40.579223Z"}],"steps":[]}