Oscillator

振荡信号 · oscillator

Generate periodic motion from absolute time, with separate controls for frequency, amplitude and phase.

Breathing, floating and small sways need no accumulated per-frame state. A sine of absolute time returns the same position at the same moment on any refresh rate. Phase offsets keep a group related without separate timers.

Formula

y(t) = offset + A·sin(2π·(f·t + phase))
period = 1/f

Parameters

	This page	Mature libraries
frequency f	0.7 Hz	—Complete cycles per second.
amplitude A	0.35	—Distance from the center to a peak.
phase	per-element offset	—Phase offsets turn equal-frequency elements into a wave.

Doing it well

Calculate position from time instead of adding a fixed phase each frame; otherwise refresh rate changes frequency.www-motion/rewrite/aurora/model.js:5
Use phase to organize a group. rotunda derives phase from card index so the small bobbing does not happen in lockstep.www-motion/rewrite/rotunda/model.js:5–6
Let amplitude control range and frequency control tempo; a larger amplitude is not a faster cycle.

In our cases

33 cases use oscillators. rotunda offsets bobbing by card index, while aurora derives several shader phases at different speeds from one absolute time.

Reference implementation · basics.js

/** A periodic signal of absolute time (seconds). Frame-rate independent by construction. */
export const oscillate = (time, { frequency = 1, phase = 0, amplitude = 1, offset = 0 } = {}) =>
  offset + amplitude * Math.sin(2 * Math.PI * (frequency * time + phase));