Concept
For this assignment, I explored how a structured geometric system can respond to external interaction using physics. I created a symmetrical pattern that extends across the canvas, composed of small elements that are held in place through soft constraints. The goal was to simulate a system that feels stable and balanced, but still capable of disruption.
As the user moves their mouse across the canvas, the pattern begins to distort. The elements are pushed away from the cursor, creating a temporary break in the symmetry. Once the mouse moves away, the system gradually restores itself, returning to its original configuration. This creates a continuous loop between order and disruption, where interaction introduces instability, and the system’s internal structure restores balance.
This project is loosely inspired by responsive systems and generative patterns where structure is not fixed, but maintained through underlying rules. I was particularly interested in how symmetry can be preserved even when temporarily disturbed, and how small forces can create large visual changes.
Code Highlight
One part of the code I focused on was how the particles return to their original positions. Instead of manually animating them back, I used constraints in Matter.js to connect each particle to a fixed anchor point. This allows the system to naturally restore itself after being disturbed.
let spring = Constraint.create({
pointA: { x: x, y: y },
bodyB: body,
length: 0,
stiffness: 0.06,
damping: 0.08
});
This approach made the motion feel more organic, since the particles are not directly controlled but instead react to forces within the system.
Final Sketch
Milestones and Challenges
1. Building the initial pattern
The first step was creating a grid that felt structured but still visually interesting. I experimented with spacing and conditions to create a pattern that extends across the canvas while maintaining symmetry.
2. Introducing interaction through forces
I then added a repulsion force from the mouse. One challenge here was finding the right balance, since too much force made the system chaotic, while too little made the interaction barely noticeable.
3. Making the system return to form
A key part of the project was ensuring the pattern would restore itself. Using constraints instead of manual positioning allowed the system to behave more naturally and maintain consistency.
Reflection
This assignment helped me understand how physics engines can be used beyond simple motion. Instead of focusing on collisions or gravity alone, I explored how forces and constraints can create a system that feels both reactive and stable.
I found it interesting that the interaction is temporary, but the structure persists. This creates a dynamic where the user can influence the system, but not completely control it.
Future Improvements
- Introduce more complex symmetrical structures
- Add variation in particle size or behavior
- Experiment with different types of forces (attraction instead of repulsion)
- Refine the visual output to emphasize the symmetry more clearly