Week 10 – Khalifa Alshamsi

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.