Sketch Props

Your sketch function can use many props that are offered by ssam. This will save you time as it includes many common properties for creative coding sketches.

Normally, you will destructure the ones you want to use:

// this is okay, but...
const sketch = (props) => {
  props.wrap.render = () => {
    //
  };
};

// this may be more convenient...
const sketch = ({ wrap }) => {
  wrap.render = ({ playhead }) => {
    //
  };
};

wrap Prop

You will use wrap object to attach render and resize methods. That's the only use for now. In the future release, it may provide more features.

Context Props

Based on which sketch mode you are using, you will have access to either context or gl prop.

name	type	description
context	CanvasRenderingContext2D	available in 2d mode.
gl	WebGLRenderingContext | WebGL2RenderingContext	available in webgl or webgl2 modes.

Canvas Props

name	type	description
canvas	HTMLCanvasElement	get canvas object reference.
width	number	get width in px. When scaleContext is true, canvas.width is multiplied by pixelRatio.
height	number	get height in px. When scaleContext is true, canvas.height is multiplied by pixelRatio.
pixelRatio	number	get the pixel ratio you set in settings. default: 1

Animation Props

name	type	description
duration	number	get loop duration in ms (ex. 4000 = 4 sec). If settings.duration is not set, it will be Infinity.
totalFrames	number	get the number of total frames. If settings.duration is not set, it will be Infinity.
frame	number	get current frame count. starts at 0. the value may not always increment by 1 so that it can keep up with time. It you need a reliable counter, create a new variable yourself or use time as your reference.
time	number	get current time in ms. starts at 0
deltaTime	number	get delta time between frame renders in ms
playhead	number	goes from 0 to 1 over animation duration. If duration is not set, it does not update, and will stay at 0.
playFps	number | null	get playback frame rate. If settings.playFps is not set, it will return null
exportFps	number	get export frame rate. If settings.exportFps is not set, it defaults to 60.
loopCount	number	counts the current loop count if settings.numLoops is set. it defaults to 0. Use it to add a variation to a sketch while keeping other time variables the same.
numLoops	number	the number of loops to repeat in the sketch that is defined in settings or it may have been updated by props.update().

Function Props

name	type	description
exportFrame	function	Call to save a frame. Useful if you want to attach to an event.
exportFrames	function	Call to export a video specified in settings.framesFormat. Calling the function again while exporting will finish the current recording. It is useful if you want to attach to a different key than the Ssam default or even attach to a button.
togglePlay	function	Call to toggle play and pause.
render	function	Call to run the code in wrap.render() manually. Useful for rendering on-demand when you don't need to run the animation constantly.
update	function	Update settings or properties. ex. update({ pixelRatio: 2 }). Updatable keys are parent, title, dimensions, width, height, pixelRatio, pixelated, duration, numLoops, playFps, exportFps, filename, prefix, suffix.

Extra Props

name	type	description
data	object	any data you pass via settings.data object is available as a prop.