Week #10 Assignment: The Volcano by Abdelrahman Mallasi

Concept

This project aims to simulate a volcanic eruption using  Matter.js for physics. Particles representing lava are ejected with a mouse press. These particles are subject to gravity and collisions. Each particle changes color upon collision, enhancing the visual feedback of the simulation, visually indicating interactions between particles and their environment. There’s also the ability  for the user to add wind forces by pressing the spacebar.

The environment includes a triangular volcano and a ground set as static bodies in a physics world. Particles are initialized with an initial force applied to mimic the explosiveness of a volcanic eruption.

Embedded Code

Link to Sketch

Highlight of Code

Events.on(engine, 'collisionStart', function(event) {
    event.pairs.forEach(pair => {
 
        const { bodyA, bodyB } = pair;

        if (bodyA.render && bodyA.circleRadius) bodyA.render.fillStyle = color(random(255), random(255), random(255));
        if (bodyB.render && bodyB.circleRadius) bodyB.render.fillStyle = color(random(255), random(255), random(255));
    });
});

The above code is under the setup function and is responsible for the colour changing collisions. Let’s break it down:

• Events.on(engine, ‘collisionStart’, function(event)): Sets up a ‘listener’ on the physics engine to react when two bodies collide
• event.pairs.forEach(pair =>…): Iterates over each pair of colliding bodies in the collision event
• const { bodyA, bodyB } = pair: Extracts the two colliding bodies from each pair.
• if (bodyA.render && bodyA.circleRadius) bodyA.render.fillStyle = color(random(255), random(255), random(255)): bodyA’s color is changed to a new random color.
• if (bodyB.render && bodyB.circleRadius) bodyB.render.fillStyle = color(random(255), random(255), random(255)): bodyA’s color is changed to a new random color.

Reflections and Future Additions

• Working with Matter.js made the project both easier and more difficult to implement. It was quicker to use the predefined physics functions rather than hardcoding them from scratch. However, it was difficult getting used to another workspace with a whole new set of functions and elements.
• Adding acoustic elements: It would exciting to have each collision create a unique sound, turning the simulation into a symphony of sorts. This auditory layer would  provide a more multi-sensory experience.