glitchbitch

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.