Gravity Gallery
0
Used by 0Controls
Gravity Gallery
Drop image-filled squares or circles into a Matter.js physics world with gravity, walls, and click-drag tossing.
KEY FEATURES
- — Real Matter.js rigid-body simulation with falling, colliding bodies
- — Fill bodies with your own uploaded images, cycled across the count
- — Choose circle or square body shapes
- — Adjustable body count and pixel size
- — Tune gravity direction and strength on X and Y axes
- — Click and drag bodies with configurable stiffness and angular stiffness
- — Toggle top, bottom, left, and right boundary walls independently
- — Friction control for how quickly bodies settle
- — Solid color fallback fill when no image is supplied
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
count
number
15
Number of image-filled bodies dropped into the physics world.
size
number
126
Width and height of each body, in pixels.
shape
enum
square
Body shape: circle or square.
gravY
number
1
Vertical gravity; positive pulls bodies down, negative up.
gravX
number
0
Horizontal gravity; positive pulls bodies right, negative left.
friction
number
1
Surface friction between bodies; higher makes them slide less.
mouseEnable
boolean
true
Enables grabbing and tossing bodies with the mouse.
mouseStiffness
number
0.991
How tightly a dragged body follows the cursor; higher snaps closer.
mouseAngularStiffness
number
0
How much a dragged body resists rotating; higher holds its angle.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#FFFFFF
Fallback background fill shown when a body has no image.
