Uploaded March 2025 | Updated September 2026, 2 weeks ago
In this video, I’ll show you how to add a fun twist to the Bad Apple video by generating apples on the black regions of the image. We’ll use basic JavaScript and HTML Canvas to overlay these apples and create a unique animation effect. By the end of this tutorial, you’ll learn how to enhance visual effects and add creative elements to your projects. Let’s get started and make those apples pop!
Inspiration by @linguinelabs : youtube.com/watch?v=lT-fdnIK0k0
Video you can use to follow along:
radufromfinland.com/data/ballerina.mp4
Emoji: 🍎
In this video, I’ll show you how to add a fun twist to the Bad Apple video by generating apples on the black regions of the image. We’ll use basic JavaScript and HTML Canvas to overlay these apples and create a unique animation effect. By the end of this tutorial, you’ll learn how to enhance visual effects and add creative elements to your projects. Let’s get started and make those apples pop!
Inspiration by @linguinelabs : youtube.com/watch?v=lT-fdnIK0k0
Video you can use to follow along:
radufromfinland.com/data/ballerina.mp4
Emoji: 🍎
![Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]](https://i.ytimg.com/vi/jy-Mxbt0zww/mqdefault.jpg "Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
Remember those early mobile games where you could steer by tilting the phone? In this video, Ill guide you through using the device orientation sensor to capture tilt movements. Its a fantastic technique that opens up a world of possibilities for game control.
Lets explore the potential of this feature not just for games, but for other applications too. Ill share my friends creation, Jazzman vs. Metalheadz, which showcases the versatility of tilt controls.
The applications extend beyond gaming – think about measuring tree heights or distances to distant objects. If youre interested, I have tutorials on those topics as well. Towards the end of the video, Ill demonstrate how to integrate tilt controls into our racing game, tying it back to the Understanding AI course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention well be doing some nononooooo again? You wont want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
My Videos with Markers: https://www.youtube.com/playlist?list=PLB0Tybl0UNfb2mpLdkgVNRHC1VCMGthq_
Coding my Personal Avatar: https://youtu.be/U88NM8ScsPY
Summary of the Avatar Project: https://youtu.be/JFMTudIJLH0
#ImageProcessing #JavaScriptImageProcessing #JavaScriptMarkerDetector #JavaScriptMarkers
⭐TIMESTAMPS⭐
00:00 Introduction
01:21 Basic Project Setup
02:43 Accessing the Camera
04:45 Image Processing
08:10 Getting the ImageData
13:38 Measuring Blueness of Pixels
21:43 Visualizing Pixel Properties
26:30 Thresholding
28:41 Marker Location and Size
32:49 Two Markers")
![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")
