Nice! It’s the polish and attention to detail that really distinguishes this from something purely generated with AI. Getting the design details right shows the human touch.
I capture each of the frames and process it pixel by pixel[1]. There are 3 inputs to the simulation
1. The gain knob controls the overall intensity of the effect
2. The selected pins / effects are applied to the frame. I describe a couple of the effects below:
For HClock:
If the horizontal clock pin is selected, I cut the frame into variable height slices (some are 2-3px, others 8-20px). For each slice, I calculate a random shift (up to ~20% of the frame width) and move the slice to the left or right by the shift value. Then I randomise between keeping the slice normal (70% of the time), black (15%), or a random color band (15%). I then add a magenta tint + darken every other line to simulate a broken TV signal.
For OD:
If output drain pin is selected, I compute a random global offset and per line offet jitter. Then for each of the pixels, I move the red to the left and blue to the right by the jitter value.
After the effects are added, I add a global noise, some corrupt lines (on ~30% of the frames, random horizontal lines of magenta/pink/white, shifted/added)
3. Finally a global hue shift is added based on the second knob.
One thing I realised is that Math.random() produced a lot of noise and flow between the frames looked disorienting. So I used a simple integer hash function to produce a more "deterministic" random number and the frames looked more stable/consistent.
[1] I should probably look for optimisations to prevent the device heating up after a few minutes.
Nice! It’s the polish and attention to detail that really distinguishes this from something purely generated with AI. Getting the design details right shows the human touch.
That was exactly my experience with AI coding - useful for ideas and boiler plate code, but not much more.
I love it. The aesthetics are fantastic. Can this record a video as well?
Great job and thank you, I will be using this. I already love to use my phone camera, it's nice to have a glitch option.
I like that it is based on hardware fundamentals.
Cool project. Love that it's entirely client-side — no uploads, no server processing. More browser tools should work this way.
It looks very convincing, and funky. How does the simulation work?
I capture each of the frames and process it pixel by pixel[1]. There are 3 inputs to the simulation
1. The gain knob controls the overall intensity of the effect
2. The selected pins / effects are applied to the frame. I describe a couple of the effects below:
For HClock: If the horizontal clock pin is selected, I cut the frame into variable height slices (some are 2-3px, others 8-20px). For each slice, I calculate a random shift (up to ~20% of the frame width) and move the slice to the left or right by the shift value. Then I randomise between keeping the slice normal (70% of the time), black (15%), or a random color band (15%). I then add a magenta tint + darken every other line to simulate a broken TV signal.
For OD: If output drain pin is selected, I compute a random global offset and per line offet jitter. Then for each of the pixels, I move the red to the left and blue to the right by the jitter value.
After the effects are added, I add a global noise, some corrupt lines (on ~30% of the frames, random horizontal lines of magenta/pink/white, shifted/added)
3. Finally a global hue shift is added based on the second knob.
One thing I realised is that Math.random() produced a lot of noise and flow between the frames looked disorienting. So I used a simple integer hash function to produce a more "deterministic" random number and the frames looked more stable/consistent.
[1] I should probably look for optimisations to prevent the device heating up after a few minutes.
It was fun to use glitchycam. Thank you for describing your journey with AI, that is similar what I am experiencing.
Love it! Bookmarked :-)