A Virtual World - JavaScript Course: Lesson 6 / 11 [Pseudo 3D with JavaScript]

Welcome to the course where we build a self-driving car simulation in a virtual world.
In this video, we learn a way to make our items 3D. While you could certainly add some sprites to your existing 2D interface, creating a 3D look is a whole different experience.
I've previously demonstrated how to use images for adding cars, and even offered tips for recoloring sprites in previous tutorials. But what if you're aiming for a genuine 3D appearance? You could completely refactor your application to utilize a 3D rendering engine. Like:
⭐ Bretto ported the code from Phase 1 to ThreeJS:
github.com/Bretto/evolution
⭐ @davidmurphy563 ported the code from Phase 1 to Godot:
• Neural Nett II: Attack...
I want to teach you a way to get the 3D look without using a 3D engine because I find this effect visually appealing, and it's surprisingly straightforward to implement.
Beyond the visual aspect, you may also find the underlying mathematics intriguing. While 3D renderers primarily employ triangles or voxels, our focus won't involve these elements. Nonetheless, this exploration touches upon fundamental principles of 3D rendering, providing insights into how these complex systems function.
Have Fun! :-)
⭐PLAYLIST⭐
• Self-driving Car :: Ph...
⭐FINAL APP⭐
radufromfinland.com/projects/...
💻CODE💻
github.com/gniziemazity/virtu...
5. Buildings And Trees = follow along
6. Fake 3D = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
• Math & Code Fundamentals
⭐My Video on the Euclidean Distance⭐
• Euclidean Distance: Ma...
☕Buy me a Coffee?☕
www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:29 Creating the Tree Object
05:08 Explaining the 3D approach
10:47 Styling the 3D Trees
16:02 'Random' number generation
20:35 Creating the Building Object

[@julianbullmagic]

These videos are have some sort of asmr effect. It's calming seeing these complex problems broken down into simple steps.

[@Radu]

Cool, I guess :-D

[@catakuri6678]

i like how you always reply to all comments :)

[@Radu]

Still possible for now, but now sure how long. Starts to take quite a lot of time.

[@iShubhamPanchal]

He always gets us at 1:03 😂

[@Radu]

😎

[@juancamacho479]

My wife won't let me watch unless i play the intro song and sing it :'D

[@Radu]

Oh wow! :-) first time I hear something like that!

[@joningram]

I recently found this series and have worked through all the episodes so far in the last couple of days - I really like how you have structured your code and made sure that there is a working output at the end of each lesson. Very well thought out! I'm surprised at how nicely 'sort by distance from viewpoint' works to resolve all the draw-order issues.

[@Radu]

Thanks :-) The sorting does a good job, but it's not perfect. You can find some situations where it doesn't perform as expected... especially if you generate really long buildings. But for this kind of project, it's alright :-)

[@pesterenan]

Another incredible video! It's really impressive how just by drawing things but with a different 'view' can yield this pseudo 3d effect. Nice one Radu!

[@Radu]

Thank you! Yeah, sometimes few lines of code makes a big difference :-)

[@javifontalva7752]

It is just unbelievable. As soon as I can I will start doing this project. Looking forward to it!

[@Radu]

Hope you'll like it :-)

[@Eternam]

marvelous! Thank you very much Radu.

[@Radu]

No problem!

[@javifontalva7752]

This is mind-blowing!!

[@Radu]

Glad you think so!

[@___d3p1]

The way you managed this perspective effect was brilliant!!!!! This was one of my favorite videos just because I think that it was very creative how you resolve all details!

[@Radu]

Glad you enjoyed it! :-)

[@christian-schubert]

When you're being prompted to watch 'Coding with Radu [Extended Intro]', you click and watch 'Coding with Radu [Extended Intro]'. Three times. Christ, I almost forgot to come back here!

[@Radu]

:-))

[@backstabba]

Impressive work!

[@Radu]

Thanks a lot!

[@faruktutkus]

Very good thanks

[@Radu]

You're welcome!

[@zohaibqurban7386]

amazing

[@Radu]

Thanks!

[@TORMENTUMM]

Great!

[@Radu]

Thanks!

[@cazpfitl]

Excellent.

[@Radu]

Thanks!

[@cazpfitl]

@@Radu thanks to you professor, amazing content.

[@davidmurphy563]

Awesome video, my favourite bit was the brief clip at 0:12 - the person who did it must be very handsome and charming. ;))

[@Radu]

Have to agree with you on that one :-)

[@DanielJoseAutodesk]

Look at the new GTA or Driver game being born .... 😂😁🙂👍

[@Radu]

Almost :-)

[@harshchoudhary5452]

I've completed the entire tutorial on Free Code Camp, but I couldn't locate the video that guides on creating 3D building roofs with a consistent height. Where can I find that specific tutorial?

[@Radu]

