glitchbitch v0.0.1

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!

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

.effects()

.values()

Its not required pipe, may be omitted

Contributing

GlitchBitch is an open source project, waiting for your participation! See CONTRIBUTING.md for details.