jiggle

A jiggle is like oscillation or slow vibration, where a point motions relative to an origin point.

Quick Example:

// instantiate
jiggle = new JiggleClass(options[, originPoint])
// update
let optional = { tick: 1 }
jiggle.step(optional)
// render
jiggle.point.pen.fill(ctx, 'red')

Usage

The Jiggle class may be utilised in two general methods.

Use an existing point as an origin:

origin = stage.center.copy().update({radius: 20})
const jiggler = new Jiggler(undefined, origin)

// Dragging the origin results in a nicer drag
stage.dragging.addPoints(origin)

// Internal stepping
jiggler.step()

// grab the standard point
jiggler.point.pen.fill(ctx, '#22BB55')

Alternatively use it independent of an origin:

const jiggler = new Jiggler() // origin position = {x:0, y:0}
jiggler.step() // will update the jiggler.point

// update with additional
let jiggledPoint = jiggler.point.add(this.center.copy())
jiggledPoint.pen.fill(ctx, '#22BB55')

Options

The Jiggle class assigns a few options for the 2D oscillation

options = {
    width: 3
    , height: 3
    , speedReducer: .2
    , xSpeed: .7
    , ySpeed: .5
}

width/height

Define the limits (in standard units, which are probably pixels.) of which the oscillation can occur through its full range of motion on an axis.

For example 100 would define 100px of movement across the axis through a period of time.

xSpeed/ySpeed

The step amount computed by the given tick value. Each axis has its own speed. Both are manipulated by the speedReducer

speedReducer

A float of 0 to 1 to reduce the two x and y speed.

For example a speedReducer of 1 does not change the speed values. a value of 0.5 would have the xSpeed and ySpeed value.

When manipulating the point (such as dragging), consider altering an origin point rather than the Jiggle.point, as the internal point is not stable to changes. and would cause erratic changes when apply custom motion