10 ms·

Show HN: Glitch Image Generator

94 points by adamfuhrer 5y ago

cityzen 5y ago
it would be cool if it could do 2-3 frame gif animations to give it that old school video game feel.
tomcooks 5y ago
I've experimented by injection of a random string right in the jpeg buffer
- dylan604 5y ago
  This is what I was thinking. This glitch example in particular just does not look real. More like inspired by type of thing. Take an image and randomly tweak some of the data via hex editor (do it inline with a python type script). Get a real glitch right from the decoder! I have the same feeling towards a lot of the video glitches where they try to make digital video look like it has VHS level issues. The source video captured today is just so much more detailed than VHS, so even glitched it looks clean.
  - tomcooks 5y ago
    As long as you don't touch the very first bytes most images should break nicely
omgmajk 5y ago
Lmao this is fantastic. Top knotch.
venamresm__ 5y ago
I dived into glitching once, but from a file format perspective instead of a generative art perspective: https://venam.nixers.net/blog/programming/2020/10/05/corruption-at-the-core.html https://venam.nixers.net/blog/programming/2020/10/05/corrupt...
- aimor 5y ago
  This is great! I took the same approach to my glitch art: edit the file data to introduce glitches true to the image format. It's been over a decade since then and your post has me itching to get back into it so thank you!
- kingcharles 5y ago
  That's a great in-depth look, thank you.
adamfuhrer 5y ago
Thanks for checking it out! Was a lot of fun to build. You can view the source for it here: https://github.com/adamfuhrer/glitch-image https://github.com/adamfuhrer/glitch-image
aeroheim 5y ago
I like it! The filters make for a simple yet convincing glitch effect even with the basic block generation algorithm. If you would like to go an extra step to make it look even fancier, you could try introducing some more block variation (e.g thin lines, squares, rectangles) that could be done with noise based tiling (e.g simplex/perlin). Throw in some RGB shifting and image cropping for some of the blocks and you'll probably get something real nice. I implemented a glitch effect some time ago using what I described above, you can see what it looks like (under glitch transition). Hopefully it can provide some inspiration :-) https://aeroheim.github.io/midori/ https://aeroheim.github.io/midori/
- ghostbrainalpha 5y ago
  Man, that is an incredible glitch animated transition. If you keep working on that I'd love the ability to see how it looks like my own background images right on the page.
- breakfastduck 5y ago
  Not just the glitch but this whole project produces some great results!
vintermann 5y ago
Nice! I've experimented a bit with bijective compression for making glitch images myself (mostly because it was easier and more fun than trying to make a practical bijective compressor). I did a burrows-wheeler transform (the central technique of bzip2) on the pixels of an image, edited a few pixels in the transformed image, then inverted the transformation. It gave me results like this: https://imgur.com/a/bHQreKy https://imgur.com/a/bHQreKy I'm sorry the code isn't (even) presentable enough for Show HN :)
tyingq 5y ago
Different type of glitch, but the "video glitch" in an ImageMagick script is pretty neat: http://www.fmwconcepts.com/imagemagick/videoglitch/index.php http://www.fmwconcepts.com/imagemagick/videoglitch/index.php (scroll down to see the examples)
- rikroots 5y ago
  That's an interesting effect. I assume the affected blocks are set up so that each row uses the glitch factor of the row above and varies from it by a (small) random value? I recently wrote a glitch filter for my canvas library[1]. It might be a fun Christmas project to add functionality to emulate that effect in the filter. [1] demo - https://scrawl-v8.rikweb.org.uk/demo/filters-025.html https://scrawl-v8.rikweb.org.uk/demo/filters-025.html
thebeardisred 5y ago
Super interesting! I've been playing with this and with glitch art. If I may make a request though, adding an explicit license to your code on GitHub would be primo.
Cody_C 5y ago
That is a cool site. I made something similar at https://glitchstar.com/ https://glitchstar.com/ I think it is cool what humans make into art.
breakfastduck 5y ago
The results produced here are really nice. Simple tool ultimately but I've used similar before where the images are technically 'glitched' but are certainly not aesthetically pleasing. This outputs some good looking stuff. Perfect for an idm album cover!
srg0 5y ago
It's a nice filter, but not a glitch. True glitch should unpredictably damage data or device. The point is to seek aesthetics in malfunction. The generator mentioned in other comments https://snorpey.github.io/jpg-glitch/ https://snorpey.github.io/jpg-glitch/ looks more authentic.
akx 5y ago
For something a little more involved, I've written a modular glitch tool with animation features... https://akx.github.io/glitch2/ https://akx.github.io/glitch2/
marto1 5y ago
Is there something in the algo that inherently skews the effect to the right ? All times I tried the glitches were to the right of the center of the image.
- adamfuhrer 5y ago
  Updated the code to slightly correct this :) https://github.com/adamfuhrer/glitch-image https://github.com/adamfuhrer/glitch-image
- mikojan 5y ago
  It's a glitch.
  - hanniabu 5y ago
    So meta
- NovemberWhiskey 5y ago
  I feel like the glitch starting x position and the length are both being randomly generated based on the dimensions of the image, which results in more glitchiness on the right edge than the left edge?
- mdrzn 5y ago
  They are definitely more on the right than on the left.
taffronaut 5y ago
It sort of emulates MPEG2 macroblock errors where the decoder would give up on a row of macroblocks (leaving previous image data unchanged) and restart on the next line. In that case the glitches often started part-way along a line with a badly errored square macroblock in magenta or green.
Inversechi 5y ago
Reminds me of this tool: https://snorpey.github.io/jpg-glitch/ https://snorpey.github.io/jpg-glitch/

