glitch effect

[jeffreybarry]

tv out

[jeffreybarry]

tv glitch over still image https://ykob.github.io/sketch-threejs/sketch/glitch.html https://codepen.io/ykob/pen/GmEzoQ

then moving to noise effect, then being replaced by a modern image.

tv static noise effect https://codepen.io/alenaksu/pen/dGjeMZ

[jeffreybarry]

The ykob demo is a fancy cool demo but not enough info in the source to be able to replicate it.

[jeffreybarry]

The following css only code works adequately: https://www.creativebloq.com/how-to/how-to-create-glitch-text-and-image-effects-in-css

Would like to add more glitch effects.

Another, untried, option for glitch effects: https://github.com/codrops/CSSGlitchEffect

[jeffreybarry]

Another tv static noise effect: https://github.com/sarathsaleem/grained

Poor documentation took a while to understand how to adjust the grain. There is apparently no "tv" option that you can just plug in. You have to adjust the options. But there is a codepen for experimenting with the options at https://codepen.io/Sembah/pen/PJWYRb

[jeffreybarry]

grained.js is quite fun to play with!

patternWidth: 350, bigger number is more hectic patternHeight: 100, smaller number is more hectic grainOpacity: 0.05, higher number lightens the image. grainDensity: 5, change to 1 and you can better see the effect of the following variables. Raising the number makes the screen darker. grainWidth: 10, determines the width...a smaller number is more like a tv effect grainHeight: 6 higher number creates thicker, i.e., higher, bands

[jeffreybarry]

I'm starting with

animate: true, patternWidth: 350, patternHeight: 50, grainOpacity: 0.25, grainDensity: 8, grainWidth: 10, grainHeight: 10

[jeffreybarry]

The problem with the codepen demo is that it's over a black background, so it gives a misleading impression of how it will look over an image. Experiment with how it looks over the Bill & Monica image.

[jeffreybarry]

How do these settings work over a color image? patternWidth: 350, patternHeight: 50, grainOpacity: 0.25, grainDensity: 8, raising number results in a barely visible grain. lower number (2) completely obliterates the image. #5 is in-between...grain over barely visible image. grainWidth: 10, grainHeight: 10

[jeffreybarry]

Way to scale grainDensity over time?

It's enabled through keyframe animation in CSS. Way to set a timer in the main code on that to adjust the grainDensity?

[jeffreybarry]

tv out is final effect