A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]

Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. This is the final video of Phase 2. In it, you'll learn to load the large world from the last lesson and implement a mini-map.
The mini-map really helps when the world we create is very big. Let's learn to code one using JavaScript and HTML Canvas. 🗺️
Have Fun! :-)
⭐PLAYLIST⭐
• Self-driving Car :: Ph...
⭐FINAL APP⭐
radufromfinland.com/projects/...
💻CODE💻
github.com/gniziemazity/virtu...
10. OpenStreetMap = follow along
11. MiniMap = code after this lesson
⭐ALL PREREQUISITES⭐
• Math & Code Fundamentals
☕Buy me a Coffee?☕
www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
00:42 Including the Large World File
02:49 Preparing for the MiniMap
05:48 MiniMap Implementation
07:58 Scaling the MiniMap
11:00 Marking the MiniMap center
11:49 Outro

[@axonile836]

I watched the 11 vids and here is the main lesson : the most important is not the code and the math but what you actually want to do. Those are just tools to be wisely used .

[@Radu]

Probably the best lesson one can learn from the course.

[@thespiritninja11]

You're an absolute genius man, Thank you for this!

[@Radu]

Not really... just a lot of practice. You're welcome :-)

[@JeremiKress]

I've started recommending your videos to my class. We absolutely love your enthusiasm for Computer Science 💜💜💜

[@Radu]

Wow, thank you :-)

[@Pwnstara]

Awesome project, thank you! Learned a lot about JS so far and looking forward to phase 3!

[@Radu]

You're welcome. Phase 3 just started, btw :-)

[@pablovaldes2397]

love these projects man, ever since i stumbled upon creative coding i've enjoyed it so much more

[@Radu]

Great to hear! :-)

[@javifontalva7752]

Amazing 🎉. This is probably the project I have learnt the most (also the most difficult one by far). Thanks

[@Radu]

Really happy to hear that :-)

[@adilsonbuset738]

Muito obrigado, Mestre Radu! Concluí o projeto e foi no mínimo muito divertido.

[@Radu]

Happy to hear you made it to the end :-)

[@wagnerperin9455]

Mannn.... you're amazing!!! Will try to follow all videos... but for now... congrats from Brazil.

[@Radu]

Thank you :-) and season's greetings from Finland!

[@javifontalva7752]

My goodness! This was probably the easiest past of the project! Great job! Actually I know when I start doing the minimap it won't be as easy as you make it look. Terrific vid!

[@Radu]

If you got this far, I'm sure you'll manage :-)

[@javifontalva7752]

@@Radu yes. I also added a clip. I didn't know how to do it at first but I managed.

[@Radu]

@@javifontalva7752 clip?

[@ahmedshalaby948]

When are you going to start implementing Phase 3, man? By the way, this is an absolute masterpiece!

[@Radu]

February 2nd will be the first lesson.

[@fmaion]

Amazing!!! Thank you!!

[@Radu]

You're so welcome! :-)

[@malaysiastreetview]

Thank you for great video

[@Radu]

You're welcome!

[@2difficult2do]

Thank you for this very interesting course. 12 out of 11 👍👍👍. That's impressive!

[@Radu]

Thank you :-)

[@martintmv]

legend

[@Radu]

Thanks!

[@astkh4381]

Wow , very impressive

[@Radu]

Thank you :-)

[@AyorindeAdesugba]

This is wonderful content. Waiting for Phase 3

[@Radu]

Working on it. Still have 4 videos to film on Monday, and then all the intros on Tuesday... Editing happens after the holidays. Planning to start posting it at the end of January / beginning of February.

[@AyorindeAdesugba]

@@Radu Its going to be the longest wait for great content. Thanks for the ability to teach well - I stumbled on this and I am hooked.

[@Radu]

@@AyorindeAdesugba People waited over a year for phase 2 :-)) this is nothing. Phase 4 will probably be a really long wait again, though...

[@user-or3yg6sr4d]

These programs are so beautiful! I'm wondering, in the final version, if the buildings and landscapes inside have different styles. How are those customized? I want to use them in the maps I create during the course.

[@user-or3yg6sr4d]

He's currently stuck because the buildings are automatically generated, and he's not sure how to handle them.

[@Radu]

Not sure what you mean... You want to style the buildings differently? What do you mean by landscapes?

[@mahimabhardwaj1807]

amazing radu:)

[@Radu]

Thanks!

[@himanshurai2854]

Thank you for making such projects for us . I learnt a lot from these videos of yours ,but I wanna know How did you create your virtual world app? How did you add destination feature?

[@Radu]

It's basically the dijkstra lessons from Phase 3. I have a set of destinations and when the car approaches one I randomly choose a new one... I also do some slight manipulation to the graph (I cut the last segment traveled by the car, so it doesn't turn back the same way if that is the shortest path to the new place).

[@inowatchvideos]

Will you be doing any viewport culling? It’s crazy how you can just draw all items and its performant. (I’m thinking of simondev latest video). (I’m still on part 4, but i took a sneak peak, the cheat!)

[@Radu]

