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.

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