Interface OBJ_Pulse

Pulse options object

Pulsing can be useful to highlight a figure element to a user, without changing its underlying properties.

When an element is pulsed, it will be scaled, translated or rotated from a start value (1 for scale, 0 for rotation and translation), to a maximum value (scale, translate or rotate), to a min value, and then back to the start value. An element can be pulsed through this cycle frequency times per second, over some duration.

The pulse does not change the FigureElement.transform property, and only changes the draw transform.

By default, a scale or rotation pulse will scale or rotate around the the center of the rectangle encompassing the border of the element. centerOn can be used to define a different FigureElement or point to center on. If centering on a FigureElement, xAlign and yAlign can be used to center on a point aligned within it. For instance, xAlign: 'left' will center on a point on the left edte of the FigureElement.

The pulse can also draw multiple copies of the element with pulse transforms distributed between the min and maximum pulse values. This is particularly useful for shapes with outlines that have a regular spacing from a center point (such as regular polygons) as it will look like the thickness of the outlines are becomming thicker.

duration number — pulse duration in seconds (1)
frequency number — pulse frequency in Hz - a frequency of zero will set the frequency so just one cycle will be performed in the duration (0)
scale number — maximum scale value to pulse to (1.5)
rotation number — maximum rotation value to pulse to
translation number — maximum translation displacment value to pulse to (1.5)
angle number — translation angle (0)
min number — minimum value to pulse to
centerOn TypeParsablePoint | FigureElement | null — center of scale or rotation pulse. null is point [0, 0], string or FigureElement are elements to centerOn, and 'this' is the calling element ('this') will be the default centerOn.
space figure | gl | local | draw — if centerOn is a point, use this to define the space the point is in ('figure')
num number — the number of draw copies of the pulse to make (1)
when TypeWhen — when to start the pulse ('syncNow')
done string | (args: any[]) => void | null — callback when pulse is finished. If string then the element's FunctionMap fnMap will be used (null)
progression string | (n: number) => number — function that defines how the scale should progress over time (sinusoid)

Example

// For all examples below, use this to add an element to the figure
const p = figure.add({
  make: 'polygon',
  radius: 0.3,
  line: { width: 0.05, },
});

Example

// Scale pulse
p.pulse({
  duration: 1,
  scale: 1.3
});

Example

// Rotation pulse
p.pulse({
  duration: 1,
  rotation: 0.15,
  frequency: 4,
});

Example

// Translation pulse
p.pulse({
  duration: 1,
  translation: 0.02,
  min: -0.02,
  frequency: 4,
});

Example

// Thick pulse
p.pulse({
  duration: 1,
  scale: 1.1,
  min: 0.9,
  num: 7,
});
@interface

Interface OBJ_Pulse

Example

Example

Example

Example

Example

Settings