Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexadam/glitch-studio

data bending & glitch tools
https://github.com/alexadam/glitch-studio

art data-bending glitch glitch-art glitch-effect glitch-mona glitch-studio glitchart glitches glitching glitchlib png png-decoder visual visual-effects

Last synced: about 1 month ago
JSON representation

data bending & glitch tools

Awesome Lists containing this project

README

        

# glitch-studio

Data bending & glitch tools

![alt main.gif](https://github.com/alexadam/glitch-studio/blob/master/examples/main.gif?raw=true)

**Demo:** https://alexadam.github.io/demos/dynamic-glitch/index.html

## Dynamic PNG Codec Glitch

Glitch an image by randomly changing a PNG image codec's internal parameters. In these examples you can dynamically change a JavaScript implementation of the PNG decoder (on the left pane) and see the live result (on the right pane). To edit faster, click & hold (or Ctrl + ~) on the underlined items -> it works on Math functions, operators and numbers.

demo: https://alexadam.github.io/demos/dynamic-glitch/dist/dynamic-png/index.html

examples:

https://vimeo.com/160601444

https://vimeo.com/160601817

![alt dyn-glitch-ex.png](https://github.com/alexadam/glitch-studio/blob/master/examples/dyn-glitch-ex.png?raw=true)

## JPEG -> GIF Glitch

Create a GIF animation by repeating an image + random glitch

Demo: https://alexadam.github.io/demos/dynamic-glitch/dist/jpeg-to-gif/index.html

Example:

![alt gif-ex.png](https://github.com/alexadam/glitch-studio/blob/master/examples/gif-ex.png?raw=true)

![alt glitch-mona.gif](https://github.com/alexadam/glitch-studio/blob/master/examples/monalisa-glitch.gif?raw=true)

## JPEG Glitch

Demo: https://alexadam.github.io/demos/dynamic-glitch/dist/static-jpeg/index.html

![alt glitch-mona-jslib.jpg](https://github.com/alexadam/glitch-studio/blob/master/examples/mona-glitch-jslib.png?raw=true)

![alt glitch-mona.jpg](https://github.com/alexadam/glitch-studio/blob/master/examples/monalisa-glitch.jpg?raw=true)

## Credits

PNG codec: https://github.com/devongovett/png.js/

Editor: https://codemirror.net/

GIF lib: https://github.com/jnordberg/gif.js

Background image: https://www.pexels.com/photo/grayscale-photo-of-road-1038935/