Simulate the Solar System 1.2

{"name":"StSS 1.2 WIP Backup","description":"Embark on a funky sprite adventure where you can control colorful characters and explore a whimsical world filled with surprises and challenges.","photo":null,"view_count":1,"fork_count":2,"expires_at":null,"created_at":"2024-06-07T13:40:39.655156Z","updated_at":"2024-06-07T15:58:42.658316Z","user_id":60,"status":"DELETED","parent_id":null,"id":1769,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"// IDEA 1: Add more balls of various sizes and colors.\n// IDEA 2: Add some terrain, like a wall or a ramp.\n// IDEA 3: Add new shapes (squares, triangles) and get their (collision) physics working.\n// IDEA 4: Add a *force* system to launch and smack objects around.\n// IDEA 5: Create a controllable character with physics: gravity, friction, and smooth movement.\n\n/*\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///////// #VARIABLES //////////\n// We will store all the balls in an array.\nlet balls = [];\n// This will keep track of which ball has been clicked last\nlet selectedBall = null;\n// For colors, as we add new balls\nlet currentHue = 250;\n// Will be an HTML element that shows stats of a ball\nlet statsDiv;\nlet centerBall0Checkbox;\nlet centerBall1Checkbox;\nlet playPauseButton;\nlet isPaused = false;\nlet isDragging = false;\n\n// How high the ground level will be, measured from the *top* of the canvas\nlet groundHeight = 500;\n// Will be used when we set up our coordinate system.\nlet yOffset;\nlet xOffset;\n\n// Represents the strength of gravity\nlet gravity = 0;\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 // 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\n// This runs over and over, updating the state of the simulation.\nfunction draw() {\n background(220, 50, 90);\n\n // Check if either \"Center on Ball #0\" or \"Center on Ball #1\" checkbox is checked\n if (centerBallCheckbox.checked() && balls.length > 0) {\n // Center the canvas on Ball #0\n let ball0 = balls[0];\n translate(width / 2 - ball0.x, height / 2 - ball0.y);\n } else if (centerBall1Checkbox.checked() && balls.length > 1) {\n // Center the canvas on Ball #1\n let ball1 = balls[1];\n translate(width / 2 - ball1.x, height / 2 - ball1.y);\n } else {\n translate(xOffset, yOffset);\n }\n\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 }\n for (let ball of balls) {\n ball.display();\n }\n\n mouseHeld();\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.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 *= -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 *= -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 *= -0.9;\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.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 // 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// 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/////////// #HELPER FUNCTIONS ///////////\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;\n // Adjust distance calculation to account for the new offset if \"Center on Ball #0\" or \"Center on Ball #1\" is checked\n if ((centerBallCheckbox.checked() || centerBall1Checkbox.checked()) && balls.length > 0) {\n let centerBall = centerBallCheckbox.checked() ? balls[0] : balls[1];\n d = dist(\n mouseX - width / 2 + centerBall.x,\n mouseY - height / 2 + centerBall.y,\n ball.x,\n ball.y\n );\n } else {\n d = dist(mouseX - xOffset, mouseY - yOffset, ball.x, ball.y);\n }\n\n // Only consider balls other than Ball #0 when \"Center on Ball #0\" is checked\n // Only consider balls other than Ball #1 when \"Center on Ball #1\" is checked\n if (d < ball.radius && !((centerBallCheckbox.checked() && ball.id === 0) || (centerBall1Checkbox.checked() && ball.id === 1))) {\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 // 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 target positions differently if \"Center on Ball #0\" or \"Center on Ball #1\" is checked\n let targetX, targetY;\n if ((centerBallCheckbox.checked() || centerBall1Checkbox.checked()) && balls.length > 0) {\n let centerBall = centerBallCheckbox.checked() ? balls[0] : balls[1];\n targetX = mouseX - width / 2 + centerBall.x;\n targetY = mouseY - height / 2 + centerBall.y;\n } else {\n targetX = mouseX - xOffset;\n targetY = mouseY - yOffset;\n }\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 (centerBall0Checkbox.checked() && selectedBall.id === 0) return;\n\n // Make sure velocity doesn't exceed 40 in either direction.\n selectedBall.vx = constrain(selectedBall.vx / (frameRate() / 60), -40, 40);\n selectedBall.vy = constrain(selectedBall.vy / (frameRate() / 60), -40, 40);\n\n // Clean up temporary properties.\n delete selectedBall.prevX;\n delete selectedBall.prevY;\n\n // If simulation is paused, make sure to restore input fields when done dragging.\n if (isPaused) {\n selectedBall.makeStatsEditable();\n }\n }\n}\n\n/*\nfunction keyPressed() {\n // Add keyboard functionality here!\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 Simulate the Solar System 1.2\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":15,"comments":[],"steps":[]}