Introduction

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.

Options

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.

Drawing Methods

mysketch.circle(20, 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.

stopLoop(duration?)

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

doLoop()

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

loopCount()

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

frameRate(fps)

Set frames per second

addCanvas(canvas?)

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

setLayer(layer)

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

clearAll()

Erases all canvases

clear()

Erases the current canvas

loadImage(src)

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

background(image)

Fills the current canvas with specified background

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

Sets the stroke color. RGB or HSLA

strokeWeight(weight)

Sets the stroke width

noStroke()

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

Sets the fill color. RGB or HSLA

noFill()

rectMode(mode)

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

colorMode(mode)

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)

save()

Saves the current transformation state of the current canvas.

restore()

Restores the last transformation state of the current canvas.

translate(x, y)

rotate(angle)

Angle is assumed in radians.

scale(x, y=x)

Events

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() {
     //code
 });

Example

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

Entities

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, ...properties})

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

<Entity>.render()

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.

<Entity>.update()

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.

...properties

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() {
        fill(this.fill);
        circle(this.position.x, this.position.y, this.radius);
    }

    update() {
        this.position.add(Vector.random2D());
    }
}

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() {
        this.position.mult(2);
    }
}); //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

Entity.loop(sketch?)

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

Entity.get(sketch?)

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.

Entity.loop(entity)

Removes the specified entity from its sketch.

Vectors

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 )

Vector.dot( vector1, vector2 )

Vector.areEqual( vector1, vector2 )