Ssam.js (쌈 as in Korean dish) wraps your HTML5 Canvas sketches and provides helpful features such as animation props and file exports. It is inspired by canvas-sketch. It is an open source project for anyone to use. I’ve been using it to create all my web sketches and genrative artworks since 2023.
Some people ask why I create my own library or how this is better than others. First and foremost, I create tools for myself. I create tools to learn and understand the materials I use, to get new ideas and to have a better control over my art-making process. Creating tools small or big is an important part of my process. There are already better or similar tools out there but they will never give me joy of making them myself, making mistakes along the way and learning something valuable. Working with my own tools allows me to feel comfortable while leaving room for experimentation and exploration.
Features
- TypeScript: It can work both in JavaScript or TypeScript projects.
- ESM: You can use it alongside other ESM packages.
- Vitejs: Vitejs is modern and fast. You can extend the config to add functionality. Ssam also has a few of its own plugins. Multiple sketch modes: It supports vanilla Canvas 2D API, WebGL context, or you can use with other Canvas libraries (Three.js, OGL, Two.js, Pts.js, etc.) as long as they support an existing canvas. p5.js is not supported (yet).
- Hot Reload: Code updates will be instantly applied without a full page refresh and wthout losing the sketch states.
- Git snapshot: Commit your code to git and export a frame with the same hash for an easy archiving and retrieval.
- Timelapse documentation: Automatically export an image when you save your code to create a visual documentation of your project over time. Animation loop: The playhead prop repeats 0..1 and makes it easy to create a seamless animation loop. Other props such as time, frame, deltaTime and loopCount are provided as well. You can also adjust frame rate for playing and exporting independently.
- Sketch settings: Many essential settings reduce boilerplate code in your sketch - animation duration, playback frame rate, filename, etc.
- Sketch props: Use props for each mode such as context, width, height to help your coding.
- File exports: Export canvas as image, animated GIF, PNG sequence or MP4/WebM video at various frame rates.