node-red-contrib-easing 0.2.2

A node for node-red that animates a value between a start and end value using an easing function.

npm install node-red-contrib-easing

A node that ramps up a value from a start to an end value using an easing function. Output values are values over time or values within an array. Typical use cases are smoothing command value changes to avoid large steps.
node-appearance
Fig. 1: Node appearance

Installation

In Node-RED

  • Via Manage Palette -> Search for "node-red-contrib-easing"

In a shell

  • go to the Node-RED installation folder, in OS X it's usually: ~/.node-red
  • run npm install node-red-contrib-easing

Usage

Node Configuration

node-settings
Fig. 2: Node properties

Easing function

The transition from the start to the end value follows a functional behaviour. These transiton profiles are divided into three categories depending on the easing function name:

  • easeIn...: These are profiles where the starting section is very smooth and the ending section contains a sharp bend.
  • easeOut...: These are profiles where the starting section contains a sharp bend and the ending section is very smooth.
  • easeInOut...: These are profiles where starting and ending sections are quite smooth.

The behaviour of these three categories is shown by the means of the sinoidal functions in Figure 3.
Fig. 3: Easing function categories (In, Out, InOut)

Several easing funtions are selectable in the node configuration. These are:

  • linear
  • 2nd order / parabolic (easeIn, easeOut, easeInOut)
  • 3rd order / cubic (easeInCubic, easeOutCubic, easeInOutCubic)
  • 4th order (easeInQuart, easeOutQuart, easeInOutQuart)
  • 5th order (easeInQuint, easeOutQuint, easeInOutQuint)
  • sinusodial (easeInSine, easeOutSine, easeInOutSine)
  • exponential (easeInExpo, , easeOutExpo, easeInOutExpo)
  • bouncing (bounceIn, bounceOut, bounceInOut)

The profiles of these functions are shown below. See chapter Transition profiles of the easing functions for details.

Input

Depending on the type of the msg.payload the easing node behaves differently ramping with the selected easing function:

  1. No payload (empty string) In the case of an empty string within the msg.payload, the easing node ramps from 0.0 to 1.0.
  2. Number as payload If the msg.payload is a number, the easing node ramps from its last value to this number given.
  3. JSON object as payload
  • If the msg.payload contains a JSON object in the format: { "from" : 1, "to" : 10, "duration": 200, "interval" :10 }, it will ramp between these two values (<from>, <to>) within the given <duration> (in milliseconds), outputing a value every <interval> ms.
  • If the msg.payload contains a JSON object in the format: { "from" : 1, "to" : 10, "size": 10 }, it will ramp between these two values (<from>, <to>), giving an array of <size> values.
  1. Sending a msg with the topic reset will cancel any currently running easing function.

Output

The output can be configured via the Output property within the node configuration to be

  • Values over Time In this case, several msg objects are sent, each containing one single value within the msg.payload.
  • As Array In this case, one single msg is sent, containing an array with all transition profile values within the msg.payload.

Output - Values over time

This option generates a msg sequence. The duration of this sequence is set by the Duration property within the node configuration. The time interval between two msg sent is set by the Interval property within the node configuration. The scaling of both values relates to milliseconds (ms).

The number of sent msg objects equals to (<Duration> / <Interval>) + 1: The first msg object is sent immediately containing the start value (e.g. 0.0), the last msg object is sent after <Duration> ms containing the end value (e.g. 1.0).

The 'step height' of every msg.payload value depends on the selected easing function. As an example, for the linear case it equals to :
(<end value> -- <start value>) · <Interval> / <Duration>.
Values_over_time
Fig. 4: Values over time (<duration>, <interval> in ms)

Output - Values in an array

This option generates one single msg object. It contains an array [0 .. <Size>] with a selectable number of entries. This number of entries is set by the Size property within the node configuration, i.e. the array contains (<Size> + 1) entries.
As array
Fig. 5: Configuration As Array

Further information

Check Node-REDs info panel to see more information on how to use the easing node.

Example


Remark: Example flows are present in the examples subdirectory. In Node-RED they can be imported via the import function and then selecting Examples in the vertical tab menue.


The example flow shows the three options of input data via the injecting nodes (option values over time).

EasingFlow.json

Fig. 6: Easing example

Transition profiles of the easing functions

The following graphs show the normalized transition profiles the user can select.

Fig. 7: Polynomial profiles

Fig. 8: Sinoide and exponential profiles

Fig. 9: Bouncing profiles

Node Info

Version: 0.2.2
Updated 3 years, 7 months ago
License: MIT
Rating: 5.0 1

Actions

Rate:

Downloads

6 in the last week

Nodes

  • easing

Keywords

  • node-red
  • easing
  • ramp
  • interpolate
  • animate

Maintainers