Hi! I give some ideas to improve this nice tutorial lessons: first I renamed Segment -> Border, Polygon -> Road, Envelope -> RoadShape. The road class owns its road shape. The shape is used for rendering the ground and knowing if a point is inside (in the current Radu's code, when splitting segments, the polygon vertices are not updated, it's ok because it's used only once). Instead of World having borders, I store them in the Road class (more logic: a road has borders ^^), I spread the breaking/union segment/polygon functions into Road and Editor classes to be more logic (Roads: containsSegment, breakRoads; Editor: breakAllRoads, keptSegments). Now the big change is in the union function: 1/ instead of returning kept borders: better to store them directly in the roads we are iterating, 2/ removed borders can be reused: and stored in roads to make road junctions shape (new class). 3/ For the moment I did not make more changes, BUT it's maybe interesting to: a) convert list of kept/unkept borders into a polygon class (instead of painting X segments, we paint a polygon), (b) a road will then be defined as chunks of polygons (road and junction), c) now, with this kind of structure, it may be help (IA) algorithms since we can know in which chunks of the rod a car is (beware a car maybe in several road junctions at the same time). Inside a road junction, we can refer to the graph structure of roads to know where to turn: In Radu's video of IA car, I recommend placing the (x,y) position of the car in the middle of its rear wheels (a car is the defined by its wheelbase, back and front overhang), knowing car corners are easy (for collision detection). Hope this will give new ideas :)
If I were to do this with the knowledge I already have it wouldn't be as good. I once made an object editor that was similar to what you had at the end of the "polygon class" section, but I had an activation key that would only construct the object after the button was pressed. Also as a side note, needing to figure out distance and the use of atan2 for making games lead me to learning trigonometry (I still don't 100% understand atan2 lol).
maybe by creating a segment between point A and B which is direct line and then allowing to additional points to be added on the segments to move around obstacles.
Yeah... many improvements come with practice. The more you code, in general, the better you are at solving problems and combining things together. My prerequisite on vectors (I think) teaches atan2. If not, it is the one on trigonometry. I recommend having a look if doubts.
After your initial self driving car tutorial. I wanted to make a race course where multiple of these self driving cars can race around. So I used bezier curves for curves and instead of getting borders like this, I put points on the segment and then got it's normal on both sides and saved it. Giving me a interior border and exterior border of the race track! P.s :- these two points on either side of the track also gave me the opportunity to create reward gates for my cars. To calculate who's in front too! It's amazing how everything just fits in the end!! I managed to create a few real life race tracks like Monaco, Qatar and Monza!! I actually have nothing to do with coding, but because of people like you. Sebastian Lague and a few other mind bogglingly creative people made me fall in love with programming and now I just can't stop. Can't wait for phase 3!!!
The final result is so incredible, I was typing together, and seeing the progress, but the final result is really awesome! It looks like an editor from Cities Skylines hahahah I can't wait for the next episodes! Awesome work Radu!
What a creative way to generate the envelope of the roads (and also, to determine when a point is inside or outside a poly)! I am loving the progress of this app!
Hello Radu! Unfortunately, I haven't had the chance to dive into the development as I initially intended. At this moment, I am following the implementation as you work on it, but I will try to proceed with the development as soon as I can
very confusing about finding intersections, cleaning out break points and conjoining outlines.... but then again I'm dumb at math. Great work overall, can't wait for next episode
@@Radu the way you explain logic is easy to understand. I can easily repeat it. My personal issue is with trigonometry functions such as plus this minus that and divide by whatever is what confuses me. But don't mind me since I am sure most of your class are well versed in geometry.
First of all. Thanks a lot for your great videos. I really enjoy this series and come back to your math lessons regularly. But I was wondering why you don't use ES modules in this series? It kind of bothers me to have all those classes and variables in the global scope. I also don't like having all those script tags. I think having a single entry file and importing and exporting the rest would make the code much cleaner. Another benefit would be better editor support like autocomplete and jump to definition. Is there a reason why you are not using it, or do you plan to refactor it later?
Here's an answer: I don't want to force people to use a local server... or for them to get the impression that you need VS Code and the live server extension to do it. Also, sometimes I take samples like this to show in class (at work or on 'teaching trips', on different computers, and they just run on the fly, no need to set anything up (and the computers require admin rights to set stuff up). Now here's the honest answer. I know modules are good and that the code is much nicer with them. But I haven't used them much and I don't want to teach something stupid. I normally teach just the things I understand really well.
Nice ! This is kind of methods I did not though that made me glue in my project. I'll thieve this :) Do you know OpenDRIVE specification 1.6.1 ? They give a nice specification on how they describe real roads.
@@Radu yes this is made for dealing with complex but real road shapes. esmini (Environment Simulator Minimalistic) displays this format. It was just for information. Good job !
@radu i was a bit excited the new video published all of your videos are exciting but this series really fits me 😀 but it'll be cool if you publish the videos a bit more frequently :(
It would :-D but I can't... Been doing 1 video per week for the past 2 years or so and that's my limit. If anything, I will probably take things slower soon (this is not my 'real job').
i felt kind of lost in this one with all the applied math over the polygons and segments, i mean hard to draw in my mind what the code were doing on the other hand i understand pretty clear all the work you did with points
@@Radu maybe, but there is a lot to process mentally, probably is just me getting old jaja, besides that i think the graphic you create to show what math you were doing counting pair and odds interceptions help me a lot to slowdown the mental load, thanks for asking btw, greetings
Hello Radu, at @4:30 on the beginning of the video, the first time I'm testing the polygon, I get an infinite loop in the browser. The line "new Polygon(graph.points).draw(ctx);" in the animate() function from index.html is running again and again... The blue polygon is drawn correctly but the code loops again and again and the code inside polygon.js is executed again and again. event if I just put one console.log only in the class function animate() { viewport.reset(); graphEditor.display(); new Polygon(graph.points).draw(ctx); requestAnimationFrame(animate); }
Hi, I'm not sure I understand. The polygon is supposed to be created and displayed many times per second. It is supposed to loop, inside the animate function, for testing.
@@Radu ohh sorry, it was a misunderstanding from me, I didn't grab at first the exact meaning of the request animation frame. I've dropped a console.log into the polygon.js file just for control purposes and I was surprised that it looped again and again but in fact it's normal... I've also checked with your code, it's the same behaviour... 😉
I believe that in this version, there is a bug with when you remove everything. The program is terminated after getIntersection fails due to undefined variables. Anyways, I am starting to write a Typescript version and will remedy this when done.
Hi, I tried to reproduce the problem but couldn't... If there are no segments (removing everything) the loop just doesn't do anything... Good luck with the Typescript implementation :-)
poly is undefined if you remove everything, you need make this in generate method: if (this.envelopes.length >= 2 && this.envelopes[0] && this.envelopes[1]) { this.intersections = Polygon.break( this.envelopes[0].poly, this.envelopes[1].poly ); }
![A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]](http://i.ytimg.com/vi/BBFNvmUKxJ0/mqdefault.jpg)
![A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]](/img/tr.png)
![A Virtual World - JavaScript Course: Lesson 6 / 11 [Pseudo 3D with JavaScript]](http://i.ytimg.com/vi/aKzlooeJNM8/mqdefault.jpg)
Hi! I give some ideas to improve this nice tutorial lessons: first I renamed Segment -> Border, Polygon -> Road, Envelope -> RoadShape. The road class owns its road shape. The shape is used for rendering the ground and knowing if a point is inside (in the current Radu's code, when splitting segments, the polygon vertices are not updated, it's ok because it's used only once). Instead of World having borders, I store them in the Road class (more logic: a road has borders ^^), I spread the breaking/union segment/polygon functions into Road and Editor classes to be more logic (Roads: containsSegment, breakRoads; Editor: breakAllRoads, keptSegments). Now the big change is in the union function: 1/ instead of returning kept borders: better to store them directly in the roads we are iterating, 2/ removed borders can be reused: and stored in roads to make road junctions shape (new class). 3/ For the moment I did not make more changes, BUT it's maybe interesting to: a) convert list of kept/unkept borders into a polygon class (instead of painting X segments, we paint a polygon), (b) a road will then be defined as chunks of polygons (road and junction), c) now, with this kind of structure, it may be help (IA) algorithms since we can know in which chunks of the rod a car is (beware a car maybe in several road junctions at the same time). Inside a road junction, we can refer to the graph structure of roads to know where to turn: In Radu's video of IA car, I recommend placing the (x,y) position of the car in the middle of its rear wheels (a car is the defined by its wheelbase, back and front overhang), knowing car corners are easy (for collision detection). Hope this will give new ideas :)
Hope more people find your nice comment. They are all things that sound good and can be tried. Let's pin your comment.
Best programming series ever 😬
:-)
You can just do anything you want with code. Thank you for teaching us, every project you make is unique and very impressive.
Thanks, Frank :-) Just wait until you see Phase 3!
I am flabbergasted!!! Thanks!!
:-)
The way you explain everything in such a simple way is amazing!
Thank you so much :-)
This just keeps getting better and better 🌞🎊🤩
Glad you think so :-)
Your programming and teaching style is masterful
Thank you!
Would you design the roads differently? How? :-)
I dont think there is an better way then this!
If I were to do this with the knowledge I already have it wouldn't be as good. I once made an object editor that was similar to what you had at the end of the "polygon class" section, but I had an activation key that would only construct the object after the button was pressed. Also as a side note, needing to figure out distance and the use of atan2 for making games lead me to learning trigonometry (I still don't 100% understand atan2 lol).
maybe by creating a segment between point A and B which is direct line and then allowing to additional points to be added on the segments to move around obstacles.
Yeah... many improvements come with practice. The more you code, in general, the better you are at solving problems and combining things together. My prerequisite on vectors (I think) teaches atan2. If not, it is the one on trigonometry. I recommend having a look if doubts.
After your initial self driving car tutorial. I wanted to make a race course where multiple of these self driving cars can race around. So I used bezier curves for curves and instead of getting borders like this, I put points on the segment and then got it's normal on both sides and saved it. Giving me a interior border and exterior border of the race track!
P.s :- these two points on either side of the track also gave me the opportunity to create reward gates for my cars. To calculate who's in front too! It's amazing how everything just fits in the end!!
I managed to create a few real life race tracks like Monaco, Qatar and Monza!!
I actually have nothing to do with coding, but because of people like you. Sebastian Lague and a few other mind bogglingly creative people made me fall in love with programming and now I just can't stop. Can't wait for phase 3!!!
How it evolves graphicallly as you improve the code is really cool.
Glad you think so :-)
Finally! I've been waiting for this new release
Thanks for waiting :-)
Amazing work, thank you for every lesson!
Thank you for watching them!
The final result is so incredible, I was typing together, and seeing the progress, but the final result is really awesome! It looks like an editor from Cities Skylines hahahah I can't wait for the next episodes! Awesome work Radu!
:-) hope you'll like what comes next!
What a creative way to generate the envelope of the roads (and also, to determine when a point is inside or outside a poly)! I am loving the progress of this app!
Thank you :-) any luck with the undo / redo?
Hello Radu! Unfortunately, I haven't had the chance to dive into the development as I initially intended. At this moment, I am following the implementation as you work on it, but I will try to proceed with the development as soon as I can
I'm sure you will :-) good thing about these videos, there's no deadline or anything like that!
FANTASTIC FANTASTIC WONDERFUL SERIES ❤❤❤
Really happy to hear you like it :-)
best content ever !! simply AMAZING
please for the second time keep going with
Math& Code Fundamentals series , its help me with my final year project
I will probably continue that series someday, but not anytime soon. My upload schedule is pretty much fixed for the next year.
very confusing about finding intersections, cleaning out break points and conjoining outlines.... but then again I'm dumb at math. Great work overall, can't wait for next episode
There are several ways to do this... I chose this way because we found intersections already in phase 1, so, one 'tool' should already be known.
@@Radu the way you explain logic is easy to understand. I can easily repeat it. My personal issue is with trigonometry functions such as plus this minus that and divide by whatever is what confuses me. But don't mind me since I am sure most of your class are well versed in geometry.
I have a feeling you know more than you think :-) Some things, like trigonometry, do become easier with practice.
First of all. Thanks a lot for your great videos.
I really enjoy this series and come back to your math lessons regularly.
But I was wondering why you don't use ES modules in this series?
It kind of bothers me to have all those classes and variables in the global scope. I also don't like having all those script tags.
I think having a single entry file and importing and exporting the rest would make the code much cleaner. Another benefit would be better editor support like autocomplete and jump to definition.
Is there a reason why you are not using it, or do you plan to refactor it later?
Here's an answer: I don't want to force people to use a local server... or for them to get the impression that you need VS Code and the live server extension to do it. Also, sometimes I take samples like this to show in class (at work or on 'teaching trips', on different computers, and they just run on the fly, no need to set anything up (and the computers require admin rights to set stuff up).
Now here's the honest answer. I know modules are good and that the code is much nicer with them. But I haven't used them much and I don't want to teach something stupid. I normally teach just the things I understand really well.
Nice ! This is kind of methods I did not though that made me glue in my project. I'll thieve this :) Do you know OpenDRIVE specification 1.6.1 ? They give a nice specification on how they describe real roads.
I've heard about it but never studied it. I'm sure they deal must deal with more complex things like how wide the roads are, how many lanes and so on.
@@Radu yes this is made for dealing with complex but real road shapes. esmini (Environment Simulator Minimalistic) displays this format. It was just for information. Good job !
Good to know! Thanks :-)
perfect
You think so? :-)
@radu i was a bit excited the new video published
all of your videos are exciting but this series really fits me 😀
but it'll be cool if you publish the videos a bit more frequently :(
It would :-D but I can't...
Been doing 1 video per week for the past 2 years or so and that's my limit. If anything, I will probably take things slower soon (this is not my 'real job').
@@Radu your videos are great
its really great that you teach people without any expectation
sorry if i bother you
Thanks :-)
Hey Radu when do you do my monkey theorem? i believe in you!
Really not sure about that :-D someday!
i felt kind of lost in this one with all the applied math over the polygons and segments, i mean hard to draw in my mind what the code were doing
on the other hand i understand pretty clear all the work you did with points
Do you think a rewatch would help? Or the explanation was not good enough?
@@Radu maybe, but there is a lot to process mentally, probably is just me getting old jaja, besides that i think the graphic you create to show what math you were doing counting pair and odds interceptions help me a lot to slowdown the mental load, thanks for asking btw, greetings
Yeah, I was watching the video and thought that without the graphic it's really hard to understand. Don't give up :-)
For some reason I can see a polygon inside another polygon on the first segment. is that normal??
I am stupid. I had an envelope create in index.html. silly me!!
Good you found the fix!
Hello Radu, at @4:30 on the beginning of the video, the first time I'm testing the polygon, I get an infinite loop in the browser.
The line "new Polygon(graph.points).draw(ctx);" in the animate() function from index.html is running again and again...
The blue polygon is drawn correctly but the code loops again and again and the code inside polygon.js is executed again and again. event if I just put one console.log only in the class
function animate() {
viewport.reset();
graphEditor.display();
new Polygon(graph.points).draw(ctx);
requestAnimationFrame(animate);
}
Hi, I'm not sure I understand. The polygon is supposed to be created and displayed many times per second. It is supposed to loop, inside the animate function, for testing.
@@Radu ohh sorry, it was a misunderstanding from me, I didn't grab at first the exact meaning of the request animation frame.
I've dropped a console.log into the polygon.js file just for control purposes and I was surprised that it looped again and again but in fact it's normal... I've also checked with your code, it's the same behaviour... 😉
why not to use arc for make the connection between the segments smooth ? It could be saved a lot of processing
Because, later, I do collision detection with those bounds and I wanted to keep the math simple and reuse the segment intersection code from phase 1.
I believe that in this version, there is a bug with when you remove everything. The program is terminated after getIntersection fails due to undefined variables. Anyways, I am starting to write a Typescript version and will remedy this when done.
Hi, I tried to reproduce the problem but couldn't... If there are no segments (removing everything) the loop just doesn't do anything...
Good luck with the Typescript implementation :-)
@@Radu It is probably a type error then. Either way, a single if should solve it :)
@@backstabba 👍
poly is undefined if you remove everything, you need make this in generate method:
if (this.envelopes.length >= 2 && this.envelopes[0] && this.envelopes[1]) {
this.intersections = Polygon.break(
this.envelopes[0].poly,
this.envelopes[1].poly
);
}
Coding with Radu!
Let's code now
💖💖💖💖
:-)
It's showing me the glaring mistakes I'm making in constructors
I'm not sure I understand your comment. Some difficulties with the code?
Nope. In the coder, me.
@@vincentcleaver1925 :-)