Assignment 10

Concept

For this assignment, I wanted to move away from the autonomous movement of bird-like agents and explore the visceral reaction of physical matter. My concept was to create a deep-sea environment filled with glowing, floating crystalline shards that react to gravity, magnetism, and violent collisions.

I was inspired by:

• Matter.js Physics: Moving from simple circles to complex polygons that tumble and rotate based on their center of mass.

• Bioluminescence: I wanted the shards to feel like living crystals. They stay dim and calm while drifting but scream with light and ripples when they collide or shatter.

• Interactive Chaos: Instead of just watching a simulation, I wanted the user to be a destructive force within the world.

Sketch

Keep the mouse pressed to attract the objects. Click on an object to make it explode. Double click in empty space to add more objects.

Highlight

I am particularly proud of the explode() function. It pushes objects away by calculating a radial impulse. When you click a shard, it calculates the distance and angle of every other shard in the vicinity and applies a force that dissipates the further away it is.

// Applying a shockwave force based on distance from the click
let forceDir = createVector(b.position.x - targetX, b.position.y - targetY);
forceDir.normalize();

// Strength drops off as shards get further from the blast center
let strength = map(distance, 0, explosionRadius, explosionForce, 0);

Body.applyForce(b, b.position, {
  x: forceDir.x * strength * b.mass,
  y: forceDir.y * strength * b.mass
});

This makes the world feel heavy and reactive, as the shards get “blasted” back and spin wildly.

Milestones and Challenges

The first hurdle was setting up the Matter.js world. I started with simple squares and triangles to ensure they weren’t overlapping. The challenge here was the relative coordinates problem. If you don’t subtract the body’s position from the vertices, the shards draw in the wrong place.

Once the physics were solid, I added the aesthetics. I implemented a this.glow variable that spikes on collision. I also added a ripple effect – a ring that expands and fades – which visually communicates the “energy” of a collision.

The final stage was adding the magnetism (hold mouse) and the explosion (click object). I had to ensure that when a shard is clicked, it is properly removed from both the Matter.js world and my own array, or the ghost-physics would cause invisible collisions.

Reflection and Ideas

Matter.js opened up a whole new world of crunchy interaction that p5.js vectors alone struggle with. The way the shards tumble and catch on each other’s corners makes the simulation feel grounded in reality, despite the neon colors.

• Dynamic Sound: I’d love to add a glass clinking sound that scales in volume and pitch based on the intensity of the collision.

• Shard Fragmentation: Instead of the shard simply disappearing, I’d like it to break into smaller, actual Matter.js fragments that eventually dissolve.