@code-not-art/sketch v2.0.0-beta.2

Sketch Framework

Framework used to create generative art using pseudo-random and parametric algorithms. This library provides an interface for a Sketch object that defines a parameterized algorithm for generative artwork, and React components to run those Sketch algorithms and render them on an HTML canvas.

The primary use of this is to be used in an interactive development environment, where a coder can make changes to a Sketch and their browser will immediately render their updated algorithm.

In addition to this original purpose, the React components can be embedded into any website as a means to provide control over an HTML canvas, or to display a sketch in a (non-development) context.

Sketch Web Interface Controls

The sketch controller provides keyboard shortcuts for controlling the development environment.

These are disabled by default to prevent hijacking keyboard commands outside of the sketch developer use case.

The Sketch Interface and Lifecycle

The SketchController expects a prop of the Sketch type. This interface allows you to provide configuration details for your sketch (config), and interactable parameters that you can update in browser (params). There are several methods for available for you to implement that will interact with the canvas and the seeded random generators provided by the framework. The only one of these that are absolutely required to provide is the draw(props) method, all others have sensible (mostly empty) defaults.

SketchProps

The SketchProps are provided provided to every function in the Sketch definition. They provide access to the Canvas, and to the seeded Random generators. The full list of properties available and links to their code or documentation is:

Example Sketch Code

This repository provides an application to run demonstration sketchs found at /apps/demos. These are a great place to start to look at implementing an example sketch.

The following is a bare minimum sketch. It does nothing but can be passed to a SketchController and will result in no changes to the canvas:

const bareMinimumSketch = createSketch({
	init: () => ({}),
	controls: {},
});

A sketch that will modify the canvas requires a draw() or loop() function. As a minimum example, the following sketch will completely fill canvas with a single color, using the first color from the provided palette:

const simpleSketch = createSketch({
	controls: {},
	init: () => ({}),
	draw: ({ canvas, palette }) => {
		canvas.fill(palette.colors[0]);
	},
});