An early experiment toward building a marbling simulation. This code was originally written in 2017 in the class The Nature of Mathematical Modeling. I've recently refactored the code using gpu-io so that it can run on pretty much any platform/browser. This demo is embedded in my blog post about digital marbling.
This application will run any device/browser supporting WebGL2 or WebGL1.
The simulation doesn't start running until a pointerdown/pointermove event is detected on the canvas. After 15 seconds without interaction, the simulation pauses until another pointerdown/pointermove event is detected on the canvas. More info about animation loop can be found in src/index.ts.
To embed this simulation in a page with an iframe:
<!-- iframe can be any width and height -->
<iframe style="width:800px;height:500px;border:none;background-color:#cccccc;" src="https://apps.amandaghassaei.com/marbling-experiment/"></iframe>Embedding with a fixed aspect ratio on a responsive layout:
<!-- 56.25% gives a 16:9 aspect ratio -->
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://apps.amandaghassaei.com/marbling-experiment/" style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:#cccccc;" frameborder="0">
</iframe>
</div>An example of embedding this page with an iframe is currently hosted at apps.amandaghassaei.com/marbling-experiment/embed/
A sample page with a full-screen simulation is currently hosted at apps.amandaghassaei.com/marbling-experiment/
Compiled js code is in dist/index.min.js
To install all development dependencies, run:
npm installTo build src to dist, run:
npm run buildThis work is licensed under an MIT License. Note that it depends on the following:
- gpu-io - MIT license, 4 dependencies:
- @amandaghassaei/type-checks - MIT license, no dependencies.
- @petamoriken/float16 - MIT license, no dependencies.
- changedpi - MIT license, no dependencies.
- file-saver - MIT license, no dependencies.
This application is built on top of gpu-io, which has been extensively tested in a variety of device/browser combinations. All functionality is supported by both WebGL2 and older browsers that only support WebGL1.