Sticky Documentation

Library for describing and rendering 2D models made entirely of simple shapes.

Shapes

new Shape({width, height, at, orientation, anchor, fill, stroke, strokeWidth, opacity, blur, start, end, viewport}, links...)

For convenience, width, height and at can be given without a name.

Other shapes attached to the shape are given by links.

width and height (length) define the size of the shape. They are relative to the base shape or the canvas.

The position is given by at (position), relative to the base shape or canvas. The anchor defines the point on the shape itself used for positioning.

orientation (angle) is the angle the shape points to.

The shape is filled with a fill color and stroked with a stroke color with strokeWidth.

Transparency is controlled by opacity (from 0 to 1).

The shape can be blured with a radius of blur. (length)

A partial shape can be defined with start and end.

viewport is the height of the optimal viewport in pixels. This only applies to the root shape and scales the model to the canvas.

// Pink ellipse half the width and height of the canvas with two triangles attached
new Ellipse(
    w(1/2), h(1/2), {fill: "pink"},
    new Triangle(),
    new Triangle()
);

new Triangle(...)

Triangle shape.

new Triangle()

new Rectangle(...)

Rectangle shape.

new Rectangle()

new Ellipse(...)

Ellipse shape.

new Ellipse()

new Text({content, ...})

Text, where content is the text to draw.

For convenience, content can be given without a name.

new Text("Meow!")

Quantities

Value with a unit.

Length quantities:

px(value): Length in pixels.
w(value): Fraction of the width of a reference shape.
h(value): Fraction of the height of a reference shape.
e(index, value): Fraction of an edge length of a reference shape.

Angle quantities:

t(value): Angle in turns.

Math

Basic math operations:

add(values...): Add two or more values.
multiply(values...): Multiply two or more values.

multiply(2, h(4))

Positions

There are different ways to position a shape.

body(x, y)

Position at x and y coordinates relative to the bounding box of the shape.

// Center of the canvas
new Ellipse({at: body(w(1/2), h(1/2))})

polar(r, a)

Position at the radius r and angle a from the center of the shape.

// Center-Right of the canvas
new Ellipse({at: polar(w(1), tr(0))})

edge(index, offset, crossOffset)

Position at offset along the edge with index. Additional crossOffset is perpendicular to the edge.

// Center of the first edge of the canvas
new Ellipse({at: edge(0, e(1/2))})

Utilities

random(from, to)

Random value between from and to.

// Circle at random position
new Ellipse({at: body(random(w(0), w(1)), h(1/2))});

noise(x)

Value noise with an amplitude of 1 at position x.

Random values are sampled with a frequency of 1 and are interpolated inbetween.

// Circle at random position
new Ellipse({at: body(multiply(w(1), noise(0)), h(1/2))});

time()

Time elapsed since canvas creation in seconds.

// Rotate over time
new Ellipse({orientation: multiply(tr(1), time())})

Effects

Dynamic values can achieve cool effects.

color(hue, saturation, lightness, {alpha})

Color defined by a hue (angle), saturation, lightness and alpha (from 0 to 1).

// Cyan
new Ellipse({fill: color(tr(1/2), 1, 1/2)});

hued(color, rotation)

A color with hue rotated by rotation (angle). // Cyan new Ellipse({fill: hued(red, tr(1/2))});

shaded(color, scale)

A shaded (or tinted) color with a lightness of scale.

// Dark red
new Ellipse({fill: shaded(red, 1/2)});

linearGradient({from, to}, colors...)

Linear gradient between colors.

The gradient runs from from to to (length). By default it goes from left to right.

// Gradient between red and cyan
new Ellipse({fill: linearGradient(red, cyan)})

tween(from, to, duration, {offset, easing, yoyo, pause})

Animation between from and to in the given duration.

offset is the point in time the animation starts at. pause is an optional duration between loops.

yoyo makes the animation go back and forth.

easing determines the transition between values:

ease: Smooth transition based on cosine.
easeOut: Transition starting rapidly and smoothing towards the end.
linear: Uniform transition.