Home

Basics

By running npm create ssam@latest, it will set up all the necessary files and the Vite bundler setup, using one of the pre-built templates you choose (ex. vanilla, three.js, etc.).

After the installation, cd into the project directory and start the dev server with npm run dev.

If you need to manually import the Ssam package,

import { ssam } from "ssam";

Ssam Structure

Ssam is a wrapper around your canvas sketch. It is not a Canvas drawing library or framework. It does not offer any drawing, color or other convenience functions. It, however, sets up a boilerplate code behind the scene to save you time from writing the same code every time.

The basic structure looks like this:

import { ssam } from "ssam";

// use wrap object to attach render/resize methods
const sketch = ({ wrap }) => {
  // any code that runs once at the start of the sketch goes here

  wrap.render = () => {
    // any code that runs each frame goes here
  };

  wrap.resize = () => {
    // any code that runs when the canvas resizes goes here.
  };
};

const settings = {
  mode: "2d",
  dimensions: [800, 600], // comment out for fullscreen sketch
  pixelRatio: window.devicePixelRatio,
  animate: true, // default: true
  duration: 4_000, // in milliseconds
  framesFormat: "webm", // video export format
}

// call ssam with sketch and settings to prepare canvas
// and run your sketch code.
ssam(sketch, settings)

The rest is up to you to use it any way you like - use as vanilla Canvas or bring in other libraries.