StSS 3.1

{"name":"Simulate the Solar System 6","description":"Gravitational Orbits","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/jbzjpbmgdrihvthxbl2t","view_count":9,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:45:52.313346Z","updated_at":"2025-08-06T08:45:52.313347Z","user_id":246,"status":"DELETED","parent_id":2015,"id":7448,"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":{"Planet.js":"// Similar to Ball from before. \n// This class handles all the stats and also collisions.\n// The move() method will be familiar to you — that's the real important one.\n\nclass Planet {\n constructor(name, x, y, m, hue, id, vx = 0, vy = 0, image = null, emoji = '') {\n this.name = name;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.ax = 0;\n this.ay = 0;\n this.frictionVector = null;\n this.radius = 100;\n this.mass = m;\n this.hue = hue;\n this.color = color(this.hue, 100, 50);\n this.id = id;\n this.image = image;\n this.emoji = emoji;\n\n currentHue += 35;\n currentHue = currentHue % 360;\n }\n\n move() {\n this.vx += this.ax;\n this.vy += this.ay;\n this.x += this.vx;\n this.y -= this.vy;\n }\n\n\n updateStats() {\n if (selectedPlanet && this.id === selectedPlanet.id) {\n statsDiv.html(`\n ${this.name}\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).toFixed(1)}	←	Velocity: ${(Math.abs(this.vx) < 0.01 ? \"0.00\" : (this.vx).toFixed(1))}	←	Acceleration: ${(this.ax).toFixed(2)}
Y:	Position: ${(-this.y).toFixed(1)}	←	Velocity: ${(Math.abs(this.vy) < 0.01 ? \"0.00\" : (this.vy).toFixed(1))}	←	Acceleration: ${(this.ay).toFixed(2)}

\n `);\n }\n }\n\n makeStatsEditable() {\n statsDiv.html(`\n Planet #${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:	←	Velocity:	←	Acceleration:
Y:	Position:	←	Velocity:	←	Acceleration:

\n `);\n\n select('#posX').input(() => this.x = parseFloat(select('#posX').value()));\n select('#posY').input(() => this.y = -parseFloat(select('#posY').value()));\n select('#velX').input(() => this.vx = parseFloat(select('#velX').value()));\n select('#velY').input(() => this.vy = parseFloat(select('#velY').value()));\n select('#accX').input(() => this.ax = parseFloat(select('#accX').value()));\n select('#accY').input(() => this.ay = parseFloat(select('#accY').value()));\n }\n\n makeStatsReadOnly() {\n if (select('#posX') && select('#posY') && select('#velX') && select('#velY') && select('#accX') && select('#accY')) {\n this.x = parseFloat(select('#posX').value());\n this.y = -parseFloat(select('#posY').value());\n this.vx = parseFloat(select('#velX').value());\n this.vy = parseFloat(select('#velY').value());\n this.ax = parseFloat(select('#accX').value());\n this.ay = parseFloat(select('#accY').value());\n }\n\n this.updateStats();\n }\n\n\n checkCollision(other) {\n\n let dx = this.x - other.x;\n let dy = this.y - other.y;\n let distance = sqrt(dx * dx + dy * dy);\n return distance < this.radius + other.radius;\n }\n\n resolveCollision(other) {\n // Added collision resolution method\n let dx = other.x - this.x;\n let dy = other.y - this.y;\n let distance = Math.sqrt(dx * dx + dy * dy);\n\n // Calculate the normal and tangent vectors\n let nx = dx / distance;\n let ny = dy / distance;\n let tx = -ny;\n let ty = nx;\n\n // Dot product tangent and normal\n let dpNorm1 = this.vx * nx + this.vy * ny;\n let dpNorm2 = other.vx * nx + other.vy * ny;\n let dpTan1 = this.vx * tx + this.vy * ty;\n let dpTan2 = other.vx * tx + other.vy * ty;\n\n // Conservation of momentum in one dimension\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 // Update velocities\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 // Check if planets are inside each other and adjust positions if necessary\n if (distance < this.radius + other.radius) {\n let overlap = (this.radius + other.radius - distance) / 2;\n let displacementX = nx * overlap;\n let displacementY = ny * overlap;\n\n this.x -= displacementX;\n this.y -= displacementY;\n other.x += displacementX;\n other.y += displacementY;\n }\n\n\n // Update angles\n this.angle = atan2(-this.vy, this.vx);\n other.angle = atan2(-other.vy, other.vx);\n }\n}","script.js":"/*\nIt is time to get up off the ground and into the sky.\n\nWe can summarize a huge amount of physics in a single short line:\n\n\"Force accelerates mass.\"\n\nThank you Isaac Newton!\n\nAny push or pull is a force. That includes the famous force that keeps you in your chair:\n\n**Gravity.**\n\nIsaac Newton was the one to figure out that gravity is a force that:\n- pulls you and everything else towards the ground at all times; and\n- controls the motion of the Earth, Moon, and planets through the cosmos.\n\nIncredible insight.\n\nIn prior simulations, we could recreate gravity by programming downwards acceleration on objects.\n\nThat works because force really is just acceleration — at least that's all we can observe.\n\nBut what if we want to move from physics to astrophysics?\n\nThere is no \"down towards the ground\" in space!\n\nHow does the force of gravity work between planets?\n\nNewton figured that out too in his *Law of Universal Gravitation.*\n\nThe basic idea is that every mass in the universe is always pulling on every other mass and is also being pulled.\n\nEvery pair of masses is subject to a gravitational force of *attraction.*\n\nReally!\n\nIt turns out that gravity is actually quite weak, which is why the whole universe hasn't smooshed into one big clump yet.\n\nThe muscles in your legs are enough to push you off the ground — stronger than the gravity of the entire Earth!\n\nAnyway, the basic ingredients to universal gravitation are:\n\n- the masses of the two objects being pulled together\n - more mass means more gravitational force.\n\n- the distance that separates the two objects\n - the farther apart the objects are, the weaker the force of gravity between them.\n\nWhat Newton discovered was the mathematical formula that juggles these elements.\n\nThere is some geometry involved too: the *angle* of the force of gravity can change as two objects move past each other. \n\nYou can imagine an invisible string connecting the centers of two planets, always tugging along the straight line connecting them.\n\nThe updatePlanets() function below handles this in code. Take time to read it in detail.\n\nAs a summary:\n\nThe force of gravity between two objects is the same in both directions — they pull on each other equally.\n\nIt is equal to:\n\nThe *product* of their masses, times a number G, divided by the *square* of the distance between them.\n\nF = (G * m * M) / (d * d)\n\nG is a number that tunes the strength of gravity across the universe to work with our human units.\n\n(It has no special meaning.)\n\n~ ~ ~\n\nWe use that formula to calculate F, which we can then use to calculate acceleration, which adjusts velocity, which adjusts position.\n\nThat's how we'll simulate gravity in code.\n\nThe classic interesting behavior of gravitational force is *orbiting,* \nwhere the force of gravity keeps an object moving in an elliptical path.\n\nThe essence of an orbit is velocity and acceleration pointing in different (nearly perpendicular) directions.\n\nTry to imagine it. If you are traveling North but a string pulls you West, what direction will you face a moment later?\n\nA moment after that?\n\nYou will see this behavior represented as vectors in the simulation here.\n\nStable orbits of planets occur when the velocity of a planet and the force of gravity are in perfect balance.\n\nIf Earth were too close to the Sun so that the gravitational force were much higher,\nit would spiral into the Sun and burn up.\n\nBut if Earth were farther, gravity would be too weak and the Earth would fly off into space.\n\nLikewise with the speed of the Earth. If it were too slow, it would not overcome gravity enough and would again spiral into the Sun.\nToo fast: it would fly off.\n\nPlay with the numbers in the simulation here and observe these behaviors.\n\nYou can try to add more planets too, and work up towards a whole solar system!\n\n*/\n\n\n\n\nlet planets = [];\n\nlet selectedPlanet = null;\n\n// HTML-related stuff for the Stats Panel.\nlet statsDiv;\n\nlet playPauseButton;\n\nlet isPaused = false;\n\nlet isDragging = false;\n\n// For coordinates\nlet yOffset;\n\nlet xOffset;\n\nlet planetImages = {};\n\n// Used for when a Planet image is missing\nlet currentHue = 280;\n\nfunction preload() {\n planetImages[\"Sun\"] = loadImage(\"@asset('sun')\");\n planetImages[\"Mercury\"] = loadImage(\"@asset('mercury')\");\n planetImages[\"Venus\"] = loadImage(\"@asset('venus')\");\n planetImages[\"Earth\"] = loadImage(\"@asset('earth')\");\n planetImages[\"Mars\"] = loadImage(\"@asset('mars')\");\n planetImages[\"Jupiter\"] = loadImage(\"@asset('jupiter')\");\n planetImages[\"Saturn\"] = loadImage(\"@asset('saturn')\");\n planetImages[\"Uranus\"] = loadImage(\"@asset('uranus')\");\n planetImages[\"Neptune\"] = loadImage(\"@asset('neptune')\");\n\n}\n\nfunction setup() {\n frameRate(60);\n createCanvas(windowWidth, windowHeight);\n colorMode(HSL);\n\n yOffset = height / 2;\n xOffset = width / 2;\n\n // Mass values (not accurate, but you can edit!)\n const sunMass = 1000; // Mass of the Sun\n const earthMass = 10; // Mass of the Earth\n\n // Create Sun\n let sun = new Planet(\"Sun\", 0, 0, sunMass, currentHue, 0, 0, 0, planetImages[\"Sun\"], '☀️');\n planets.push(sun);\n\n // Create Earth\n let earth = new Planet(\"Earth\", 300, 0, earthMass, currentHue, 1, 0, 4, planetImages[\"Earth\"], '🌍');\n // We'll shrink down the Earth a little from the default size, using the radius property. \n earth.radius = 50;\n planets.push(earth);\n\n selectedPlanet = earth;\n\n statsDiv = createDiv('');\n statsDiv.id('statsDiv');\n statsDiv.position(10, height + 10);\n\n statsDiv.style('width', 'auto');\n selectedPlanet.updateStats();\n let statsDivWidth = statsDiv.elt.offsetWidth;\n\n playPauseButton = createButton('Pause');\n playPauseButton.id('playPauseButton');\n playPauseButton.position(statsDiv.position().x + statsDivWidth + 100, height + 10);\n playPauseButton.mousePressed(togglePause);\n\n playPauseButton.style('background-color', 'green');\n playPauseButton.style('color', 'white');\n playPauseButton.style('font-size', '20px');\n playPauseButton.style('font-weight', 'bold');\n playPauseButton.style('width', '150px');\n playPauseButton.style('height', '50px');\n}\n\nfunction draw() {\n background(258, 39, 8);\n\n // Move coordinates to the center of the canvas.\n translate(width / 2, height / 2);\n\n // Draw each planet\n for (let planet of planets) {\n // Use an image if one exists...\n if (planet.image) {\n image(planet.image, planet.x - planet.radius, planet.y - planet.radius, planet.radius * 2, planet.radius * 2);\n } else {\n // ...otherwise, draw a circle.\n fill(planet.color);\n ellipse(planet.x, planet.y, planet.radius * 2, planet.radius * 2);\n }\n }\n\n if (!isPaused) {\n updatePlanets(); // Move the planets when the simulation is NOT paused.\n }\n\n\n if (selectedPlanet) {\n selectedPlanet.updateStats();\n\n // Draw the velocity vector of the selected planet in green.\n const velocityVector = createVector(selectedPlanet.vx, selectedPlanet.vy);\n drawArrow(createVector(selectedPlanet.x, selectedPlanet.y), velocityVector, 'lightgreen');\n\n // Draw the acceleration vector in blue.\n const accelerationVector = createVector(selectedPlanet.ax * 20, selectedPlanet.ay * 20); // We scale it larger to make it visible.\n drawArrow(createVector(selectedPlanet.x, selectedPlanet.y), accelerationVector, 'cyan');\n }\n}\n\n//////////////////////////////////////////////////\n// Here's the important physics of this simulation.\n// It calculates and applies the force of gravity between *pairs* of planets.\nfunction updatePlanets() {\n let G = 6.67430; // Change this number to change the strength of gravity.\n\n // We will run the following code for each planet, including the Sun.\n for (let i = 0; i < planets.length; i++) {\n // Placeholders for acceleration that we will add to the planet.\n let ax = 0;\n let ay = 0;\n\n // Now, loop through all the planets again — every planet affects every other one!\n for (let j = 0; j < planets.length; j++) {\n if (i !== j) { // We skip calculating gravity of a planet on itself, which would cause problems.\n // But for all other planets:\n // First we calculate the distance to the other planet using Pythagoras:\n let dx = planets[j].x - planets[i].x;\n let dy = planets[j].y - planets[i].y;\n let distance = sqrt(dx * dx + dy * dy);\n\n // Make sure distance is not zero (like if planets are crashing or glitching through each other).\n if (distance > 0) {\n // This is Newton's formula!\n let force = (G * planets[i].mass * planets[j].mass) / (distance * distance);\n // Since we are dealing with an X-Y grid, we have to do some angle trigonometry.\n let angle = atan2(dy, dx);\n\n // We add acceleration in X- and Y-directions using a = F / m.\n ax += cos(angle) * force / planets[i].mass;\n ay += sin(angle) * force / planets[i].mass;\n }\n }\n }\n\n // Finally, set the planet's acceleration.\n planets[i].ax = ax;\n planets[i].ay = ay;\n }\n\n // And use that acceleration to update velocity,\n // which updates the position.\n for (let planet of planets) {\n planet.vx += planet.ax;\n planet.vy += planet.ay;\n planet.x += planet.vx;\n planet.y += planet.vy;\n }\n}\n/*\n\nWhat I find beautiful about this is that the gravity formula is rather simple — it just tugs two objects together —\nand yet it creates such beautiful cosmic motion.\n\n*/\n\n//////////////////////////////////////////////////\n\n// Click a planet to view its stats:\nfunction mousePressed() {\n for (let planet of planets) {\n // Calculate the distance from the mouse to the planet's center\n let d = dist(mouseX, mouseY, planet.x + xOffset, planet.y + yOffset);\n if (d < planet.radius) {\n selectedPlanet = planet; // Set the selected planet\n selectedPlanet.updateStats(); // Update the stats panel with the selected planet's stats\n break; // Exit the loop once the planet is found\n }\n }\n}\n\n// This function checks collision between every *pair* of Planets. (Think about why it's an outside function, not a method of the Planet class.)\nfunction checkPlanetCollisions() {\n for (let i = 0; i < planets.length; i++) {\n for (let j = i + 1; j < planets.length; j++) {\n let planet1 = planets[i];\n let planet2 = planets[j];\n if (planet1.checkCollision(planet2)) {\n // If two colliding Planets are detected, initiate their collision.\n planet1.resolveCollision(planet2);\n }\n }\n }\n}\n\n\n// This function runs the Play/Pause button.\nfunction togglePause() {\n isPaused = !isPaused;\n playPauseButton.html(isPaused ? 'Play' : 'Pause');\n\n if (isPaused) {\n playPauseButton.addClass('play');\n if (selectedPlanet) {\n selectedPlanet.makeStatsEditable();\n }\n } else {\n playPauseButton.removeClass('play');\n if (selectedPlanet) {\n selectedPlanet.makeStatsReadOnly();\n }\n }\n}\n\n// Draw a grid of 10x10 pixel squares — not called by default, but you can add it back in.\nfunction drawGrid() {\n strokeWeight(1);\n let gridColor = color(200, 0, 80);\n let axisColor = color(0, 0, 0);\n let gridSize = 10;\n\n // Calculate the total grid size, extending offscreen\n let gridWidth = Math.floor(20 * width / gridSize) * gridSize;\n let gridHeight = Math.floor(20 * height / gridSize) * gridSize;\n\n // Align the grid lines with the origin (width/2, groundHeight)\n let originX = Math.floor(0.5 * width / gridSize) * gridSize;\n let originY = Math.floor(0.5 * height / 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 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.01\n const scale = 10;\n push();\n stroke(myColor);\n strokeWeight(1.5); // Make the arrow thinner\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x * scale, vec.y * scale); // Make the arrow longer\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() * scale - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n\n\n\n\n","style.css":"* {\n background-color: #321b32;\n\n}","index.html":"\n\n\n\n \n \n StSS 3.1\n \n\n\n\n\n \n \n\n\n"},"chat_history":[{"code_id":235797,"deleted":0,"sender":"human","input_tokens":null,"id":138125,"message":"make background of all the html elements dark purple","project_id":7448,"created_at":"2025-04-21T16:25:05.147698Z","output_tokens":null},{"code_id":235797,"deleted":0,"sender":"ai","input_tokens":7483,"id":138126,"message":"

\n# Reasoning\nThe request to make all HTML elements have a dark purple background is straightforward. We can achieve this by setting a global CSS rule that applies to all elements using the `*` selector, which targets all HTML elements. This change can be easily implemented in the `style.css` file.\n

\n\n

\n# Answer: \n

\n\nTo make the background of all HTML elements dark purple, we'll update your `style.css` file.\n\n```css\n/* style.css */\n* {\n background-color: #4B0082; /* Dark purple color */\n}\n```\n\n- The `*` selector applies the style to all HTML elements.\n- The `background-color` property is set to dark purple using the hex color code `#4B0082`.","project_id":7448,"created_at":"2025-04-21T16:25:05.875647Z","output_tokens":179}],"assets":[{"project_id":7448,"creator":null,"cloudinary_id":"jbzjpbmgdrihvthxbl2t","deleted":false,"id":71469,"name":"ss","created_at":"2025-04-14T22:00:22.478023Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"v9monl3gqcd7jdhzewxo","deleted":false,"id":70718,"name":"mercury","created_at":"2025-04-11T19:58:43.438133Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"i6exysrb54inn0dbzz5e","deleted":false,"id":70717,"name":"venus","created_at":"2025-04-11T19:58:43.436250Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"rsoiws15wjy50gbdsiiv","deleted":false,"id":70716,"name":"earth","created_at":"2025-04-11T19:58:43.429941Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"dyzkeopx9xzgqdzwhhun","deleted":false,"id":70715,"name":"mars","created_at":"2025-04-11T19:58:43.427910Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"knztmajsviml6ydjrjbx","deleted":false,"id":70714,"name":"jupiter","created_at":"2025-04-11T19:58:43.425790Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"cp7elsfrletlgcrpc2mw","deleted":false,"id":70713,"name":"saturn","created_at":"2025-04-11T19:58:43.415181Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"zkpxbh9u1z2gqqd50rku","deleted":false,"id":70712,"name":"uranus","created_at":"2025-04-11T19:58:43.404751Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"zun3dpkcjgdgd4jwqwc1","deleted":false,"id":70711,"name":"neptune","created_at":"2025-04-11T19:58:43.388431Z","resource_type":"image","tags":null},{"project_id":7448,"creator":null,"cloudinary_id":"m2fnyrzanyad18imd8nr","deleted":false,"id":70710,"name":"sun","created_at":"2025-04-11T19:58:43.302571Z","resource_type":"image","tags":null}],"messages_sent":20,"comments":[],"steps":[]}