rotate() --- Rotation Cue

rotate(...) rotates an SVG element using either:

• continuous rotation, or
• a sequence / pattern of angle values

Rotation can be:

• smooth interpolated
• stepped
• looping, alternating, or one‑shot
• optionally sending OSC messages (with live overlays).

BASIC FORMS

Continuous

rotate(dir:1, dur:1)

Sequence

rotate(values:[0,120,240], dur:2)

Pattern sequences

rotate(values:Pseq([0,45,10],inf), dur:Pseq([1,0.2,2],inf))

⚡ TRIGGERING

• auto (page load / mode)
• edge (playhead collision)
• cue activation

⏱ TRIGGER DELAY --- tdelay:<seconds>

Delays motion after trigger:

rotate(values:[0,120,240], tdelay:2)

INITIAL VISIBILITY --- init:

Controls appearance before rotation begins.

The element adopts the initial rotation angle immediately, then waits.

rotate(values:[0,90,180], tdelay:4, init:ghost) rotate(dir:1, dur:10, init:fadein(1), trig:playhead) rotate(dir:-1, dur:85, init:armed)

🎚 SEQUENCE PARAMETERS

Key Meaning

values list of angles or pattern dur seconds per step (or pattern) mode loop, once, alternate interp smooth or step hold pause after tween (smooth only)

CONTINUOUS ROTATION

rotate(dir:1, dur:2) rotate(dir:-1, dur:3, ease:"easeInOutSine")

• dir:1 → clockwise
• dir:-1 → counter‑clockwise
• loop:0 (default) = infinite

UID --- Live Updates

UID lets multiple cues address the same animation:

rotate(values:[0,90,180], uid:r1) rotate(uid:r1, dur:0.5)

OSC OUTPUT (optional)

Rotation can send OSC every frame or per‑step.

Enable via:

osc:1

Specify an OSC address:

rotate(values:[0,90,180], osc:1, oscaddr:"/spatialisation/source1")

Payload format

Every message includes:

Field Meaning

deg wrapped degrees 0--360 rad radians (deg * π/180) norm normalized 0--1 (deg/360) uid animation UID timestamp ms since epoch

Example conceptual payload:

{
  "type": "osc_rotate",
  "uid": "r1",
  "deg": 135.0,
  "rad": 2.356,
  "norm": 0.375,
  "addr": "/spatialisation/source1"
}

NOTE: Internally angles may accumulate, but outgoing OSC always wraps to 0--360.

On‑screen overlays

When OSC is enabled, a small overlay shows:

/spatialisation/source1 — deg:135.0

Overlays can be globally toggled.

NETWORK SYNCHRONIZATION

By default, rotation animations are synchronized across all connected clients. The first client to start an animation becomes the leader and broadcasts positions every 10 seconds. Late-joining clients sync to the leader's position.

sync: — Enable/Disable Sync

Use sync:0 for animations that should vary between performers:

rotate(values:[0,90,180], dur:2, sync:0)

TOGGLE STATES (Interactive Claiming)

Toggle states provide an interactive claiming mechanism independent of OSC output. Performers can double-click to cycle through named states, with visual feedback and optional callbacks.

Basic Syntax

rotate(dir:1, dur:10, toggleStates:[idle, claimed])

Parameters

Toggle Colors

Define colors for each state:

rotate(dir:1, dur:10,
       toggleStates:[idle, claimed],
       toggleColors:[default, #client])

onToggle Callback

Execute a cue expression when the state changes. Supports variable substitution:

rotate(dir:1, dur:10, uid:myRotation,
       toggleStates:[idle, claimed],
       toggleColors:[default, #client],
       onToggle:"osc(addr:/polygon/claim, uid:$uid, state:$state, client:$clientIndex)")

State Persistence

Toggle states are:

• Persisted to localStorage per client
• Synced across all connected clients via WebSocket
• Restored on page reload

Independence from OSC

Toggle states are independent from osc:1. You can have:

• osc:1 without toggle states — continuous OSC output, no claiming UI
• Toggle states without osc:1 — claiming UI, no continuous OSC
• Both — claiming UI with state-change OSC plus continuous rotation OSC

// Continuous rotation OSC + claiming system
rotate(dir:1, dur:10, uid:src1, osc:1, oscaddr:"/spat/src1",
       toggleStates:[idle, claimed],
       onToggle:"osc(addr:/claim, uid:$uid, state:$state, client:$clientIndex)")

SIGNAL-BOUND PARAMETERS

Animation speed and duration can be controlled in real-time by binding to fader signals from the control plane.

Signal Reference Syntax

rotate(dur:fader.t-120-1, dir:1, uid:spinner)

The signal reference format is:

source.channel-min-max[-default][-curve]

Examples

// Duration controlled by fader: 120s (slow) to 1s (fast)
rotate(dur:speedFader.t-120-1, dir:1, uid:wheel)

// With exponential curve for finer slow-speed control
rotate(dur:speedFader.t-120-1-exp3, dir:-1, uid:spinner)

// Starting at 60 seconds per rotation
rotate(dur:speedFader.t-120-1-60, dir:1, uid:dial)

// Full syntax with default and curve
rotate(dur:speedFader.t-120-1-30-exp3, dir:1, uid:myRotate)

How It Works

1. The fader publishes its position (0-1) to the control plane
2. The value is mapped through the specified range and curve
3. The animation's duration updates in real-time
4. Shorter duration = faster rotation

See Control Plane documentation for full signal reference syntax.

FULL PARAMETER LIST

Key Description

values angle sequence or pattern dur duration or pattern (supports signal refs) mode loop logic interp step or smooth hold pause after tween dir direction (continuous mode) ease easing curve uid animation identity trig trigger mode tdelay trigger delay init initial visibility state osc enable OSC (0/1/2) oscaddr explicit OSC address sync network sync (0/1, default 1) toggleStates array of state names for double-click cycling toggleColors array of colors per state (#client for client color) onToggle cue expression executed on state change

EXAMPLES

rotate(values:[0,120,240], dur:4, tdelay:2)

rotate(values:Pshuf([0,180],inf), dur:1, mode:alternate, osc:1, oscaddr:"/fx/rot1")

rotate(dir:-1, dur:3, init:hide, tdelay:1)

Summary

• declarative rotation cue
• works in page + scroll modes
• full control of timing + interpolation
• OSC‑ready with wrapped degrees, radians, and normalized values
• optional debug overlays

Tip: use ← → or ↑ ↓ to navigate the docs