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.
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.
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
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:
- No payload (empty string)
In the case of an empty string within the
msg.payload
, theeasing
node ramps from 0.0 to 1.0. - Number as payload
If the
msg.payload
is a number, theeasing
node ramps from its last value to this number given. - 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.
- 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 themsg.payload
. - As Array
In this case, one single
msg
is sent, containing an array with all transition profile values within themsg.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>.
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.
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).
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