Hi, it's a special, short video only visible to channel members (those who pay some fee). But you can find my code after that segment on github, so, try to figure out what I did, and if questions, ask here or on Discord :-).

[@devperatetechno8151]

Radu, for the next series probably a good idea is to use an approach of module pattern(ES6 import/export) to the utils functions so we can easily identify where the functions came from. enjoying the course, greetings

[@Radu]

I will consider it. I don't like that it requires some (local) server to be setup...

[@devperatetechno8151]

@@Radu why,? i think you have misunderstood my idea

[@Radu]

Perhaps... I understood I should use import/export. But I would need a local server for that (like the live server extension in VSCode). Not everyone knows how to do that and I kind of like that people just type using any editor and the browser shows the result... I also like that if I go teach in class (or in other universities), I don't have to worry if there is some specific software installed on the computers.

[@devperatetechno8151]

@@Radu im going to text you on discord so we can keep this talk further, is that ok?

[@Radu]

Cool!

[@ChandrashekarCN]

💖💖💖💖

[@Radu]

💖

[@aditya2005_found]

Have you uploaded the special video you are talking about at 33:14 ? if (yes) { return video_link } else { console.log("I'll wait for it") }

[@Radu]

I did, but it's only for channel members :-)

[@aditya2005_found]

@@Radu Oh! ok that's fine (❁´◡`❁)

[@Radu]

@@aditya2005_foundyou're not missing anything groundbreaking there. You can check the code changes I did on github to see the difference and if you don't understand something, ask here or on Discord.

[@aditya2005_found]

@@Radu Yeah! Thanks 😊

[@DimaMelom]

@@Radu, I subscribed to the channel, but I haven’t seen the video, it’s very interesting to repeat the video

[@bennybrouwer]

Hi Radu, I was expecting lesson 7 but see that your playlist has been reduced to the first three lessons only. Anyway, so far I am following and studying with great pleasure :-)

[@Radu]

Oh, you're right, I forgot to add more videos to the playlist (fixed it now, thanks for pointing it out!). Lesson 7 comes next week, I explained why in a short: kzbin.infozySkg7JlBro

[@bennybrouwer]

@@RaduTake your time - You have a great competion in Frank's Laboratory .. not AI but the same level of speed in animation, structure (using classes :-)) . Just for fun . . when all my cars are riding over your streets with all their AI knowledge, Frank's whales will be trained to eat them like any Particle... with shining and moving stars in the background. Not so sure if it is wise to do two courses at the same time and try to make one project out of it but my dad started collecting stamps when he reached the age of 60+ ... I've passed 60 and you (both) are making my life fun and challenging.

[@Radu]

You made me very curious in the outcome :-D

[@berkantguler75]

🎉

[@Radu]

💖

[@swapnildeshmukh5900]

That's Lee's move 1:03 😂

[@Radu]

You mean 1:25? :-)

[@ZerobugCoder]

@Radu How to learn from you in person, as in a degree course

[@Radu]

Well... I do teach here: www.karelia.fi/en/information-and-communication-technology

[@javifontalva7752]

How do we create the roundabout?

[@Radu]

Just click many times to define a round shape. Or, when I teach how to read data from openstreetmap (in a few weeks) they will be generated automatically.

[@user-tx6qb5zh9y]

Can I add all this projects to my projects portfolio sir

[@Radu]

If you want, but I recommend personalizing them as much as possible... Too many portfolios nowadays look the same :-(

[@alexch5106]

Hi, question. Can you do a video o show me some code. I am trying to do consecutive lines with different length and angles. The problem is later when I finish and change angle, the next lines are not updating angle to pre defined angles. I am trying to code something like this kzbin.info/www/bejne/oHaveoKBhrR-qNk Thank you

[@Radu]

Interesting feature. I haven't implemented anything like this yet, but I'm quite sure that you need to implement the concept of a 'group' which will need an 'anchor point': the point relative to which the rest of the shape will rotate (for example). Hope this helps!

[@alexch5106]

@@Radu I tried but my problem is after update angle of a line it does not update the following lines to the angle + the correction angle for prior line when I re-draw it.

[@karthikm.1804]

How to create a chess AI with javascript

[@Radu]

Maybe I teach it someday, but at the moment I don't know much about the topic (apart for the textbook minimax algorithm typically used for the task)

[@pizdaxyu]

amazing.. my dull brain would never figure out how to come up with sorting so that depending on angle some stuff is visible while other is not. I'd just format c: my computer in frustration

[@Radu]

I'm sure you would :-) Also... it's not a perfect solution. There are situations when it fails, but they happen rarely with our parameters so result looks pretty good.

[@javifontalva7752]

Math.cos(((a + this.center.x) * size ) % 17) ** 2 Where did you get this from?? 😱

[@Radu]

Somewhere deep inside my head :-D