Physics Fun with MatterJS

{"name":"[Template] Physics Fun with MatterJS","description":"Experience the magic of physics with this interactive demo powered by MatterJS! Test out different values for physics properties using the sliders, add to the demo with new shapes and other ideas, or even turn it into a game. ","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/h0pajob4smflo2re8q2a","view_count":9,"fork_count":5,"expires_at":null,"created_at":"2025-10-21T00:23:58.417243Z","updated_at":"2025-10-21T00:23:58.417244Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":2306,"user":{"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active","photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200},"code":{"script.js":"/* \n🚀 PHYSICS WITH MATTER.JS TEMPLATE\n--------------------------------\nWelcome to your physics playground!\n\n💡 WHAT YOU CAN DO:\n1️⃣ Click anywhere on the grey canvas to drop a new box.\n2️⃣ Move the sliders to change gravity, friction, and bounciness.\n3️⃣ Press the “Reset” button to start fresh.\n\n💡 IDEAS TO EXTEND:\n🟣 Add more shapes (try circles or triangles!)\n🏗️ Add more ramps or moving platforms.\n🌪️ Make the gravity go sideways or flip upside-down.\n🐸 Make it a little game — like “catch the falling box!”\n\nThis file uses:\n🟢 p5.js → for drawing on the canvas\n🟣 Matter.js → for realistic physics (gravity, collisions, etc.)\n*/\n\n// 🧩 ARRAYS to store our physics objects\nlet circles = []; // We can use this later for round objects\nlet boxes = []; // All the rectangles (boxes) go here\nlet ramps = []; // Angled platforms that boxes slide down\nlet colors = []; // Keeps track of the color for each box\n\n// ⚙️ Matter.js basic setup pieces for the physics engine\nlet Engine = Matter.Engine,\n World = Matter.World,\n Bodies = Matter.Bodies,\n Mouse = Matter.Mouse,\n MouseConstraint = Matter.MouseConstraint,\n Runner = Matter.Runner;\n\n// 🧠 These will hold our physics world and engine\nlet engine;\nlet world;\nlet runner;\n\n// 🎛️ Sliders and buttons from the HTML page\nlet gravitySlider;\nlet frictionSlider;\nlet bouncinessSlider;\n\nfunction setup() {\n // 🖼️ Create the drawing area (canvas)\n canvas = createCanvas(windowWidth / 1.2, windowHeight / 1.5);\n background(220);\n\n // 🧠 Create the physics engine and world\n engine = Engine.create();\n world = engine.world;\n\n // 🧱 Add walls and ramps to the world\n createBoundaries();\n createRamps();\n\n // 🎁 Add some boxes when the program starts\n spawnInitialObjects();\n\n // 🖱️ Let the player grab and move things with the mouse\n setupMouseControl();\n\n // ⏱️ Start the physics engine\n runner = Runner.create();\n Runner.run(runner, engine);\n\n // 🧮 Grab the slider and button elements from the html\n gravitySlider = document.getElementById('gravitySlider');\n frictionSlider = document.getElementById('frictionSlider');\n bouncinessSlider = document.getElementById('bouncinessSlider');\n\n // 🧼 Add the “Reset” button behavior\n document.getElementById('resetButton').addEventListener('click', resetSimulation);\n}\n\nfunction draw() {\n background(220);\n\n // ✏️ Update the physics world based on slider values\n updateGravity();\n updateFriction();\n updateBounciness();\n\n // 🎨 Draw everything on the canvas\n drawObjects();\n}\n\n// 🟣 Creates a small bouncing circle (not used much yet)\nfunction createCircle(x, y) {\n let circle = Bodies.circle(x, y, 10, { restitution: 0.8 });\n circles.push(circle);\n World.add(world, circle);\n}\n\n// 🧱 Makes walls and ground that keep objects inside the screen\nfunction createBoundaries() {\n let ground = Bodies.rectangle(width / 2, height - 10, width, 20, { isStatic: true });\n let ceiling = Bodies.rectangle(width / 2, 10, width, 20, { isStatic: true });\n let leftWall = Bodies.rectangle(10, height / 2, 20, height, { isStatic: true });\n let rightWall = Bodies.rectangle(width - 10, height / 2, 20, height, { isStatic: true });\n World.add(world, [ground, ceiling, leftWall, rightWall]);\n}\n\n// 🛝 Adds angled ramps for the boxes to slide down\nfunction createRamps() {\n let ramp1 = Bodies.rectangle(width / 4, height - 100, 150, 20, { isStatic: true, angle: -PI / 6 });\n let ramp2 = Bodies.rectangle(3 * width / 4, height - 150, 150, 20, { isStatic: true, angle: PI / 6 });\n ramps.push(ramp1, ramp2);\n World.add(world, [ramp1, ramp2]);\n}\n\n// 🎁 Spawns some boxes in the center when the program starts\nfunction spawnInitialObjects() {\n for (let i = 0; i < 3; i++) {\n createBox(random(width / 3, 2 * width / 3), random(height / 3, 2 * height / 3));\n }\n}\n\n// 🧊 Makes a new colorful box at the given position\nfunction createBox(x, y) {\n let box = Bodies.rectangle(x, y, 20, 20, { restitution: 0.8 });\n boxes.push(box);\n colors.push(color(random(255), random(255), random(255))); // random color\n World.add(world, box);\n}\n\n// 🖱️ Lets the player click and drag physics objects\nfunction setupMouseControl() {\n let mouse = Mouse.create(canvas.elt);\n let mouseParams = {\n mouse: mouse,\n constraint: {\n stiffness: 0.2,\n render: { visible: false }\n }\n };\n let mConstraint = MouseConstraint.create(engine, mouseParams);\n World.add(world, mConstraint);\n}\n\n// 🌍 Updates gravity in the world using the slider value\nfunction updateGravity() {\n engine.world.gravity.y = gravitySlider.value;\n}\n\n// 🎨 Draws everything on the screen\nfunction drawObjects() {\n drawBoundaries();\n drawRamps();\n\n // Draw each box with its color\n for (let i = 0; i < boxes.length; i++) {\n fill(colors[i]);\n stroke(0);\n rectMode(CENTER);\n rect(boxes[i].position.x, boxes[i].position.y, 20, 20);\n }\n}\n\n// 🧱 Draws the walls and floor\nfunction drawBoundaries() {\n fill(150);\n rectMode(CENTER);\n rect(width / 2, height - 10, width, 20); // Ground\n rect(width / 2, 10, width, 20); // Ceiling\n rect(10, height / 2, 20, height); // Left wall\n rect(width - 10, height / 2, 20, height); // Right wall\n}\n\n// 🛝 Draws the ramps\nfunction drawRamps() {\n fill(100);\n for (let ramp of ramps) {\n push();\n translate(ramp.position.x, ramp.position.y);\n rotate(ramp.angle);\n rectMode(CENTER);\n rect(0, 0, 150, 20);\n pop();\n }\n}\n\n// 🔁 Removes all boxes and starts again\nfunction resetSimulation() {\n for (let box of boxes) {\n World.remove(world, box);\n }\n boxes = [];\n colors = [];\n spawnInitialObjects();\n}\n\n// 🖱️ When the player clicks, make a new box at the mouse\nfunction mousePressed() {\n // Don’t add boxes if the mouse is outside the canvas\n if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) return;\n\n // Keep only 20 boxes — remove the oldest one if needed\n if (boxes.length >= 20) {\n let removedBox = boxes.shift();\n World.remove(world, removedBox);\n colors.shift();\n }\n\n // Add a new colorful box at the mouse position\n createBox(mouseX, mouseY);\n}\n\n// 🧲 Updates the friction (slipperiness)\nfunction updateFriction() {\n let frictionValue = parseFloat(frictionSlider.value);\n for (let box of boxes) box.friction = frictionValue;\n for (let circle of circles) circle.friction = frictionValue;\n}\n\n// 🪩 Updates the bounciness (how much things bounce)\nfunction updateBounciness() {\n let restitutionValue = parseFloat(bouncinessSlider.value);\n for (let box of boxes) box.restitution = restitutionValue;\n for (let circle of circles) circle.restitution = restitutionValue;\n}\n","style.css":"/* style.css */\nh4 {\n margin-bottom: 5px; /* Reduce the space below the h4 element */\n}\n\np {\n margin-top: 5px; /* Reduce the space above the p elements */\n margin-bottom: 5px; /* Reduce the space below the h4 element */\n}","index.html":"\n\n\n\n Physics Fun with MatterJS\n \n \n \n\n\n\n

Physics Library - MatterJS

Click to spawn new objects.

Video game collisions and interactions use physics like this. Can you think of any examples?

\n Gravity:\n \n
\n Friction:\n \n
\n Bounciness: \n \n
\n \n \n\n\n"},"chat_history":[{"sender":"human","deleted":0,"code_id":287969,"input_tokens":null,"id":175239,"message":"add a friction slider","project_id":2306,"created_at":"2025-10-21T00:00:35.871177Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":287969,"input_tokens":3659,"id":175240,"message":"

\n# Reasoning\nAdding a friction slider is a straightforward task and fits well within the current project scope. It involves adding a new slider element in the HTML file and updating the Matter.js physics properties in the JavaScript file to adjust the friction of objects dynamically.\n

\n\n

\n# Answer: \n

\n\nWe can add a friction slider to your project. Let's update the HTML and JavaScript files to include this feature.\n\n1. First, we'll add a friction slider to the HTML file.\n\n```html\n\n\n\n\n Physics Fun with MatterJS\n \n \n \n\n\n\n

Physics Library - MatterJS

Click to spawn new objects.

Video game collisions and interactions use physics like this. Can you think of any examples?

\n Gravity:\n \n
\n Friction: \n \n
\n \n \n\n\n\n```\n\n2. Next, we'll update the JavaScript file to use the friction slider.\n\n```javascript\n// script.js\nlet frictionSlider;\n```\n\n```javascript\n// script.js\nfunction setup() {\n canvas = createCanvas(windowWidth / 1.2, windowHeight / 1.5);\n background(220);\n\n // Initialize Matter.js engine and world\n engine = Engine.create();\n world = engine.world;\n\n // Create boundaries and ramps\n createBoundaries();\n createRamps();\n spawnInitialObjects();\n\n // Add mouse control\n setupMouseControl();\n\n // Create a runner and run the engine\n runner = Runner.create();\n Runner.run(runner, engine);\n\n // Get the sliders\n gravitySlider = document.getElementById('gravitySlider');\n frictionSlider = document.getElementById('frictionSlider'); // Get the friction slider element\n\n // Add reset button functionality\n document.getElementById('resetButton').addEventListener('click', resetSimulation);\n}\n```\n\n```javascript\n// script.js\nfunction updateFriction() {\n // Update friction based on slider value\n let frictionValue = parseFloat(frictionSlider.value);\n for (let box of boxes) {\n box.friction = frictionValue;\n }\n for (let circle of circles) {\n circle.friction = frictionValue;\n }\n}\n```\n\n```javascript\n// script.js\nfunction draw() {\n background(220);\n updateGravity();\n updateFriction(); // Call the function to update friction\n drawObjects();\n}\n```\n\n### Explanation:\n- **HTML Update:** We added a new slider for friction control with an ID `frictionSlider`.\n- **JavaScript Variables:** Added a global variable `frictionSlider` to access the slider.\n- **Setup Function:** Updated to retrieve the friction slider element.\n- **Friction Update Function:** Added a function to update the friction of all boxes and circles based on the slider's value.\n- **Draw Function:** Integrated the friction update function to be called every frame.\n\nNow, you have a friction slider that can dynamically adjust the friction in your simulation!","project_id":2306,"created_at":"2025-10-21T00:00:36.142334Z","output_tokens":869},{"sender":"human","deleted":0,"code_id":287979,"input_tokens":null,"id":175241,"message":"add a bouncines slider","project_id":2306,"created_at":"2025-10-21T00:02:22.882096Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":287979,"input_tokens":3814,"id":175242,"message":"

\n# Reasoning\nAdding a bounciness slider is a reasonable request and fits within the project's scope. It involves adding another slider to the HTML file for restitution (bounciness) and updating the restitution of the objects dynamically in the JavaScript file.\n

\n\n

\n# Answer: \n

\n\nWe can add a bounciness slider to your project. Let's update the HTML and JavaScript files to include this feature.\n\n1. First, we'll add a bounciness slider to the HTML file.\n\n```html\n\n\n\n\n Physics Fun with MatterJS\n \n \n \n\n\n\n

Physics Library - MatterJS

Click to spawn new objects.

Video game collisions and interactions use physics like this. Can you think of any examples?

\n Gravity:\n \n
\n Friction:\n \n
\n Bounciness: \n \n
\n \n \n\n\n\n```\n\n2. Next, we'll update the JavaScript file to use the bounciness slider.\n\n```javascript\n// script.js\nlet bouncinessSlider;\n```\n\n```javascript\n// script.js\nfunction setup() {\n canvas = createCanvas(windowWidth / 1.2, windowHeight / 1.5);\n background(220);\n\n // Initialize Matter.js engine and world\n engine = Engine.create();\n world = engine.world;\n\n // Create boundaries and ramps\n createBoundaries();\n createRamps();\n spawnInitialObjects();\n\n // Add mouse control\n setupMouseControl();\n\n // Create a runner and run the engine\n runner = Runner.create();\n Runner.run(runner, engine);\n\n // Get the sliders\n gravitySlider = document.getElementById('gravitySlider');\n frictionSlider = document.getElementById('frictionSlider');\n bouncinessSlider = document.getElementById('bouncinessSlider'); // Get the bounciness slider element\n\n // Add reset button functionality\n document.getElementById('resetButton').addEventListener('click', resetSimulation);\n}\n```\n\n```javascript\n// script.js\nfunction updateBounciness() {\n // Update bounciness based on slider value\n let restitutionValue = parseFloat(bouncinessSlider.value);\n for (let box of boxes) {\n box.restitution = restitutionValue;\n }\n for (let circle of circles) {\n circle.restitution = restitutionValue;\n }\n}\n```\n\n```javascript\n// script.js\nfunction draw() {\n background(220);\n updateGravity();\n updateFriction();\n updateBounciness(); // Call the function to update bounciness\n drawObjects();\n}\n```\n\n### Explanation:\n- **HTML Update:** Added a new slider for bounciness control with an ID `bouncinessSlider`.\n- **JavaScript Variables:** Added a global variable `bouncinessSlider` to access the slider.\n- **Setup Function:** Updated to retrieve the bounciness slider element.\n- **Bounciness Update Function:** Added a function to update the restitution of all boxes and circles based on the slider's value.\n- **Draw Function:** Integrated the bounciness update function to be called every frame.\n\nNow, you have a bounciness slider that can dynamically adjust the restitution (bounciness) in your simulation!","project_id":2306,"created_at":"2025-10-21T00:02:23.252235Z","output_tokens":940},{"sender":"human","deleted":0,"code_id":287989,"input_tokens":null,"id":175243,"message":"less space between the h4 and ps","project_id":2306,"created_at":"2025-10-21T00:03:50.487179Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":287989,"input_tokens":3971,"id":175244,"message":"

\n# Reasoning\nTo reduce the space between the `

` and `
` elements, we can adjust the CSS file to modify the margin and padding properties of these elements. This is an easy adjustment that fits well within the project scope.\n

\n\n

\n# Answer: \n

\n\nWe can reduce the space by adding styles to the CSS file. Let me show you how to do that.\n\n```css\n/* style.css */\nh4 {\n margin-bottom: 5px; /* Reduce the space below the h4 element */\n}\n\np {\n margin-top: 5px; /* Reduce the space above the p elements */\n}\n```\n\n### Explanation:\n- **`h4` Margin:** Reduced the margin-bottom of the `

` element to 5 pixels.\n- `p` Margin: Reduced the margin-top of the `
` elements to 5 pixels.\n\nThis change should decrease the space between the title and the paragraphs. Add this CSS to your `style.css` file to see the effect!","project_id":2306,"created_at":"2025-10-21T00:03:50.789680Z","output_tokens":221},{"sender":"server_script","deleted":0,"code_id":288000,"input_tokens":null,"id":175245,"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n\tphysics_cover = loadImage(\"@asset('physics_cover')\");\n}\n```","project_id":2306,"created_at":"2025-10-21T00:08:22.817317Z","output_tokens":null},{"sender":"server_script","deleted":0,"code_id":288000,"input_tokens":null,"id":175246,"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n\tcover2 = loadImage(\"@asset('cover2')\");\n}\n```","project_id":2306,"created_at":"2025-10-21T00:23:50.989392Z","output_tokens":null}],"assets":[{"name":"cover2","created_at":"2025-10-21T00:23:50.405636Z","resource_type":"image","tags":[],"project_id":2306,"creator":"kris10","cloudinary_id":"h0pajob4smflo2re8q2a","deleted":false,"id":87312},{"name":"physics_cover","created_at":"2025-10-21T00:08:22.226313Z","resource_type":"image","tags":[],"project_id":2306,"creator":"kris10","cloudinary_id":"aw85rkad6e5aox5idvm0","deleted":false,"id":87311}],"messages_sent":24,"comments":[],"steps":[]}

Physics Library - MatterJS

Physics Library - MatterJS

Physics Library - MatterJS

` and `` elements, we can adjust the CSS file to modify the margin and padding properties of these elements. This is an easy adjustment that fits well within the project scope.\n

Load your new image into your code:

Load your new image into your code:

` and `
` elements, we can adjust the CSS file to modify the margin and padding properties of these elements. This is an easy adjustment that fits well within the project scope.\n