Uploaded March 2025 | Updated September 2026, 2 weeks ago
In this video, I'll guide you through creating an optical illusion where TV static animates over black regions of an image, making the static look like a clear picture when the video plays but appear as just noise when paused. We’ll use the famous "Bad Apple" video as our input and code this effect using basic JavaScript and HTML Canvas. By the end of this tutorial, you’ll have a unique animation effect and a fun new skill in your coding toolkit. Let’s dive into this static illusion and see how it all works!
Bad Apple: youtube.com/watch?v=FtutLA63Cp8
Inspiration by @elmusfire : youtube.com/watch?v=waF0LQ5S0BU
Video you can use to follow along:
radufromfinland.com/data/ballerina.mp4
Video for the challenge:
radufromfinland.com/data/static.webm
Smaller one:
radufromfinland.com/data/static_small.webm
In this video, I'll guide you through creating an optical illusion where TV static animates over black regions of an image, making the static look like a clear picture when the video plays but appear as just noise when paused. We’ll use the famous "Bad Apple" video as our input and code this effect using basic JavaScript and HTML Canvas. By the end of this tutorial, you’ll have a unique animation effect and a fun new skill in your coding toolkit. Let’s dive into this static illusion and see how it all works!
Bad Apple: youtube.com/watch?v=FtutLA63Cp8
Inspiration by @elmusfire : youtube.com/watch?v=waF0LQ5S0BU
Video you can use to follow along:
radufromfinland.com/data/ballerina.mp4
Video for the challenge:
radufromfinland.com/data/static.webm
Smaller one:
radufromfinland.com/data/static_small.webm
