Learn to build a virtual environment entirely from the ground up using basic HTML, CSS, and JavaScript. You can easily make something like Pokemon Go using it, but you'll learn to fill it with the self-driving cars from Radu's other course: https://youtu.be/Rs_rAxEsAvI

In this course, you'll learn valuable skills like: mathematics, algorithms, programming, and design—skills that greatly benefited Radu during his PhD and his time at Microsoft. Here's what you'll learn:
* Building a spatial graph from scratch and creating an editor with a dynamic viewport.
* Understanding the mathematics and logic behind user-friendly interfaces in modern software.
* Generating road borders, buildings, and trees using geometry and creating a 3D effect.
* Implementing road markings to prepare for advanced self-driving challenges.
* Enhancing the world editor for user convenience and maximizing auto-generated content.
* Loading real-world data from openstreetmap for city-based simulations.
* Creating a minimap for navigation in expansive worlds.

Created by @Radu 

⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld

🔗Phase 1 - Self-Driving Cars with JavaScript: https://www.youtube.com/watch?v=Rs_rAxEsAvI

💻CODE💻
https://github.com/gniziemazity/virtual-world

💻COPY CODE FROM HERE💻
https://radufromfinland.com/projects/virtualworld/CODES/lesson_4.js
https://radufromfinland.com/projects/virtualworld/CODES/lesson_5.js

👨‍💻MATERIAL FROM STUDENTS👨‍💻
Brett ported the code from Phase 1 to ThreeJS:
https://github.com/Bretto/evolution

@davidmurphy563 ported the code from Phase 1 to Godot:
https://youtu.be/FJFrSCEWqLU?si=toU4O43h2oaJmKUy

⭐RECOMMENDED PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H

⭐PREREQUISITES I SPECIFICALLY MENTION⭐
Pythagorean Theorem: https://youtu.be/iqSlzYXdFzw
Euclidean Distance: https://youtu.be/3rPwfmrCwVw
2D Vectors: https://youtu.be/nzyOCd9FcCA
Distance to Segment: https://youtu.be/jvqomjmMsPI
Segment Intersection: https://youtu.be/fHOLQJo0FjQ
Interpolation: https://youtu.be/J_puRs40GhM


⭐EMOJIS⭐
🗑️💾🌐🛑🚶🚙🅿️🚦⚠️🎯📁


⭐EXTRA VIDEOS⭐
Adding the Self-driving Cars
https://youtu.be/wH2aNJxltus

Using Real-world Data (OpenStreetMap)
https://youtu.be/IKwkOajkSHs

How to make a MiniMap
https://youtu.be/ecZRuuLjGQA

☕Buy Radu a Coffee?☕
https://www.buymeacoffee.com/radum

⭐ Contents ⭐
⌨️ (0:00:00) Introduction
⌨️ (0:05:21) Project Setup
⌨️ (0:10:16) Spatial Graphs
⌨️ (0:47:50) Graph Editor
⌨️ (1:27:30) Dynamic Viewport
⌨️ (2:03:15) Generating Roads
⌨️ (2:49:25) Buildings And Trees
⌨️ (3:31:47) Pseudo 3D
⌨️ (4:04:59) Road Markings
⌨️ (5:09:65) Saving the World
⌨️ (5:40:57) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan 
👾 Oscar Rahnama

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Radu is back with another advanced JavaScript course.

He'll teach you how to build a virtual environment entirely from the ground up.

Get ready to use basic HTML, CSS, and JavaScript to craft a world you can use in all kinds of projects.

He'll show you how to fill the world with self-driving cars, but you can fill it with anything you like.

Hi, and welcome to phase 2 of the self-driving car course, a virtual world.

This is actually a standalone, so you don't need to have watched phase 1 to follow along.

We'll start building this world from scratch, using some basic HTML, CSS, and a lot of JavaScript.

And whether you'll fill it with self-driving cars or something else is completely up to you.

The focus will be on generating the world itself, and I'll only integrate the self-driving car code at the end.

I made this course to prepare for phase 3, understanding AI, where we'll focus on neural networks and other AI techniques.

I hope that by the end of phase 3 you'll understand why neural networks work, why hidden layers are needed, and things like that.

But for that, we need this fancy world to generate complex scenarios.

The 1 we had earlier is too simple to teach you all that.

So if neural networks is what you're waiting for, be patient and enjoy phase 2 meanwhile.

You'll learn a lot of things in this 1 as well.

A set of skills I really benefited from during my PhD and my time at Microsoft and I'm sure they'll be useful to you as well in your career.

