A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript] @Radu
A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]  @Radu
Uploaded October 2023 | Updated September 2026, 2 weeks ago
Welcome to the course where we build a self-driving car simulation in a virtual world. In this video we're diving into the art of adding decorative elements to the virtual world—specifically, buildings and trees. In this video we start by defining the bases of these structures.

Now, you might wonder why not use the same graph editing tools we've explored before? Well, if you're planning to create expansive worlds and desire precise alignment, it can get quite tedious. So, we're going to leverage the functionalities we already have and implement a clever algorithm for procedurally generating buildings alongside the roads. And for that extra touch of realism, we'll randomly place trees where they naturally fit.

Admittedly, this solution may limit your ability to design buildings exactly as you envision them, but the trade-off is worth it. With this approach, world generation becomes incredibly fast and straightforward. In fact, you'll be able to build vast cities in no time! 🏢🌳

Here's a sneak peek of the algorithm: We start by creating thicker envelopes, then use the same process as before to extract the outer segments. We keep the segments long enough to support at least one building and, for the exceptionally long ones, divide them into multiple supports. Finally, we generate polygons around these structures using envelopes and apply some fine-tuning to achieve the desired results.

Have Fun! :-)

⭐PLAYLIST⭐
youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO

⭐FINAL APP⭐
radufromfinland.com/projects/virtualworld

💻CODE💻
github.com/gniziemazity/virtual-world
4. Roads = follow along
5. Buildings And Trees= code after this lesson

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

⭐ALL PREREQUISITES⭐
youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H

⭐My Video on Distance to Segment⭐
youtu.be/jvqomjmMsPI

☕Buy me a Coffee?☕
buymeacoffee.com/radum

⚡️Join this Channel⚡️
youtube.com/@radu/join

⭐Timestamps⭐
00:00 Introduction
01:17 Top-level code
03:03 Generating Buildings
19:58 Generating Trees
26:55 Avoid illegal locations
39:18 Fine-tuning
A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]Procedural Drawing and Animation with JavaScript | Coding on a Flight!3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]Realistic Spinning Wheels with JavaScript (SEISURE WARNING!)⭐🏆⭐PRIZES: Racing AI Competition⭐🏆⭐ DEADLINE: May 15ᵗʰ 2024Blindfolded Live Coding the Bezold Camera Effect in JS (Inspired by @Vsauce)JavaScript Creative Coding Project (Train Simulation v2)🎄 Christmas Calendar Coding Project Showcase 🎄JavaScript ⛸️ Christmas Calendar 📅 Day 22 🎄Polyrhythms in JavaScript | How Math Can Make Your Code Better (#SoMEπ )JavaScript Strandbeest - Part 2 - Gravity, Wind and EvolutionCoding Angry Birds Clone with Chat GPT
Radu Mariescu-Istodor |

A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER