How does this simulation use 2D rigid-body kinematics and collision sensors to route audience particles into discrete categories?
This interactive page models marketing funnels as a two-dimensional physical pachinko system built with the Matter.js physics engine. Circular dynamic particles spawn periodically at the top with predefined restitution (0.5) and friction (0.1), accelerating downward under gravity. Users drag pointer strokes that create static rectangular obstacle segments. When a falling particle intersects one of three static sensor regions at the base ('Creator', 'Builder', or 'User'), a collision event fires, removing the particle and incrementing that category's tally. If a particle exits below the canvas without entering a sensor, it is tallied as lost.
This simulation is a stylized physics demonstration, not an empirical conversion model. Conversion rates and segment distributions depend entirely on rigid collision geometry, restitution coefficients, and pointer drag trajectories rather than human decision-making, marketing channels, or real audience demographics.
Click 'Reset Lines' to clear all drawn segments and zero the metrics. Observe falling particles bouncing between the two fixed red circle obstacles and preset blue rails, collecting primarily in the center 'Builder' bucket or escaping. Next, click and drag a downward-slanted line from coordinates near the middle toward the left bucket ('Creator'). As new particles roll down your drawn segment into the left zone, watch the 'Creator' count and 'Rate' metric immediately rise as sensor contacts register.
Every dynamic particle is instantiated as a Matter.js circle of radius 5 with an initial horizontal offset randomly distributed between -50 and +50 pixels around the canvas midpoint. The engine advances positions and velocities using discrete time-step numerical integration under standard gravitational acceleration.
Toggling 'Go 10x' changes the spawn interval from 500 milliseconds (2 particles per second) down to 50 milliseconds (20 particles per second), testing how dense streams interact with static obstacles and user-drawn boundaries under continuous rigid-body contact.
When dragging on the canvas, the script records the start and end pointer coordinates, calculating segment length, angle, and midpoint. If the drag length exceeds 10 pixels, a static rigid rectangle with a thickness of 10 pixels is added to the simulation world to deflect falling particles.
The three collector bins at the bottom are configured with sensor bodies (isSensor: true). Sensor bodies detect overlaps and trigger 'collisionStart' events without exerting contact forces or bouncing the particles. The event handler extracts the colliding pair, deletes the particle from the physics world, and increments the respective bucket tally.
This source models falling particles, not measured customer acquisition. Normal mode schedules one new particle every five hundred milliseconds, or two per second. Tenfold mode changes the interval to fifty milliseconds, or twenty per second. The advancing line represents one scheduled second, shown slowly. Each dot appears at its scheduled interval: two normal particles and twenty tenfold particles by the end. Faster spawning does not itself improve capture percentage, and browser scheduling can differ from this idealized interval diagram. Capture percentage uses only resolved outcomes. These ten illustrative particles begin with three captured, one lost, and six still airborne. Three divided by three plus one is seventy five percent. Now two airborne particles become captured and one becomes lost. Five captured divided by five plus two lost is about seventy one point four three percent, which the source rounds to seventy one percent. The illustrative bar uses the unrounded fraction. Three particles remain airborne and do not enter the denominator. Dividing five captured by all ten spawned would instead give fifty percent. These hypothetical state changes explain the source arithmetic; they are not a recorded native run or measured customer conversion. The source takes the pointer endpoints, computes their difference vector, and uses its magnitude as the segment length. A synthetic sixty pixel horizontal and eighty pixel vertical displacement gives a one hundred pixel length. The midpoint is thirty, forty relative to the start, and the angle is about fifty three point one three degrees. The source creates a ten pixel thick static rectangle only when length exceeds ten pixels. Reset clears the counters and removes user drawn lines, but leaves existing particles and the current spawning rate in the running world. Resize changes the canvas dimensions without rebuilding the original bucket and wall bodies. Those limits matter when interpreting the toy. A missing Matter library triggers an error message and returns before event handlers are attached. The simulation illustrates the saved source rules. Its capture percentage is not a measured customer conversion rate, and a faster particle schedule does not guarantee better capture.