We first learn about graphs, and I'll show you how to implement a spatial graph from scratch.

I'll also show you how to make an editor for it as well.

It will have a dynamic viewport, so we can pan and zoom to edit graphs of virtually any size.

When building this editor, I'll explain the mathematics and logic behind good user interfaces in modern pieces of software, and we implement something similar ourselves.

Then we use geometry to generate the road borders around the graph.

I'll teach you about polygons and some useful operations using them.

We'll apply the same techniques in a slightly different way to generate the buildings and the trees as well.

We spent 2 lessons on these because I want to show you how to implement this 3D look as well.

They're not really 3D models, just a little bit of math that gives that illusion.

Then we implement the way to add markings to the road.

This will make phase 3 even more interesting because we'll need to teach the car to respect all kind of traffic rules as well.

Now we'll focus on making this world editor a pleasure to use, minimizing the number of clicks and maximizing the amount of auto-generated content.

But I'll also make videos on how to load real-world data from OpenStreetMap so the car can drive in your city as well.

This is Joensuu, the car just passed by Karelia University of Applied Sciences.

That's the Wärtsilä campus where I'm currently filming, and it started off at Tikkarinne, the other campus, and now is heading towards city center where I've marked some IT companies on the map.

Looks like the car is heading towards Arbonaut, which is on the other side of town.

I'll add a link to this demo in the description.

It's a good way to learn about Yoensuu if you plan to come study with us.

You'll find many useful links there as well.

Oh, and I'll also make a video for creating this mini-map.

It really helps when the world is big, and the mini-map was probably the most requested feature I got in phase 1.

I've tried answering to all requests when making this, but there's still a few I'm leaving for phase 3, they fit better there.

Now, to be clear, this project is complex, especially because we're going to code everything ourselves and not use libraries.

It won't be easy to wrap our minds around it all.

But I divided it into components, lessons that I believe are easy to understand on their own.

I consider this course to be at an intermediate level, but I do encourage beginners to give it a shot as well to get an idea of what a more complex project looks like.

I explain everything the best I can, and if you have difficulties, just ask in the comments or on my Discord.

The prerequisites are high school math and if you have trouble with that, this playlist will have you covered.

You'll also need to know some JavaScript.

If you completed phase 1, you'll have no problems here.

But if you need to brush up on it, I explain some tricky JavaScript syntax in these sketches, so check them out if needed.

I hope you're excited and thanks for being patient this long.

Can't believe it took me over a year to make this, but I wanted to do it justice since you liked phase 1 so much.

I'm going to code everything using Visual Studio Code and we'll begin somewhere in an empty folder on your computer.

We write the doc type here and the HTML page structure.

In the head I'm going to add a title and the title of this will be the world editor.

This will make it appear in the browser tab and let's make it also visible by typing it inside of the body in an h1 tag like this.

Now, most of our functionality is going to be built on top of an HTML canvas element.

So let's add canvas element with ID my canvas onto the page as well.

And remember to open the developer tools as well.

It's really important to know if you make any mistakes, the errors will pop up here.

Now, you can see here the title of the page is correct and the h1 tag is here, but the canvas is not really visible.

If you press this button right here, you can find it on the page, but it's transparent and we can't see it.

I'm gonna go here below the title and link a CSS file like this called styles.css.

We're going to create this file here, styles.css, and for the body, I'm going to give it a black background color.

And I'm going to align everything to center, like this.

The H1, I'm going to give it a white color, so that we can read it on the black background, and set its font to Arial.

And finally, the canvas, I'm going to give it a background color that we can see on this black background.

And I'm just gonna use this shade of green that I like.

I'm gonna make the canvas bigger and we're gonna use JavaScript for that.

In index.html, we'll write JavaScript code here at the end of the body.

We begin with the script tag and I'm gonna set my canvas width to 600 and my canvas height also to 600.

Because it fits my screen well pretty much, but you can choose other values if you want.

Now, we're going to be drawing on this canvas, and for that we're going to need to access the 2D drawing context of this canvas, like so.

Let's pretend that we have a way to define a graph like so, and that the graph has a way to draw itself on a given context.

So we're going to need to implement these functionalities, the graph itself and the draw method.

And we'll do that in a separate JavaScript file.

We're going to place JavaScript files in a folder called JS.

But this is going to be a pretty big project, so we need to think about code structure early on.

And I'm going to place the graph itself in a subfolder called math and then graph.js, like so.

So let's create the js folder first and inside of this js folder we're going to create math, another folder, and inside of math, we create our JavaScript file, graph.js.

Graphs are data structures made from a set of nodes, also called vertices, and a set of edges, or links, that represent relationships between the nodes.

Like in a social network, a graph can store which users are friends.

These relationships are bidirectional here, but in other applications like here on YouTube, I may be subscribed to you, but you may not be subscribed to me.

There is very much to say about graphs, like we already used graphs in phase 1 when implementing the neural network.

There the links had weights, so we were dealing with a weighted graph, and there was a link between every input and every output, so we used a matrix to represent those relationships in memory.

But now we're going to implement a new type of graph, called a geometric or spatial graph, where nodes are not just abstract things.

They will represent road intersections or places where the road geometry changes like this.

You can see there are not so many links here really.

So a matrix would be mostly empty and not the right choice in this case.

When implementing a spatial graph, the proper way would be to separate the node metadata, the points, from the connections themselves.

But I think it makes things too complicated.

And since this whole project revolves around geometry, I will simply say these are the points, and they will be connected by segments with 1 point at each end.

So a bit unconventional here, but I think it simplifies things in our case.

Now let's code 1 of these graphs in JavaScript.

It's gonna be a simple class, and its constructor is going to have 2 parameters.

We build the graph using points and segments.

I initialize them to empty arrays so that you can create an empty graph as well.

Now, let's store these parameters as attributes, like so, and implement our draw() method that takes the canvas context as a parameter.

And I'm just going to look through all of the segments that we have and tell each of those segments to draw themselves on the canvas context.

We don't have these segment objects yet, but they will be there and they will have the same kind of structure as the graph has.

It's important to be consistent with these things.

And then I'm gonna do the same thing for the points.

And I draw the points after the segments because I don't want the segment lines to be on top of the points.

Now let's implement these segment and point objects.

In index.html I'm going to copy this line And I'm going to place these in a folder called Primitives.

Points and segments are primitive objects.

So let's write here Primitives.Point and Primitives.Segment like this.

And inside of this JavaScript folder, the main 1 here, not inside of math, I'm going to create a new folder called primitives.

So it's next to the math folder here and in it we create a new file point.js.

It's also going to be a very simple class.

Constructor takes in x and y as parameters where we want the point to be and we set these parameter values as class attributes like so, so that the object knows where it is, pretty much.

And then in the draw method, under given context, I'm also going to pass 2 more parameters to style these points a little bit.

The first 1 is going to be a size, maybe 18 pixels, and a color.

We're going to draw the points as circles and the circles need a radius.

I'm going to just calculate that as half of whatever this size is.

And we begin a path, set the fill style to this color that we have in the parameter list, and use the arc method of the drawing context.

And the last 2 parameters specify that we want a full circle.

So starting at 0 degrees and ending at 360 degrees.

Let's do the same thing with the segment, so create a new file called segment.js.

Our segment class, the constructor, will have points this time, p1 and p2.

Let's save these as attributes of the class and implement our draw method.

Give in a context and again I'm gonna pass 2 parameters here as well.

The width, the line width, how thick we want the segment to be.

I'm just gonna give it the default value of 2 and a color.

We set the line width to the given width.

And we set the stroke style, this time, to the given color.

We move to the first point P1x P1y and now we're going to copy this line and line to and line to p2x, p2y.

And we're done with these core functionalities.

Go back to index.html and let's pass some actual points to this graph.

I'm gonna go here, above where we defined the graph, and say p1 is a new point at 200, 200 pixels.

Let's copy this few more times and have here p2, p3 and p4.

Maybe p2 is going to be at 500, 200, then 400, 400 and 100, 300.

And let's pass these as an array to our graph here as well.

This will be the points parameter of the graph.

And the segments will be the second parameter, but we can actually test now already.

So, save the file, refresh the page, and there's our graph.

Keep in mind that 0, 0 is this top left corner, so 500, 200.

I'm going to go here and say s1 is a new segment between p1 and p2.

And let's copy this 2 more times, maybe S2 and S3, between...

And pass these as the second attribute here.

Save and refresh and we can see now the segments as well.

So I'm gonna copy this as S4 between P2 and P3 and passing S4 here.

And the next thing we'll do is add some functionality to add points, remove points, add segments, remove segments, and so on.

We'll do that in a very basic way, by adding here buttons that just add some of those elements on the screen.

I want to teach it like this because it's how interfaces were made 30 years ago.

I want you to see how things have changed since then.

So let's go up here, and below our canvas element I'm going to define a div with an ID of controls, and this is going to contain some buttons that we can press to do operations with our graph.

The first button, On click, it will call a function called addRandomPoint.

Let's call this button addPoint, like this.

And let's implement this addRandomPoint function next.

I'm gonna just make it here, on top of this script.

These functions will go away at some point, we just need them to develop the core functionality.

So I'm not gonna worry about the code structure too much.

It's going to tell the graph to add a point.

The Graph object will have this functionality.

So, let's pass here as the point a new point and give it random coordinates.

So, the X is going to be random and I'm gonna scale this by the width of the canvas so that the value is not between 0 and 1 what this gives but between 0 and 600 pixels And the height in the same way.

Now, to see this point after it was added, we have to refresh the canvas.

We do that by clearing the whole canvas, starting at 0,0, top left corner, and width, height, bottom right corner, and then we tell the graph to draw itself again.

So let's implement this addPoint function real quick.

We are going to go to graph.js And here, below the constructor, we say add point, a given point, and we just take the points attribute of the class and push the given point, like so.

Now let's refresh and when we press this button you can see a new point was added there.

You can try pressing it multiple times and it's gonna work pretty much always.

Unless we run out of memory, but that's not gonna happen anytime soon.

Now there is 1 situation that I want to take care of.

I don't want to have 2 points at the same location.

Points are identified by x and y, and if you have 2 of them with the same x and y, then that's the same point.

We're gonna need a function that checks if the graph already contains a point.

And I'm gonna write it like so, using the array.find() method, which finds inside of these points a point that equals the given point like so.

What happens here is that the find loops through all of the points here and let's call them P and then returns the 1 that equals point and if it doesn't find that point then it's gonna return nothing so something and nothing will also correspond to true and false in Boolean logic and we're going to use this as such it's just how JavaScript works so equals here we need to implement as a method to the Point class We need to check if p is equal to the Point somehow, so inside of the Point class I'm going to implement equals Point and return if this x is equal to point x and this y is equal to point y, like so.

This will only be true if point and this are the same.

And now we could go here and check to see if the graph contains the point before adding it.

Or we could add a new method to the graph that tries to add a point and then maybe we monitor here the success.

Let's log this in the console right here.

So we can go inside of Graph.js here and tryAddPoint() is going to check if this point is not part of the graph at the moment, then we add the point.

And notice here how I'm reusing the method we defined earlier.

Let's save, refresh, and when we press this add point, same thing as before happens pretty much.

But we always get here this true, and that's because it's really unlikely to randomly generate another point on top of an existing 1.

But to test, we should force that to happen somehow.

So I'm going to go here in index.html, copy this entire function here, paste it here in the console, and instead of having random I'm going to write 0.5 and 0.5.

This means that I'm going to overwrite this function so that it generates the points always in the middle of the screen.

So if we press multiple times on that button, the same point will come again and again.

And this is the point in the middle of the screen.

And when we try adding another 1, we get our false as well.

Now we have a way to add points to our graph, let's add segments as well.

We're going to go here and copy this button and call the other 1 AddSegment.

And the function will be AddRandomSegment.

It first gets the points that we want to connect, and then creates the segment.

Let's get these points again at random by using floor of random times the number of points.

Floor makes sure that we have an integer value and let's copy this for another index 2 different points and then tell the graph to add a segment, a new segment, between the points at index 1 and points at index 2, like this.

Now, to see any changes after we press this button we also need this thing right here, clearing and redrawing the graph.

So let's save this and go to Graph.js to implement this addSegment method.

We go here, below the points section, and let's implement addSegment.

Let's call it seg, and it's going to take the segments of the graph and push this new 1 at the end.

Let's save this, refresh And now when we press add segment, it added a segment here, and now I pressed again and nothing happened.

Pause the video now and try to figure out the answer for yourself.

The issue is that here where we are adding these segments sometimes index1 and index2 could be the same so we create the segment from 1 point to itself.

We could check here and say success is false and then if index1 is different than index2, success is true.

Let's also add the segment only in that case, because a segment from 1 point and to itself doesn't really make sense.

Refresh and when we press add segment, we get the true and we see the segment when it appears, but sometimes we get the false when we try to link the same point to itself.

We got the true now, but I didn't see any change.

Try to figure out what happened, pause the video, and now I'm gonna tell you the answer.

So, turns out it's possible that you add the same segment multiple times as well.

See all freeCodeCamp.org transcripts on Youtube

Build a Virtual World Filled with Self-Driving Cars – JavaScript Tutorial