ARC PUDDING — Scripting API

a scriptable compass & rule drawing tool

Overview

Top-level code is setup (runs once). Return a function to create an update loop (runs every frame).

t is elapsed time in seconds since the script started.

const c = compass(150)
c.pen('#ff0000')

return t => {
  c.radius = 100 + 50 * sin(t)
}

Factories

CompassNode

RulerNode

PenNode

Globals

Math (no Math. prefix)

sin, cos, tan, atan2, sqrt, abs, floor, ceil, round, min, max, pow, log, PI, TAU

Helpers

lerp(a, b, t), clamp(v, lo, hi), easeInOut(t), easeIn(t), easeOut(t), degToRad(degrees), radToDeg(radians)

Noise & random

noise(x, y?) — 2D Perlin noise, returns -1 to 1

random(min?, max?) — no args: 0–1, one arg: 0–max, two args: min–max

Color helpers

hsl(h, s?, l?) (defaults: s=100, l=50), rgb(r, g, b), rgba(r, g, b, a)

Color formats

hex '#ff0000', '#0af' — rgb 'rgb(255, 0, 0)' — rgba 'rgba(255, 0, 0, 0.5)' — hsl 'hsl(0, 100%, 50%)' — hsla 'hsla(0, 100%, 50%, 0.5)'

Input

Examples

One-liner:

compass(100).pen()

Spirograph with speed (no update fn needed):

const a = compass(120)
const b = compass(40).on(a)
a.speed = 2
b.speed = 3
b.pen(hsl(220))

Spirograph:

const a = compass(120)
const b = compass(40).on(a)
b.pen('#0000ff')
a.pen('#ff0000')

return t => {
  a.angle = t * 2
  b.angle = t * 3
}

Nested gears:

const a = compass(120)
const b = compass(40).on(a)
const c = compass(15).on(b)
c.pen('#ff0000')

return t => {
  a.angle = t * 2
  b.angle = t * 7
}

Deep nest with color cycling:

const a = compass(120)
const b = compass(60).on(a)
const c = compass(35).on(b)
const d = compass(20).on(c)
const e = compass(10).on(d)
const p = e.pen()

return t => {
  a.angle = t * 1
  b.angle = t * 3
  c.angle = t * 7
  d.angle = t * 13
  e.angle = t * 21
  p.color = hsl(t * 60)
}

Organic motion with noise:

const c = compass(80)
c.pen()

return t => {
  c.x = 100 * noise(t * 0.5, 0)
  c.y = 100 * noise(0, t * 0.5)
  c.radius = 60 + 30 * noise(t)
}

Mouse follower:

const c = compass(80)
c.pen()

return t => {
  c.x = mouse.x
  c.y = mouse.y
}

Draw on press:

const c = compass(100)
const p = c.pen('#000')
p.drawOnPress = true

return t => { c.angle = t }

Ruler:

const r = ruler(0)
r.pen()

return t => {
  r.angle = sin(t) * 0.5
}

Keyboard Shortcuts

Compass & Rule only