Three Body Problem

{"name":"Simulate the Solar System 6B (Three Body Problem)","description":"A beautiful gravitational toy by Kris10.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/j9iir77aehiyy8wmpzz3","view_count":16,"fork_count":0,"expires_at":null,"created_at":"2025-04-14T22:02:07.243826Z","updated_at":"2025-04-14T22:02:07.243827Z","user_id":60,"status":"PUBLIC","parent_id":1670,"id":1685,"user":{"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","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},"code":{"script.js":"let bodies = [];\nlet stars = []; // Array to store star positions\nlet stabilityRating = 100; // Initial stability rating\nlet distanceFluctuations = []; // To store distance changes\nlet initialEnergy = 0; // Initial total energy of the system\nlet initialAngularMomentum = 0; // Initial total angular momentum of the system\nlet timeSteps = 0; // Counter to track simulation steps\nlet stabilityRatings = []; // Array to store recent stability ratings\nconst MAX_RATINGS = 50;\nlet panX = 0;\nlet panY = 0;\n\n// UI elements\nlet inputs = [];\nlet simulationStarted = false;\n\nfunction setup() {\n createCanvas(800, 600).position(0, 100);\n\n // Generate star positions\n for (let i = 0; i < 200; i++) {\n stars.push({ x: random(width), y: random(height) });\n }\n\n // Initial positions and velocities for more circular orbits\n let initialConditions = [\n { x: 300, y: 300, mass: 20, vx: 0, vy: 1.5 },\n { x: 500, y: 300, mass: 10, vx: 0, vy: -1.5 },\n { x: 400, y: 400, mass: 15, vx: 1.5, vy: 0 }\n ];\n\n // Create input elements for initial conditions with labels\n let initialConditionsDiv = select('#initial-conditions');\n for (let i = 0; i < initialConditions.length; i++) {\n let body = initialConditions[i];\n initialConditionsDiv.child(createP(`BODY ${i + 1}`).style('color', '#fff')); // Label for each body\n let xInput = createInput(body.x.toString()).size(50).parent(initialConditionsDiv);\n let yInput = createInput(body.y.toString()).size(50).parent(initialConditionsDiv);\n let massInput = createInput(body.mass.toString()).size(50).parent(initialConditionsDiv);\n let vxInput = createInput(body.vx.toString()).size(50).parent(initialConditionsDiv);\n let vyInput = createInput(body.vy.toString()).size(50).parent(initialConditionsDiv);\n inputs.push({ xInput, yInput, massInput, vxInput, vyInput });\n }\n\n select('#start-simulation').mousePressed(startSimulation);\n\n let toggleButton = select('#toggle-panel');\n toggleButton.mousePressed(() => {\n let panel = select('#initial-conditions');\n if (panel.style('display') === 'none') {\n panel.style('display', 'block');\n toggleButton.html('Hide Initial Conditions');\n } else {\n panel.style('display', 'none');\n toggleButton.html('Show Initial Conditions');\n }\n });\n\n background(0); // Dark background for a space-like appearance\n}\n\nfunction startSimulation() {\n panX = 0;\n panY = 0;\n simulationStarted = true;\n\n // Clear previous bodies and trails\n bodies = [];\n\n for (let input of inputs) {\n let x = float(input.xInput.value());\n let y = float(input.yInput.value());\n let mass = float(input.massInput.value());\n let vx = float(input.vxInput.value());\n let vy = float(input.vyInput.value());\n bodies.push({ x, y, mass, vx, vy, trail: [] });\n }\n\n // Calculate initial energy and angular momentum\n initialEnergy = calculateTotalEnergy();\n initialAngularMomentum = calculateTotalAngularMomentum();\n\n timeSteps = 0; // Reset time steps\n distanceFluctuations = []; // Reset distance fluctuations\n loop(); // Restart the draw loop\n\n // Hide the initial conditions panel but keep the control panel visible\n select('#initial-conditions').style('display', 'none');\n select('#toggle-panel').html('Show Initial Conditions');\n}\n\nfunction draw() {\n // Clear the background\n background(0);\n\n // Draw the starry background\n drawStars();\n\n if (!simulationStarted) {\n displayInitialPositions();\n } else {\n // Handle panning with WASD keys\n handlePan();\n\n // Calculate center of mass and translate canvas\n let centerOfMass = calculateCenterOfMass();\n translate(width / 2 - centerOfMass.x + panX, height / 2 - centerOfMass.y + panY);\n\n // Update bodies and draw everything\n updateBodies();\n drawGravitationalFields();\n drawBodies();\n drawTrails();\n calculateStability();\n updateStabilityDisplay();\n\n // Increment time steps\n timeSteps++;\n }\n}\n\nfunction handlePan() {\n if (keyIsDown(87)) { // W key\n panY += 5;\n }\n if (keyIsDown(83)) { // S key\n panY -= 5;\n }\n if (keyIsDown(65)) { // A key\n panX += 5;\n }\n if (keyIsDown(68)) { // D key\n panX -= 5;\n }\n}\n\nfunction drawStars() {\n noStroke();\n fill(255); // White color for stars\n for (let star of stars) {\n ellipse(star.x, star.y, 2, 2); // Draw each star as a small circle\n }\n}\n\nfunction displayInitialPositions() {\n noStroke();\n for (let input of inputs) {\n let x = float(input.xInput.value());\n let y = float(input.yInput.value());\n let mass = float(input.massInput.value());\n let vx = float(input.vxInput.value());\n let vy = float(input.vyInput.value());\n\n // Draw celestial body\n fill(255, 204, 0); // Yellow color\n ellipse(x, y, mass * 2, mass * 2); // Draw bodies as circles proportional to their mass\n\n // Draw velocity vector as an arrow\n stroke(255, 0, 0); // Red color for velocity vector\n line(x, y, x + vx * 20, y + vy * 20); // Arrow shaft\n drawArrowhead(x, y, vx, vy); // Arrowhead\n }\n}\n\nfunction drawArrowhead(x, y, vx, vy) {\n let angle = atan2(vy, vx);\n let arrowSize = 7;\n fill(255, 0, 0); // Red color for arrowhead\n push();\n translate(x + vx * 20, y + vy * 20);\n rotate(angle);\n beginShape();\n vertex(0, 0);\n vertex(-arrowSize, arrowSize / 2);\n vertex(-arrowSize, -arrowSize / 2);\n endShape(CLOSE);\n pop();\n}\n\nfunction drawBodies() {\n noStroke();\n for (let body of bodies) {\n fill(255, 204, 0); // Yellow color for celestial bodies\n ellipse(body.x, body.y, body.mass * 2, body.mass * 2); // Draw bodies as circles proportional to their mass\n }\n}\n\nfunction drawGravitationalFields() {\n stroke(0, 255, 0, 100); // Green color with transparency for gravitational field lines\n for (let i = 0; i < bodies.length; i++) {\n for (let j = i + 1; j < bodies.length; j++) {\n let bodyA = bodies[i];\n let bodyB = bodies[j];\n\n // Draw a line between bodyA and bodyB\n line(bodyA.x, bodyA.y, bodyB.x, bodyB.y);\n }\n }\n}\n\nfunction drawTrails() {\n stroke(255, 255, 255, 100); // White color with transparency for trails\n noFill();\n for (let body of bodies) {\n beginShape();\n for (let pos of body.trail) {\n vertex(pos.x, pos.y);\n }\n endShape();\n }\n}\n\nfunction updateBodies() {\n let G = 18; // Gravitational constant for simplicity\n\n for (let i = 0; i < bodies.length; i++) {\n let ax = 0;\n let ay = 0;\n\n for (let j = 0; j < bodies.length; j++) {\n if (i != j) {\n let bodyA = bodies[i];\n let bodyB = bodies[j];\n\n let dx = bodyB.x - bodyA.x;\n let dy = bodyB.y - bodyA.y;\n let distance = sqrt(dx * dx + dy * dy);\n let force = (G * bodyA.mass * bodyB.mass) / (distance * distance);\n let angle = atan2(dy, dx);\n\n ax += cos(angle) * force / bodyA.mass;\n ay += sin(angle) * force / bodyA.mass;\n }\n }\n\n bodies[i].vx += ax;\n bodies[i].vy += ay;\n }\n\n for (let body of bodies) {\n body.x += body.vx;\n body.y += body.vy;\n\n // Update the trail\n body.trail.push({ x: body.x, y: body.y });\n if (body.trail.length > 100) { // Limit trail length to 100 points\n body.trail.shift();\n }\n }\n}\n\nfunction calculateCenterOfMass() {\n let totalMass = 0;\n let centerX = 0;\n let centerY = 0;\n\n for (let body of bodies) {\n totalMass += body.mass;\n centerX += body.x * body.mass;\n centerY += body.y * body.mass;\n }\n\n return { x: centerX / totalMass, y: centerY / totalMass };\n}\n\nfunction calculateTotalEnergy() {\n let totalEnergy = 0;\n let G = 18; // Gravitational constant\n\n for (let i = 0; i < bodies.length; i++) {\n let kineticEnergy = 0.5 * bodies[i].mass * (bodies[i].vx * bodies[i].vx + bodies[i].vy * bodies[i].vy);\n let potentialEnergy = 0;\n\n for (let j = 0; j < bodies.length; j++) {\n if (i != j) {\n let dx = bodies[j].x - bodies[i].x;\n let dy = bodies[j].y - bodies[i].y;\n let distance = sqrt(dx * dx + dy * dy);\n potentialEnergy -= (G * bodies[i].mass * bodies[j].mass) / distance;\n }\n }\n\n totalEnergy += kineticEnergy + potentialEnergy / 2; // Potential energy is shared between pairs\n }\n\n return totalEnergy;\n}\n\nfunction calculateTotalAngularMomentum() {\n let totalAngularMomentum = 0;\n\n for (let body of bodies) {\n totalAngularMomentum += body.mass * (body.x * body.vy - body.y * body.vx);\n }\n\n return totalAngularMomentum;\n}\n\nfunction calculateStability() {\n let currentEnergy = calculateTotalEnergy();\n let currentAngularMomentum = calculateTotalAngularMomentum();\n\n // Calculate energy and angular momentum differences\n let energyDifference = abs(currentEnergy - initialEnergy);\n let angularMomentumDifference = abs(currentAngularMomentum - initialAngularMomentum);\n\n // Calculate distance fluctuations and check for overlaps\n let distanceFluctuation = 0;\n let overlapDetected = false;\n for (let i = 0; i < bodies.length; i++) {\n for (let j = i + 1; j < bodies.length; j++) {\n let bodyA = bodies[i];\n let bodyB = bodies[j];\n\n let dx = bodyB.x - bodyA.x;\n let dy = bodyB.y - bodyA.y;\n let distance = sqrt(dx * dx + dy * dy);\n\n // Check for overlap\n if (distance < (bodyA.mass + bodyB.mass)) {\n overlapDetected = true;\n }\n\n if (!distanceFluctuations[i]) distanceFluctuations[i] = [];\n if (!distanceFluctuations[i][j]) distanceFluctuations[i][j] = [];\n\n distanceFluctuations[i][j].push(distance);\n if (distanceFluctuations[i][j].length > 100) { // Limit number of stored distances\n distanceFluctuations[i][j].shift();\n }\n\n let maxDistance = Math.max(...distanceFluctuations[i][j]);\n let minDistance = Math.min(...distanceFluctuations[i][j]);\n distanceFluctuation += maxDistance - minDistance;\n }\n }\n\n // Calculate stability rating based on energy, angular momentum, distance fluctuations, and overlap\n let stabilityRating = 0;\n if (!overlapDetected) {\n stabilityRating = max(0, 100 - (energyDifference * 0.1 + angularMomentumDifference * 0.1 + distanceFluctuation * 0.1));\n }\n\n // Add the current stability rating to the array\n stabilityRatings.push(stabilityRating);\n if (stabilityRatings.length > MAX_RATINGS) {\n stabilityRatings.shift(); // Remove the oldest rating if we exceed the max number\n }\n}\n\nfunction updateStabilityDisplay() {\n // Calculate the moving average of the stability ratings\n let averageStability = stabilityRatings.reduce((sum, rating) => sum + rating, 0) / stabilityRatings.length;\n select('#stability').html(averageStability.toFixed(2));\n}","style.css":"body {\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n height: 100vh;\n background-color: #000;\n /* Black background to match canvas */\n}\n\ncanvas {\n border: 1px solid #fff;\n /* White border for the canvas */\n}\n\np {\n color: #fff;\n /* White text color */\n margin: 5px;\n}\n\n#control-panel {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: rgba(0, 0, 0, 0.8);\n padding: 10px;\n border: 1px solid #fff;\n z-index: 10;\n /* Ensures the control panel is rendered above the canvas */\n}\n\n#stability-panel {\n position: absolute;\n top: 10px;\n left: 350px;\n background-color: rgba(0, 0, 0, 0.8);\n padding: 10px;\n border: 1px solid #fff;\n z-index: 10;\n /* Ensures the stability panel is rendered above the canvas */\n}\n\nbutton {\n margin: 5px;\n}\n\n#toggle-panel {\n display: block;\n margin-bottom: 10px;\n}\n\n#initial-conditions input {\n margin: 5px;\n}\n\n#instructions-box {\n position: absolute;\n top: 10px;\n left: 500px;\n /* Adjust as necessary to position correctly */\n background-color: rgba(0, 0, 0, 0.8);\n padding: 10px;\n border: 1px solid #fff;\n z-index: 10;\n /* Ensures the instructions box is rendered above the canvas */\n color: #fff;\n /* White text color */\n}\n\n","index.html":"\n\n\n\n \n \n Three Body Problem\n \n\n\n\n

\n \n

Stability Rating:

100

WASD to pan around

\n \n \n\n\n"},"chat_history":[],"assets":[{"project_id":1685,"created_at":"2025-04-12T17:04:44.111830Z","resource_type":"image","id":70719,"cloudinary_id":"j9iir77aehiyy8wmpzz3","name":"ss","deleted":false}],"messages_sent":0,"comments":[{"content":"AWSOME!","id":1176,"user_id":411,"user":{"username":"slam_iced","id":411,"password_hash":null,"updated_at":"2025-03-10T21:17:52.998353Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"9b0597df-c1fb-40be-836a-aa18c5f7ab80","created_at":"2025-03-10T21:17:52.998350Z","reset_token":null,"stripe_customer_id":null,"seats":0},"project_id":1685,"created_at":"2025-05-05T19:09:32.641850Z","updated_at":"2025-05-05T19:09:32.641851Z"}],"steps":[{"complete":false,"step_number":0,"updated_at":"2024-05-31T00:02:12.020704","id":9287,"instruction":"Add visual lines to represent the gravitational fields between the celestial bodies.","title":"Visualize Gravitational Fields","created_at":"2024-05-30T15:58:34.626383","project_id":1685},{"complete":false,"step_number":1,"updated_at":"2024-05-31T00:02:12.020879","id":9288,"instruction":"Allow users to add and interact with celestial bodies in the simulation.","title":"Interactive Celestial Bodies","created_at":"2024-05-30T15:58:34.626455","project_id":1685},{"complete":true,"step_number":3,"updated_at":"2024-05-31T00:02:12.021103","id":9289,"instruction":"Enable users to customize parameters such as mass, initial velocity, and gravitational constant.","title":"Customizable Parameters","created_at":"2024-05-30T15:58:34.626547","project_id":1685},{"complete":false,"step_number":4,"updated_at":"2024-05-31T00:02:12.021230","id":9290,"instruction":"Show relevant information about the celestial bodies and their interactions, such as velocities, accelerations, and forces.","title":"Information Display","created_at":"2024-05-30T15:58:34.626591","project_id":1685},{"complete":false,"step_number":5,"updated_at":"2024-05-31T00:02:12.021324","id":9291,"instruction":"Provide visual representations of the data generated during the simulation, such as graphs showing the trajectories and energies of the bodies.","title":"Data Visualization","created_at":"2024-05-30T15:58:34.626636","project_id":1685},{"complete":false,"step_number":6,"updated_at":"2024-05-31T00:02:12.021405","id":9292,"instruction":"Include links to educational materials about gravitational physics and celestial mechanics to enhance the learning experience.","title":"Educational Resources","created_at":"2024-05-30T15:58:34.626687","project_id":1685}]}