sine-waves
Generate multiple configurable sine waves using a canvas
element
npm install sine-waves --save
var waves = new SineWaves({ // Canvas Element el: document.getElementById('waves'), // General speed of entire wave system speed: 8, // How many degress should we rotate all of the waves rotate: 0, // Ease function from left to right ease: 'Linear', // Specific how much the width of the canvas the waves should be // This can either be a number or a percent waveWidth: '95%', // An array of wave options waves: [ { timeModifier: 1, // This is multiplied againse `speed` lineWidth: 3, // Stroke width amplitude: 150, // How tall is the wave wavelength: 200, // How long is the wave segmentLength: 20, // How smooth should the line be strokeStyle: 'rgba(255, 255, 255, 0.5)', // Stroke color and opacity type: 'sine' // Wave type }, { timeModifier: 1, lineWidth: 2, amplitude: 150, wavelength: 100, strokeStyle: 'rgba(255, 255, 255, 0.3)' } ], // Perform any additional initializations here initialize: function (){}, // This function is called whenver the window is resized resizeEvent: function() { // Here is an example on how to create a gradient stroke var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0); gradient.addColorStop(0,"rgba(0, 0, 0, 0)"); gradient.addColorStop(0.5,"rgba(255, 255, 255, 0.5)"); gradient.addColorStop(1,"rgba(0, 0, 0, 0)"); var index = -1; var length = this.waves.length; while(++index < length){ this.waves[index].strokeStyle = gradient; } } });
The default easing is Linear
which means the waves are
not modified from left to right. Additionally you can specify one of the
following easing functions to the waves to modify the amplitude of each
wave throughout the width of the canvas.
Linear
SineIn
SineOut
SineInOut
Alternatively you can pass a function directly to the ease
option when creating a SineWaves instance.
// Example of linear growth ease: function(percent, amplitude) { return amplitude * percent; },
In addition to the default Sine wave can also generate, Square
, Sawtooth
, and Triangle
waves.
waves: [ { type: 'Square' segmentLength: 1, // The smaller the smoother }, { type: 'Sawtooth' segmentLength: 1, }, { type: 'Triangle' segmentLength: 1, } ],
You can also specify your own wave function by supplying a function to the type parameter. This function has two arguments: x
and waves
. x
is the location of a point on the x axis and waves
a helper object with the following functions in it:
waves.sine(x)
waves.sign(x)
waves.square(x)
waves.sawtooth(x)
waves.triangle(x)
waves: [ { timeModifier: 1, lineWidth: 2, amplitude: 150, wavelength: 200, segmentLength: 10, strokeStyle: 'rgba(255, 255, 255, 0.5)', type: function(x, waves) { return Math.sin(x) * waves.sawtooth(x); // Combine two together } }, // Additional waves ],
Canvas is supported on most devices however the due limited
processing power complex animations may appear choppy. You can either
create simplier animations for mobile or disable the animation by
setting the running
property to false
. Running the update()
method will update the animation one frame while paused.
var waves = new SineWaves({ // Canvas Element el: document.getElementById('waves'), running: false, waves: [{}] });// orwaves.running = false;// And then update the animation one framewaves.update();
SineWaves is open-sourced software licensed under the MIT license
v0.3.0 - Refactor, added custom waves, and bug fixes
v0.2.0-alpha - Added rotate, ease, wavesWidth and wave types options
v0.1.0-alpha - Initial Release
上一篇: Lung-Segmentation
下一篇:node-sinek
还没有评论,说两句吧!
热门资源
Keras-ResNeXt
Keras ResNeXt Implementation of ResNeXt models...
seetafaceJNI
项目介绍 基于中科院seetaface2进行封装的JAVA...
spark-corenlp
This package wraps Stanford CoreNLP annotators ...
capsnet-with-caps...
CapsNet with capsule-wise convolution Project ...
inferno-boilerplate
This is a very basic boilerplate example for pe...
智能在线
400-630-6780
聆听.建议反馈
E-mail: support@tusaishared.com