User interface primitives

Oscillation recorder

Capture a back and forth motion

Period = 0s
Amplitude = 0px


Subjectively, the oscillation recorder captures the energy of a back and forth motion. Quantitatively, it records the period and amplitude of the pointer’s oscillation.

The period is the time it takes to complete a full back and forth motion from a given position. The amplitude is the peak-to-peak distance traveled by the pointer.

Oscillation recorder returns the period and amplitude of the last completed cycle.


Oscillation recorder takes a handle (for example the red square above), and listens to the pointer’s behavior once the handle is held. It then continously returns the period of the last cycle and the amplitude of the last back and forth motion.


Include oscillator.js and use as follow:

var element = document.querySelector('#red_square');

// Create an instance of Oscillator
// Monitor the pointer’s behavior while holding the handle
var oscillator = new Oscillator({
    handle: element

// Oscillator will return 2 values
// The period, in milliseconds

// The amplitude, in pixels

For demo purpose, a Drag is also used:

var area = document.querySelector('#dotted_track');

// Create an instance of Drag
var drag = new Drag({
    // Drag this DOM element
    handle: element,
    // Contain dragging to this DOM container
    boundaries: area,
    // Do this when the user releases the handle
    onRelease: animate

function animate(){
    // For this demo, the handle is animated using
    // the information retrieved from oscillator