Uploaded June 2024 | Updated September 2026, 2 weeks ago
Join me on a train ride as I recreate my first train simulation using JavaScript! 🚂 In this video, I'll show you how to draw train tracks and animate a train using dashed lines and Bezier curves, all on an HTML Canvas. Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Here's what you'll learn:
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing train tracks procedurally with JavaScript
- Creating and animating a train along the tracks
- Implementing smooth curves with Bezier curves
- Adding interactivity with customizable parameters
- Live coding challenges and solutions
Check out the final demo on my website and stay tuned for more projects, including a game based on the trolley problem! Like, comment, and subscribe for more coding adventures.
Old Version: youtu.be/ZNkapOL4OBw
DEMO: radufromfinland.com/projects/train_2
Join me on a train ride as I recreate my first train simulation using JavaScript! 🚂 In this video, I'll show you how to draw train tracks and animate a train using dashed lines and Bezier curves, all on an HTML Canvas. Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Here's what you'll learn:
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing train tracks procedurally with JavaScript
- Creating and animating a train along the tracks
- Implementing smooth curves with Bezier curves
- Adding interactivity with customizable parameters
- Live coding challenges and solutions
Check out the final demo on my website and stay tuned for more projects, including a game based on the trolley problem! Like, comment, and subscribe for more coding adventures.
Old Version: youtu.be/ZNkapOL4OBw
DEMO: radufromfinland.com/projects/train_2
![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")
