Inspiration
The Coding Train’s tutorials on Matter.js, particularly on “Adding More Forces” and “Collision Events,” provided the foundation for this project. The tutorials demonstrated how applying varied forces to objects and managing their interactions through collision events can produce compelling visual dynamics. This inspired me to experiment with these concepts by creating a controlled environment where these physics phenomena could be observed and manipulated.
Sketch
Full Code
// Module aliases const { Engine, Render, Runner, World, Bodies, Body, Events, Mouse, MouseConstraint } = Matter; // Create an engine const engine = Engine.create(); // Create a renderer const render = Render.create({ element: document.getElementById('canvas-container'), engine: engine, options: { width: 800, height: 600, wireframes: false } }); // Create ground, roof, and walls const ground = Bodies.rectangle(400, 590, 810, 40, { isStatic: true, render: { fillStyle: 'brown' } }); const roof = Bodies.rectangle(400, 10, 810, 40, { isStatic: true, render: { fillStyle: 'gray' } }); const leftWall = Bodies.rectangle(0, 300, 40, 600, { isStatic: true, render: { fillStyle: 'gray' } }); const rightWall = Bodies.rectangle(800, 300, 40, 600, { isStatic: true, render: { fillStyle: 'gray' } }); // Create a box const box = Bodies.rectangle(400, 200, 80, 80, { restitution: 0.5 }); // Add all of the bodies to the world World.add(engine.world, [box, ground, leftWall, rightWall, roof]); // Add mouse control const mouse = Mouse.create(render.canvas); const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { render: { visible: false } } }); World.add(engine.world, mouseConstraint); // Create runner const runner = Runner.create(); // Run the engine Runner.run(runner, engine); // Run the renderer Render.run(render); // Apply a continuous upward force every update Events.on(engine, 'beforeUpdate', function(event) { // Apply force only if the simulation is active if (!mouseConstraint.mouse.button) { Body.applyForce(box, { x: box.position.x, y: box.position.y }, { x: 0, y: -0.05 }); } }); // Collision events for aesthetic purposes Events.on(engine, 'collisionStart', function(event) { const pairs = event.pairs; pairs.forEach(pair => { const colors = ['#FF4136', '#0074D9', '#2ECC40', '#FF851B', '#7FDBFF']; pair.bodyA.render.fillStyle = colors[Math.floor(Math.random() * colors.length)]; pair.bodyB.render.fillStyle = colors[Math.floor(Math.random() * colors.length)]; }); });
What is Matter.js?
Matter.js is an open-source library that facilitates the simulation of physical systems, providing tools to create objects that behave according to the laws of physics within a digital environment. It is perfect for developing games, educational simulations, and interactive graphics.
Key Functionalities & Code Breakdown
1. Setting Up the Environment
The initial step involves setting up Matter.js with a rendering engine and a physics engine, which are crucial for running any physics-based simulation.
const engine = Engine.create(); const render = Render.create({ element: document.getElementById('canvas-container'), engine: engine, options: { width: 800, height: 600, wireframes: false } });
2. Creating and Controlling Bodies
A singular box is created, bounded by static walls that prevent it from exiting the viewport. The simplicity of the setup allows for focused observation of physical interactions.
const box = Bodies.rectangle(400, 200, 80, 80, { restitution: 0.5 }); const ground = Bodies.rectangle(400, 590, 810, 40, { isStatic: true });
3. Applying Forces
Reflecting on The Coding Train’s approach to adding dynamism through forces, a continuous upward force counters gravity, enhancing the box’s interaction with its environment.
Events.on(engine, 'beforeUpdate', function() { Body.applyForce(box, { x: box.position.x, y: box.position.y }, { x: 0, y: -0.05 }); });
4. Managing Collision Events
Collision handling illuminates the points of impact, with each collision causing a change in the color of the bodies involved, thereby providing instant visual feedback.
Events.on(engine, 'collisionStart', function(event) { event.pairs.forEach(pair => { pair.bodyA.render.fillStyle = '#FF4136'; pair.bodyB.render.fillStyle = '#0074D9'; }); });
Visuals and Interaction
The simulation is enhanced with visuals from The Coding Train, which underlines, the beauty of physics in motion. By integrating interactive elements, users can directly influence the forces acting on objects, thereby deepening their understanding of physics through real-time feedback.
Future Enhancements
Future versions could include more complex simulations using toxiclibs.js for more intricate particle systems and simulations, further exploring the boundaries of web-based physics simulations. But overall, I am proud that I got it actually to work.