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.