Skip to content

Instantly share code, notes, and snippets.

@bmcfetty
Last active April 5, 2021 11:35
Show Gist options
  • Save bmcfetty/e50858b4d4a608b4276fed1be7313d7f to your computer and use it in GitHub Desktop.
Save bmcfetty/e50858b4d4a608b4276fed1be7313d7f to your computer and use it in GitHub Desktop.
Basic starting point for any canvas-sketch with comments of my commonly used/altered settings
const canvasSketch = require('canvas-sketch');
const Random = require("canvas-sketch-util/random");
// ****** If using random ******
// Set a random seed so we can reproduce this print later
const defaultSeed = "";
Random.setSeed(defaultSeed || Random.getRandomSeed());
// Print to console so we can see which seed is being used and copy it if desired
console.log("Random Seed:", Random.getSeed());
const settings = {
// Measured in selected unit, unless paper size constant ie A4
dimensions: [ 2048, 2048 ],
// Use if using a defined paper size constant for dimensions
// orientation: 'landscape' // also supports 'portrait'
// All our units are px
units: 'px', //"cm"`, `"px", "mm"
// Can be an existing canvas context, or a string like "webgl" or "2d" hinting which canvas type should be created.
// context: "2d", //"webgl"
//context String | Context "2d"
// Use a higher density for print resolution (this defaults to 72, which is good for web)
// pixelsPerInch: 300,
// You can pad the dimensions of your artwork by `bleed` units, e.g. for print trim and safe zones.
// bleed: 0,
// When true, scales down the canvas to fit within the browser window.
// scaleToFit: true,
// When true, scales up or down the canvas so that it is no larger or smaller than it needs to be based on the window size. This makes rendering more crisp and performant, but may not accurately represent the exported image. This is ignored during export.
// scaleToView: false,
// **** Animation settings *****
// Enable an animation loop
// animate: true,
// Loop when reaching end of duration
// loop: true,
// Set loop duration in seconds
// duration: 3,
// Optionally specify a frame rate
// fps: 24,
// **** File name output settings *****
prefix: "test",
// suffix: "",
// tip: if you render at [ 1024, 1024 ] dimensions, but scale down the GIF while encoding, you might end up with more crisp lines: `canvas-sketch my-sketch.js --stream [ gif --scale=512:-1 ]`
};
const sketch = () => {
// Set local state outside of renderer for consistency across renders, like random values
// Other render props:
// time, The current elapsed time of the loop in seconds
// playhead, The current playhead of the loop, between 0 and 1 (inclusive), which will always be 0 when duration and totalFrames is not defined.
// deltaTime, The delta time in seconds since last frame
return ({ context, width, height }) => {
context.fillStyle = 'white';
context.fillRect(0, 0, width, height);
};
};
canvasSketch(sketch, settings);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment