Oscillation recorder

Overview

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.

Usage

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.

Code

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
oscillator.period

// The amplitude, in pixels
oscillator.amplitude

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
}