Constructor
new BpfDisplay(options)
Parameters:
| Name |
Type |
Description |
options |
Object
|
Override default parameters.
Properties
| Name |
Type |
Attributes |
Default |
Description |
colors |
String
|
<optional>
|
null
|
Array of colors for each index of the
vector. dynamic parameter |
radius |
String
|
<optional>
|
0
|
Radius of the dot at each value.
dynamic parameter |
line |
String
|
<optional>
|
true
|
Display a line between each consecutive
values of the vector. dynamic parameter |
min |
Number
|
<optional>
|
-1
|
Minimum value represented in the canvas.
dynamic parameter |
max |
Number
|
<optional>
|
1
|
Maximum value represented in the canvas.
dynamic parameter |
width |
Number
|
<optional>
|
300
|
Width of the canvas.
dynamic parameter |
height |
Number
|
<optional>
|
150
|
Height of the canvas.
dynamic parameter |
container |
Element
|
CSSSelector
|
<optional>
|
null
|
Container element
in which to insert the canvas. constant parameter |
canvas |
Element
|
CSSSelector
|
<optional>
|
null
|
Canvas element
in which to draw. constant parameter |
duration |
Number
|
<optional>
|
1
|
Duration (in seconds) represented in
the canvas. dynamic parameter |
referenceTime |
Number
|
<optional>
|
null
|
Optionnal reference time the
display should considerer as the origin. Is only usefull when synchronizing
several display using the DisplaySync class. |
|
- Source:
Example
import * as lfo from 'waves-lfo/client';
const eventIn = new lfo.source.EventIn({
frameSize: 2,
frameRate: 0.1,
frameType: 'vector'
});
const bpf = new lfo.sink.BpfDisplay({
canvas: '#bpf',
duration: 10,
});
eventIn.connect(bpf);
eventIn.start();
let time = 0;
const dt = 0.1;
(function generateData() {
eventIn.process(time, [Math.random() * 2 - 1, Math.random() * 2 - 1]);
time += dt;
setTimeout(generateData, dt * 1000);
}());