94 points by adamfuhrer 5y ago

cityzen 5y ago

it would be cool if it could do 2-3 frame gif animations to give it that old school video game feel.

tomcooks 5y ago

I've experimented by injection of a random string right in the jpeg buffer

dylan604 5y ago
This is what I was thinking. This glitch example in particular just does not look real. More like inspired by type of thing. Take an image and randomly tweak some of the data via hex editor (do it inline with a python type script). Get a real glitch right from the decoder! I have the same feeling towards a lot of the video glitches where they try to make digital video look like it has VHS level issues. The source video captured today is just so much more detailed than VHS, so even glitched it looks clean.
- tomcooks 5y ago
  As long as you don't touch the very first bytes most images should break nicely

omgmajk 5y ago

Lmao this is fantastic. Top knotch.

venamresm__ 5y ago

I dived into glitching once, but from a file format perspective instead of a generative art perspective: https://venam.nixers.net/blog/programming/2020/10/05/corruption-at-the-core.html https://venam.nixers.net/blog/programming/2020/10/05/corrupt...

aimor 5y ago
This is great! I took the same approach to my glitch art: edit the file data to introduce glitches true to the image format. It's been over a decade since then and your post has me itching to get back into it so thank you!
kingcharles 5y ago
That's a great in-depth look, thank you.

adamfuhrer 5y ago

Thanks for checking it out! Was a lot of fun to build. You can view the source for it here: https://github.com/adamfuhrer/glitch-image https://github.com/adamfuhrer/glitch-image

aeroheim 5y ago

I like it! The filters make for a simple yet convincing glitch effect even with the basic block generation algorithm. If you would like to go an extra step to make it look even fancier, you could try introducing some more block variation (e.g thin lines, squares, rectangles) that could be done with noise based tiling (e.g simplex/perlin). Throw in some RGB shifting and image cropping for some of the blocks and you'll probably get something real nice. I implemented a glitch effect some time ago using what I described above, you can see what it looks like (under glitch transition). Hopefully it can provide some inspiration :-) https://aeroheim.github.io/midori/ https://aeroheim.github.io/midori/

ghostbrainalpha 5y ago
Man, that is an incredible glitch animated transition. If you keep working on that I'd love the ability to see how it looks like my own background images right on the page.
breakfastduck 5y ago
Not just the glitch but this whole project produces some great results!

vintermann 5y ago

Nice! I've experimented a bit with bijective compression for making glitch images myself (mostly because it was easier and more fun than trying to make a practical bijective compressor). I did a burrows-wheeler transform (the central technique of bzip2) on the pixels of an image, edited a few pixels in the transformed image, then inverted the transformation. It gave me results like this: https://imgur.com/a/bHQreKy https://imgur.com/a/bHQreKy I'm sorry the code isn't (even) presentable enough for Show HN :)

tyingq 5y ago

Different type of glitch, but the "video glitch" in an ImageMagick script is pretty neat: http://www.fmwconcepts.com/imagemagick/videoglitch/index.php http://www.fmwconcepts.com/imagemagick/videoglitch/index.php (scroll down to see the examples)

rikroots 5y ago
That's an interesting effect. I assume the affected blocks are set up so that each row uses the glitch factor of the row above and varies from it by a (small) random value? I recently wrote a glitch filter for my canvas library[1]. It might be a fun Christmas project to add functionality to emulate that effect in the filter. [1] demo - https://scrawl-v8.rikweb.org.uk/demo/filters-025.html https://scrawl-v8.rikweb.org.uk/demo/filters-025.html

thebeardisred 5y ago

Super interesting! I've been playing with this and with glitch art. If I may make a request though, adding an explicit license to your code on GitHub would be primo.

Cody_C 5y ago

That is a cool site. I made something similar at https://glitchstar.com/ https://glitchstar.com/ I think it is cool what humans make into art.

breakfastduck 5y ago

The results produced here are really nice. Simple tool ultimately but I've used similar before where the images are technically 'glitched' but are certainly not aesthetically pleasing. This outputs some good looking stuff. Perfect for an idm album cover!

srg0 5y ago

It's a nice filter, but not a glitch. True glitch should unpredictably damage data or device. The point is to seek aesthetics in malfunction. The generator mentioned in other comments https://snorpey.github.io/jpg-glitch/ https://snorpey.github.io/jpg-glitch/ looks more authentic.

akx 5y ago

For something a little more involved, I've written a modular glitch tool with animation features... https://akx.github.io/glitch2/ https://akx.github.io/glitch2/

marto1 5y ago

Is there something in the algo that inherently skews the effect to the right ? All times I tried the glitches were to the right of the center of the image.

adamfuhrer 5y ago
Updated the code to slightly correct this :) https://github.com/adamfuhrer/glitch-image https://github.com/adamfuhrer/glitch-image
mikojan 5y ago
It's a glitch.
- hanniabu 5y ago
  So meta
NovemberWhiskey 5y ago
I feel like the glitch starting x position and the length are both being randomly generated based on the dimensions of the image, which results in more glitchiness on the right edge than the left edge?
mdrzn 5y ago
They are definitely more on the right than on the left.

taffronaut 5y ago

It sort of emulates MPEG2 macroblock errors where the decoder would give up on a row of macroblocks (leaving previous image data unchanged) and restart on the next line. In that case the glitches often started part-way along a line with a badly errored square macroblock in magenta or green.

Inversechi 5y ago

Reminds me of this tool: https://snorpey.github.io/jpg-glitch/ https://snorpey.github.io/jpg-glitch/