Uploaded May 2023 | Updated September 2026, 2 weeks ago

---

In this video I teach you how to use vanilla JavaScript to make a fake Pinwheel that appears over a blue marker when shown to the camera. We code this effect from scratch and display it over the video coming from the camera in real-time. It's a small project that teaches you about accessing the camera, basic image processing and some physics. Have fun!

⭐️LINKS⭐️
Lesson on Interpolation (LERP): youtu.be/J_puRs40GhM
Video about the Squared Root: youtu.be/VIWw8evmg6o
Pythagorean Theorem: youtu.be/iqSlzYXdFzw

⭐️MY OTHER JS VFX⭐️
Torch: youtu.be/Q_SbeuxHUzA
Spiderman's web shooters: youtu.be/xkhvb_GYgx4
Dr. Strange's portal opening: youtu.be/0SxiyLk2IMM
KameHameHa: youtu.be/qcQqlzYCXNM
Matrix Effect on shirt: youtu.be/GmB0ge-CuZo
Theremin: youtu.be/k8seP2yEKqQ
Fake Sparkler: youtu.be/AlWtWbOxY3Q

⭐️CODING ULTRAMARATHON⭐️
I implemented many javascript camera effects during my coding ultramarathon: youtube.com/playlist?list=PLB0Tybl0UNfYqtrzXghkjL3UP1-17D3rE

⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
0:35 Project setup
2:28 Accessing Camera
6:33 Implementing the Effect class
11:28 Getting Image Data from HTML Canvas
14:13 Get blue Pixel Locations
20:47 Distance between Colors
24:53 Getting the Average location
27:10 Creating the Pinwheel
35:27 Animating the Pinwheel