A showcasing of various graphics and simulations, using the WebGPU API. Hosted over on moire-things.netlify.app.
Please note that this project is in an alpha state. It is also recommended to try it out on Google Chrome, or a browser that uses Chromium.
The sidebar to the left contains a list of modes to choose from. On the top-right is a user interface with buttons and sliders. The rest of the screen is the canvas.
A more in-depth explanation of each mode and their menus can be read below.
A set of 100 balls that simulate gravity, damping, and traction. The set has a uniform distribution of damping values between 0.8 and 0.9 (less damping means more bounciness).
Left click to drop the set of balls where you clicked. Hold left click, drag in a direction, and release left click to launch the set in the direction of your cursor. The farther your cursor, the faster the launch.
Right click to momentarily halt the momentum of every ball. Hold, drag, and release right click to launch all balls in the direction of the cursor, but relative to where they are. For instance, dragging up will launch all balls straight and upwards. The distance of the drag matters here, too.
Wrap: Disables left and right walls, and wraps around to the other side of the screen.
Gravity: Adjusts gravitational constant (0 - 9.8).
Hold left click to draw animated bubbles, that grow and shrink sinusoidally.
Clear: Removes all bubbles.
Undo: Removes the most recent bubble.
Reset: Resets the sliders and toggles.
Colors: Toggles whether colors show or not.
Speed: Adjusts rate of time.
Radius: Adjusts bubble size.
Sectus: Adjusts the inner radius, as a coefficient of the radius (0 - 0.96).
Sectors: Adjusts how many edges the circle has (3 -33).
A grid of pointers covering the screen, facing towards the cursor.
Facing: Toggles whether pointers face towards or away from the cursor.
A simulation of Conways Game of Life, with standard rules. Cells are brighter the more neighbors they have.
Restart: Starts a new and random simulation.
Hold left click to draw colorful, rotating lines.
Clear: Removes all fins.
Hold left click to draw colorful, swinging orbs. Orbs grow and shrink over time.
Clear: Removes all orbs.
Simulates pendulums with realistic motion. Hold left click continuously draws pendulums, and right click draws a single pendulum.
Clear: Removes all pendulums.
Spikes that reach towards the cursor. Hold left click to draw continuously, and press right click to draw a single spike.
Clear: Removes all spikes.
Spinning circles with spikes, that grow and shrink. Hold left click to draw continuously, and press right click to draw a single circle.
Clear: Removes all circles.
Undo: Removes the most recent circle.
Reset: Resets the sliders and toggles.
Radius: Adjusts circle size.
Teeth: Adjusts how many teeth each circle has (3 - 16).