Uploaded October 2022 | Updated September 2026, 2 weeks ago
In this video I teach you how to use vanilla JavaScript to make a Theremin that you can play by moving a blue marker in front of 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 procedural sound. 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
⭐️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:41 Project setup
2:34 Accessing Camera
6:39 Implementing the Effect class
11:34 Getting Image Data from HTML Canvas
14:19 Get blue Pixel Locations
20:53 Distance between Colors
24:59 Getting the Average location
28:10 Procedural Sound using WebAudioApi
In this video I teach you how to use vanilla JavaScript to make a Theremin that you can play by moving a blue marker in front of 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 procedural sound. 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
⭐️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:41 Project setup
2:34 Accessing Camera
6:39 Implementing the Effect class
11:34 Getting Image Data from HTML Canvas
14:19 Get blue Pixel Locations
20:53 Distance between Colors
24:59 Getting the Average location
28:10 Procedural Sound using WebAudioApi
![A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]](https://i.ytimg.com/vi/kS4zDKC7LLs/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. Now, its time to introduce road markings to enforce traffic rules. These rules are not just about creating realistic road behavior; they are the key to unlocking the full potential of phase 3, where we dive into more advanced AI techniques.
Given that our world remains predominantly 2D, well implement these rules as markings on the road. These markings will snap to the road and always maintain the correct orientation. The philosophy is simple: users should have to do as little as possible to create something nice. This user-centric approach is a guiding principle in all UI development.
Have Fun! :-) 🚗🛣️
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
6. Fake3D = follow along
7. Markings = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emojis I used in the video⭐
🌐🛑🚶🚙🅿️🚦⚠️🎯
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00:00 Introduction
00:01:09 Preparing for 2 Editors
00:08:44 Bind in JavaScript
00:14:53 Implementing the Stop Editor
00:40:10 Implementing the Crossing Editor
00:48:51 Refactoring using Inheritance
01:01:13 Implementing the Start Editor
01:04:26 Four more Markings")
