Uploaded May 2023 | Updated September 2026, 2 weeks ago
We learn to use the device orientation using vanilla javascript. We use the device orientation to create an old-school (vintage) hologram effect similar as those in this video:
youtu.be/7sED8ooVbjY
(Polaroid phantagrams The World of Nature Krypton laser holograms by @Smirholo)
You can create this effect with simple, vanilla JavaScript and using two images on your computer. For example, I use the images with Leonard and Radu from here:
radufromfinland.com/projects/hologram/A.png
radufromfinland.com/projects/hologram/B.png
Leonard and Radu are characters in many of my Edutainment videos from here:
youtube.com/playlist?list=PLB0Tybl0UNfZ3H76c_tHVJa18URCr_nlU
To test on your device, you can upload your code to github and use github pages, or, as I show in the tutorial, you can use codepen.
⭐ MORE LINKS ⭐
Interpolation Video
youtu.be/J_puRs40GhM
Codepen
codepen.io/gniziemazity/pen/bGxPPEq
Same place different seasons:
mountainphotographer.com/same-place-different-season
We learn to use the device orientation using vanilla javascript. We use the device orientation to create an old-school (vintage) hologram effect similar as those in this video:
youtu.be/7sED8ooVbjY
(Polaroid phantagrams The World of Nature Krypton laser holograms by @Smirholo)
You can create this effect with simple, vanilla JavaScript and using two images on your computer. For example, I use the images with Leonard and Radu from here:
radufromfinland.com/projects/hologram/A.png
radufromfinland.com/projects/hologram/B.png
Leonard and Radu are characters in many of my Edutainment videos from here:
youtube.com/playlist?list=PLB0Tybl0UNfZ3H76c_tHVJa18URCr_nlU
To test on your device, you can upload your code to github and use github pages, or, as I show in the tutorial, you can use codepen.
⭐ MORE LINKS ⭐
Interpolation Video
youtu.be/J_puRs40GhM
Codepen
codepen.io/gniziemazity/pen/bGxPPEq
Same place different seasons:
mountainphotographer.com/same-place-different-season
![A Virtual World - JavaScript Course: Lesson 9 / 11 [Self-driving Car Integration]](https://i.ytimg.com/vi/wH2aNJxltus/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 9 / 11 [Self-driving Car Integration]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. Today we’ll take the final code from Phase 1 and add everything we coded now, in Phase 2, next to it. We’ll first strip the code from phase 1 of some unnecessary things and then make the car move in the new virtual world.
Have Fun :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
8. Saving The World = follow along
9. Integration = code after this lesson
💻CODE WE NEED FROM PHASE 1💻
https://github.com/gniziemazity/Self-driving-car
Well use: 9. Fine-tuning
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
00:47 Combined Project Setup
01:25 Stripping unnecessary Self-driving Code
04:52 Integrating the World Code
19:24 Making the car see Buildings
20:51 Making the car see Road Borders
21:35 Artificial Intelligence")