Cool, that video was recommended to me few days ago, but didn't have time to check it out. We don't have such complex shapes, just few polygons, really... To make huge worlds like described in that video you need a lot of steps (just as explained there), but I don't bother because... too much work and you get bored watching the cars in about 5 minutes or so :-D so... not worth to make them go around the planet :-D

[@lahcsinayrahca]

Still waiting for next phase bro... 🎉❤

[@Radu]

Will start on February 2nd.

[@karthikm.1804]

can we run bfs algorithm in this map to find distance between any two location?

[@Radu]

Sure, you can learn bfs on it. But it won't give you the (min) distance between two locations. It will give the minimum number of segments between the two locations. They can have any size. Imagine two ways to go from A to B: one with 10 small segments, almost in a straight line and another with 2 big segments going on a significant detour. You will find the second way with bfs. To find the first, you need Dijkstra's shortest path (spoiler alert: I'll teach it in Phase 3 :-))

[@hau3371]

Can you show me how to make a sensor like in Final App?

[@Radu]

Sure, I will explain some of that in Phase 3 of the course. But, in short, I use the same sensor object we created in Phase 1. But one for each of these things: checking borders of the stop markings / traffic lights / other cars. The stop and lights has just one ray, but the one for the car has more of them since they can be coming from the side. Hope it helps.

[@miniontoby]

Hi! I have found some bugs: - Wheel emoji doesn't load on windows, since this is an apple emoji - Neural network visualizer is squeezed (like all the 'circles' from all levels are on 1 line...) - Nothing is FPS based, so with my phone it goes with like 10 fps and really slow. And with my good computer with 120 fps it goes really fast... (Just check how much time has past, devide the wanted fps by that amount and then multiply like the car speed by that value) - I can press minus to zoom out, but I have to hold shift and then the plus to zoom in (because it is the equals = key...)

[@Radu]

Thanks for pointing these out! - I use windows as well and it works for me on Chrome, Edge and Firefox, which browser (version) do you use? - Hmmm... it happens to me sometimes too, when my page is zoomed in to 120%. Probably zooming out the entire web page (Ctrl + minus) will give you more space for that - It's a good idea, but there is one problem with that. Consecutive runs will have slightly different behavior depending on how 'busy' the processor is. It can also make the car jump over the road borders if the speed is too large (collision handling doesn't interpolate between the past frame and current frame at the moment). - About zooming, are you talking about the more advanced demo on my website? The asterisk (*) could be used to zoom in even more on that one (or pressing one of the 1,2,3,4 number keys if you want to focus on one of the cars).

[@miniontoby]

- Running Chrome 122.0.6261.58 - My screen is always zoomed in (150%), this is a windows setting. If I zoom out on the page, the elements aren't adjusting. If I refresh after zooming out, it does compensate. But the screen (with the cars) is also zoomed out really far - Yeah, I understand. Maybe adding in a MAX for the multiplier. Like if (delta > 2) delta = 2; - I am using /projects/virtualworld/ and I know about the 1,2,3,4 keys. But I said that I am able to zoom in and out, but I need to hold shift to zoom in manually, since it is else recognized as the equals key instead...

[@Radu]

Ok. Thanks for clarifying some things. Everything clear! Just that setting delta = 2 there helps with the collision detection, but not with the... multiple runs behaving in exactly the same way. Hard to explain in the comment, but, imagine the car entering a turn so that sometimes it's closer to the border and sometimes further away, but the sensor registers it in both times. The way the curve will look will be different and these differences add up, like a butterfly effect leading to lower consistency. The solution is great for applications that should be real-time, like, if you want to make this into a game, it's the way to go! But if you want some systematic research, my way is better, even if the cars go slower on some computers than others, it doesn't matter in that case.

[@joiadecristo319]

Tu podes criar uma machine learning para avaliar anomalias nos jogos online.

[@Radu]

I'm not sure I understand :-) Do you mean that if I ask people to drive, then I can train the neural network using the data?

[@joiadecristo319]

@@Radu, I said to create Machine Learning to evaluate anomalies in online games.

[@joiadecristo319]

@@Radu You can create a lesson about anomalies in games using machine learning.

[@joiadecristo319]

This will be a good lesson.

[@Radu]

Maybe someday I will :-)

[@domprodutora9910]

Could you dub, translate into Portuguese?

[@Radu]

I don't know Portuguese :-\

[@domprodutora9910]

Translate to Portuguese, please.

[@Radu]

I don't know Portuguese :-)

[@pizdaxyu]

I'm stuck again, "big.world" that I have came from Overpass API but it doesn't start with graph but rather with elements array unlike yours, when did the change happened that I've missed it?

[@Radu]

I'm not exactly sure what you mean. Did you follow at 1:13?

[@pizdaxyu]

@@Radu data from overpass website, not sure when you cleaned it up

[@Radu]

@@pizdaxyu In the last lesson I wrote a parser for it so it's compatible with our code.

[@pizdaxyu]

@@Radu ooh I see the problem. I saved data from turbooverpass data export into big.world instead of file that was downloaded when we imported data first then pressed save (even though we got an error in console due to unable to save it in localstorage)

[@Radu]

Good you found the issue :-) There are many things going on in this codebase. It's not easy to remember it all!