Apart from the general init and loop structure followed by needless, there are many other systems available to make sketches interactive, dynamic, and more seemless, while keeping the code easy to follow. Following are explanations as to how each system may be used.


new Sketch({ options });

You may pass an Object literal when making a new sketch. Properties passed inside this object are used to configure the sketch. The parameter is optional; if no object is passed the default settings are used.





400 Forces the width of the sketch. Use inherit to use container's width.


= width Forces the height of the sketch. Use inherit to use container's height.


new <div> Every sketch needs a unique container. This may be created dynamically, or you may specify an HTML div element or an id for an existing div element.


1 A sketch can have mutliple canvases layered onto each other. Each canvas is absolutely positioned inside the div.


30 Denotes the requested frame rate, upto 60 (Depending on browser and power saving settings). Lower frame rates are forcefully limited.


1 Denotes the scale at which drawing is done horizontally.


= scaleX Denotes the scale at which drawing is done vertically.


true If true, the sketch starts looping as soon as Sketches.loop(); is called. If false, the doLoop method has to be used on the sketch.

Drawing Methods, 30, 50);
mysketch.loop(function() {
     circle(20, 30, 50);

parameter? denotes that the parameter is not required
parameter=value denotes that the parameter is optional and this value may be used as the default value

Drawing functions may be called by referring to the local methods of a Sketch instance. Inside loop and init, and other functions that fetch methods into global, the following functions may be called globally. The current sketch scope is applied.


Stops the loop function for a specified duration in milliseconds or indefinitely. Does it asynchronously in the next available animation frame.


Starts the execution of the loop function. Does it asynchronously in the next available animation frame.


Returns the number of frames that have been counted since the beginning of the sketch.


Set frames per second


Adds another layer to the sketch. If a Canvas Element is not specified, creates and pushes canvas itself.


Change the current working canvas. Accepts layer number according to order of addition of canvas, starting from 0.


Erases all canvases


Erases the current canvas


Returns HTML Image Element from source

image(img, x, y, width?, height?)

Draws an image provided by an HTML Image Element.

background(red, green=red, blue=red, alpha=1)

Fills the current canvas with specified background


Fills the current canvas with specified background

stroke(red, green=red, blue=red, alpha=1)

Sets the stroke color. RGB or HSLA


Sets the stroke width


fill(red, green=red, blue=red, alpha=1)

Sets the fill color. RGB or HSLA



"CENTER" or "CORNER". Changes the way rectangles are drawn.


Switches the color mode for the sketch. "rgb" or "hsb"

rect(x, y, width, height)

line(x1, y1, x2, y2)

ellipse(x, y, width, height=width)

circle(x, y, radius)

arc(x, y, radius, start, end)

text(string, x, y)


Saves the current transformation state of the current canvas.


Restores the last transformation state of the current canvas.

translate(x, y)


Angle is assumed in radians.

scale(x, y=x)


All events compatible with HTML DOM Event Listeners can be used here. The event function is added as an event listener to the sketch container div. The function provided is called in the sketch scope, this will refer to the sketch. Sketch methods are fetched into global.

Arrow functions may best be avoided since they do not allow this binding.

mysketch.on(event, function() {


mysketch.on("mousedown", function() {
     fill(255, 0, 0);
     text("Mouse was clicked!", mouse.position.x, mouse.position.y);


If you need to work with many items in your sketch, it is always a good idea to have a system of handling independant entities collectively. The Entity class allows you to make custom entities, which can be stored, rendered and updated behind the scene.

Entity(x, y, {render, update,})

Arrow functions may best be avoided since they do not allow this binding.


Use drawing methods to define how the entity should be rendered. This parameter is optional and if not passed, the default render function (empty) is used unless the class is extended and given a new render function.

this will refer to the entity instance. All drawing methods will be extracted into global context.


This function is to put code that pertains to how the state of the entity changes every loop call. For instance, how the position object inside the entity changes.

this will refer to the entity instance. All drawing methods will be extracted into global context.

There are no specific properties that belong to any entity other than the position. You may specify here any properties you want to give to the entity and those will be adopted by the returned Entity instance. For example you may want to store the fill and stroke color.

class Ball extends Entity {
    constructor(x, y, radius) {
        super(x, y, { radius });
        this.fill = Color(255,0,0);

    render() {
        circle(this.position.x, this.position.y, this.radius);

    update() {

var myBall = new Ball(50, 60, 25); //returns new entity
var myEntity = new Entity(50, 60, {
    render() {
        ellipse(this.position.x, this.position.y, 40);
    update() {
}); //returns new entity

Static Methods

Static methods are applied to the entities array inside the current sketch. If called outside a sketch scope, a sketch instance is expected as the last parameter.

Entity.add(Entity, sketch?)

Adds the entity object to the specified or current sketch. Better than using push after Entity.get


Loops through all entities and calls the render and update functions for each.


Returns all entities as an array. You can use any array methods on this array, including forEach and filter.

Entity.getByName(name, sketch?)

Returns entities with the specific name property value. Entities may be named manually when creating them.


Removes the specified entity from its sketch.


var result = new Vector(34, 5).mult(9).mag();

Vector Methods

<Vector>.add( vector )

<Vector>.sub( vector )

<Vector>.mult( vector )

<Vector>.div( vector )

<Vector>.mag( )

<Vector>.magSq( )

<Vector>.copy( )

<Vector>.normalize( )

<Vector>.setMag( num )

<Vector>.limit( num )

<Vector>.angle( )

<Vector>.dot( vector2 )

<Vector>.getPerp( )

<Vector>.set( x, y )

<Vector>.rotate( angle )

Static Methods

If you do not wish to change the original vector in any way, use these static methods.

Vector.random2D( )

Vector.add( vector1, vector2 )

Vector.sub( vector1, vector2 )

Vector.mult( vector1, n )

Vector.div( vector1, n )

Vector.normalize( vector1 )

Vector.div( vector1, n )

Vector.dist( vector1, vector2 ) vector1, vector2 )

Vector.areEqual( vector1, vector2 )