glitchbitch
v0.0.1
Published
glitchbitch is the javascript plugin for animated effects of images, based on WebAssembly (emscripten) technology.
Downloads
28
Maintainers
Readme
GlitchBitch
"GlitchBitch" is the javascript plugin for animated effects of images, based on WebAssembly (emscripten) technology.
Why WebAssembly?
Because its fast! Imagine: you need to manipulate image with dimension 500px 400px.. Its 200 000 pixels and 800 000 bytes as total (because each pixel stores 4 RGBA bytes). You will need to re-render all this bytes into a canvas at every small time segment - its so difficult job for javascript in browser. This is a job for low-level language (we chose C), and now WebAssembly allows to do this!
WebAssembly browser supporting
Canvas fallback for older browsers is coming soon, in the upcoming versions of glitchbitch!
|IE|Edge|Firefox|Chrome|Safari|Opera|iOS Safari|Opera Mini|Android Browser|Chrome for Android| |---|---|---|---|---|---|---|---|---|---| |-|16|52|57|11|44|11|-|56|61|
Usage
Install the package from npm repo:
npm install glitchbitch
or
yarn add glitchbitch
Maximal example below (see html example here):
GlitchBitch
.create({
image: '../test/mock-data/image.jpg',
selector: '.test',
})
.then(timeline => {
timeline
.settings({
loopsCount: 3, // count of loops
effectDuration: 150, // in milliseconds
})
.effects([ // effects are carried out in this order
'greenChannel',
['redChannel', 'repeatVertical'],
'blueChannel',
'moveHorizontal',
'opacity',
])
.values([ // ..and effects values in same order
[0, 0],
[[50, 10], [4]],
[45, 200],
[75],
[100],
])
.start(i => { // your callback here that runs after each loop ending
if (i === 3) {
document.querySelector('.test').innerHTML = 'effects loop is done!';
}
});
Parameters
.settings()
Its not required pipe, may be omitted
|Parameter|Default value|Description| |---|---|---| |effectDuration|100|Each effect duration in milliseconds| |loopsCount|Infinity|Effects are looping to this number of times|
.effects()
|Effect name|Parameter|Default value|Description| |---|---|---|---| |redChannel|[greenContrast, blueContrast]|[0, 0]|Set only red channel by default| |greenChannel|[redContrast, blueContrast]|[0, 0]|Set only green channel by default| |blueChannel|[redContrast, greenContrast]|[0, 0]|Set only blue channel by default| |opacity|[alphaValue]|[0]|Set opacity of image, value must be between 0 - 255| |moveHorizontal|[range]|[0]|Shifts image by X axis by percentage (0 - 100)| |repeatVertical|[count]|[0]|Repeat image by Y axis|
.values()
Its not required pipe, may be omitted
Contributing
GlitchBitch is an open source project, waiting for your participation! See CONTRIBUTING.md for details.