snorpey / jpg-glitch

glitch images with jpg encoding

image glitch experiment

this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched".

online demo

this experiment is very much based on the smack my glitch up js script.

a desktop app of the jpg-glitcher is also available. you can download it here.

glitch effect code

if you're a developer and just interested in the code for the glitch effect, there's a separate repository for that: glitch-canvas.

third party code used in this experiment

• localforage by mozilla, Apache License 2.0
• requirejs, by jrburke, BSD & MIT license
• almond, by jrburke, BSD & MIT license
• javascript-md5, by blueimp, MIT license
• reqwest, by ded, MIT license
• glitch-canvas, by snorpey, MIT license
• material design icons, by templarian, Open Font License 1.1

license

MIT License

development

if you're interested in adding features, fixing bugs the code, or running the tool on your own server, here are some pointers to help you get familar with the code base.

if you have questions about the code, don't hesitate to open an issue or send me an email.

• config.js: all defaults and settings are in here
• glitcher.js the main app starting point. all events are hooked up in here.
• the app does not use any big dom libraries or app frameworks (like jquery, angular or react)
• where possible, the app uses webworkers for complex tasks
• all strings that are displayed to the user are located in the lang/ folder. for each language, a different file is created.
• the app uses a serviceworker to make it available offline in browsers that support it
• the app was built without any preprocessors in mind. using the build script is entirely optional and not required to get the app to work.

build script

the build script takes care of concatenating and minifying all scripts and styles. it uses gruntjs.

please make sure that both nodejs and npm are set up properly] on your machine.

run npm install to install the dependencies of the build script.

to build, run npm run build the optimized files will get copied to the production/ folder.

missing something?

found a bug? missing a feature? instructions unclear? are you using this tool in an interesting project? maybe have a look at the issues, open a pull request and let me know. thanks!

most importantly

thank you for taking a look at this repo. have a great day :)

jpg-glitch's Issues

Export fails with large image

Probably not unexpectedly, exporting fails with a large image. Try: https://iammadeofrobots.files.wordpress.com/2013/09/asianeyes.jpg

A little translate issue

This is not important but on the russian noun that means control it is written in the plural.
"УПРАВЛЕНИЯ" - wrong
"УПРАВЛЕНИЕ" - good

separate module for logic

would be cool if the main glitching logic was separated and could be used in node.js as well

use npm scripts for build

npm run build is a little bit easier that installing + setting up grunt-cli.

add download button

add a download button to the workspace where appropriate so users don't have to open the menu first.

ask for persistent storage if available

use the persistent storage api if available for storing things on the device https://developer.chrome.com/apps/offline_storage#asking_more

fix empty notification message issue

sometimes, if a translation file was unable to load, it shows a notification with undefined as text. not cool. don't show this empty notifications. even better: fix the non-loading notifications.

Camera access doesn't work properly on Chrome for Android

On Chrome for Android, the device never asks to access the camera.

Blank page in Firefox

Nothing is displayed.
The error in the console shows:
NS_ERROR_UNEXPECTED: jpg-glitch:1:0

Errors after compiling the production build

Hey,

After building the production version there are a lot of problems with missing files and incorrect paths. Is there anything that needs amending in the scripts?

Thanks for the project by the way!

Thanks,

Trying to run

Sorry I'm a code novice, so please forgive my ignorence. I'm trying to get to get this to run locally using Chrome or Waterfox. I can get it to load into Chrome and see the initial loading prompt, but then get a DNS_PROBE_FINISHED_NXDOMAIN error. When I try to load this into Waterfox, It will not load anything. Do you have any better suggestions for loading and running locally? I love this script as well as your triangulation script. I use them often for my art and would love to use them running locally. Thanks!

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

add save button

move save button out of menu so users don't have to open the menu first

Run locally?

Perhaps I am missing something, but I can't seem to get this to run locally on my machine. For a reason unknown to me, I can't seem to open any image within the app.

Any ideas?

improve mobile experience

At some point I'd like optimize interface, design and code to work better on mobile devices.

Two improvements...

This is such a fun image glitcher. I use this very often (so much so that I have an offline copy which I messed around with). I managed to multiply everything by 10, and the glitches were extraordinary at iteration counts of 100 and above - until the grey pixels set in:

Is there a way of reducing the grey pixels whilst keeping the images glitched? I would love to have something like this: (http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator), but the image is made smaller when using that one and it's a bit less comprehensive.

Unable to clone or unpack zip to Windows due to folder /scripts/aux

Aux is a reserved folder/filename in Windows.

http://msdn.microsoft.com/en-us/library/windows/desktop/aa365247(v=vs.85).aspx