Create a self-contained HTML file for a Galton board simulation using client-side JavaScript and a 2D physics engine (such as Matter.js via CDN). The simulation should render on an HTML5 canvas and satisfy the following requirements:
-
Single File: All HTML, CSS, and JavaScript must be contained within a single
.htmlfile. -
Canvas Size: Use a canvas size that fits comfortably on a standard screen (e.g., 500x700 pixels) without requiring scrolling or zooming.
-
Physics Engine: Use a 2D rigid body physics engine to simulate realistic interactions between balls, pegs, and walls.
-
Pegs: Place static circular pegs in horizontal rows spanning the full width of the canvas (not just a triangular arrangement). Pegs should be small and spaced for natural bouncing behavior.
-
Containment:
- Add static side walls and a bottom ground to contain the balls.
- Use thick static dividers between bins to physically separate them and prevent balls from passing through.
-
Ball Drop Mechanism: Balls should be dropped from a narrow area centered horizontally at the top to ensure consistent entry into the peg field.
-
Bins: Create clearly defined bins at the bottom with visible height and physical dividers to accumulate balls.
-
Enhancements:
- Add spinning obstacles (e.g. rotating paddles) in the peg field that deflect balls unpredictably.
- Each ball should have randomized physical properties such as mass, restitution (bounciness), and friction.
- Include a UI slider to allow the user to dynamically adjust the gravitational force acting on the simulation in real-time.
-
Visual Styling: Use a high-contrast color scheme:
- Yellow for structural elements (walls, ground, dividers)
- Red for pegs
- Orange for spinning elements
- Dark gray or black for balls
-
Distribution Demonstration: Configure physics and ball drop rate to demonstrate a normal/binomial distribution, now influenced by randomized properties and adjustable gravity.