> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://docs-sepolia.modularium.art/api/mcp` to find what you need. # Templates Starting points for a [generative artwork](/generative/guide). Download a template's `.zip` (or copy its two files into a folder), serve it locally, and change `sketch.js`. Each draws at 1000 × 1000 for a 1:1 drop; change `W` and `H` to match your aspect ratio, e.g. 800 × 1000 for 4:5. Any library that draws to a `` works the same way as these, e.g. Two.js, Zdog, PixiJS or Babylon.js: take every random choice from `$mod.prng` (or a seeded generator the library provides) and call `$mod.preview.capture()` when the drawing is done. Every template's `index.html` is the same apart from its libraries: it loads `mod.js`, then your libraries, then `sketch.js`, and scales the canvas to fit the window. The three.js templates load `sketch.js` as a module. ## p5.js Draws once with [p5.js](https://p5js.org) and captures. `random()` is seeded for you, so no other changes are needed to make p5 code deterministic. ↓ Download p5.zip :::code-group ```js [sketch.js] // [!include ~/templates/p5/sketch.js] ``` ```html [index.html] // [!include ~/templates/p5/index.html] ``` ::: ## Animated p5.js Draws over 300 frames, then stops and captures. The token's `animation_url` replays the animation live; the preview image is the last frame. ↓ Download p5-animated.zip :::code-group ```js [sketch.js] // [!include ~/templates/p5-animated/sketch.js] ``` ```html [index.html] // [!include ~/templates/p5-animated/index.html] ``` ::: ## Plain canvas No library: a `` and [`$mod.prng`](/generative/api#randomness-modprng). ↓ Download canvas.zip :::code-group ```js [sketch.js] // [!include ~/templates/canvas/sketch.js] ``` ```html [index.html] // [!include ~/templates/canvas/index.html] ``` ::: ## Paper.js Vector paths with [Paper.js](http://paperjs.org), drawn to a ``. Paper.js has no random numbers of its own, so every choice comes from `$mod.prng`. ↓ Download paper.zip :::code-group ```js [sketch.js] // [!include ~/templates/paper/sketch.js] ``` ```html [index.html] // [!include ~/templates/paper/index.html] ``` ::: ## three.js A 3D scene with [three.js](https://threejs.org), rendered once and captured. three.js loads as a module from a pinned CDN version through the import map in `index.html`; `sketch.js` is a module that imports it. ↓ Download three.zip :::code-group ```js [sketch.js] // [!include ~/templates/three/sketch.js] ``` ```html [index.html] // [!include ~/templates/three/index.html] ``` ::: ## Animated three.js A scene where everything that moves is a function of time. The preview draws one fixed moment and captures it; then the live view (`animation_url`) animates on in real time. ↓ Download three-animated.zip :::code-group ```js [sketch.js] // [!include ~/templates/three-animated/sketch.js] ``` ```html [index.html] // [!include ~/templates/three-animated/index.html] ``` ::: ## Shader A GLSL fragment shader that colours every pixel, run through three.js on one full-screen quad. The token's choices are made in JavaScript with `$mod.prng` and passed in as uniforms. ↓ Download shader.zip :::code-group ```js [sketch.js] // [!include ~/templates/shader/sketch.js] ``` ```html [index.html] // [!include ~/templates/shader/index.html] ``` ::: ## SVG An SVG artwork. Only a `` can be captured, so once the SVG is finished it's drawn onto a hidden canvas and captured from there; collectors see the SVG itself. The same approach works for SVG made with d3 or svg.js. ↓ Download svg.zip :::code-group ```js [sketch.js] // [!include ~/templates/svg/sketch.js] ``` ```html [index.html] // [!include ~/templates/svg/index.html] ``` :::