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 I'll teach you how to add a dynamic viewport to our graph editor using basic HTML, CSS and JavaScript.

While the current editor may be great for smaller tasks, the dynamic viewport will be really useful if you want to create larger graphs that extend beyond your screen's boundaries. The viewport will allow zooming and panning, just like the editing experience you find in software like Photoshop.

By the end of this tutorial, you'll have the ability to work on expansive graphs with ease, making your editing process incredibly flexible. But that's not all – we'll also ensure that your hard work doesn't vanish into thin air. I'll teach you how to save your graph so that it remains intact even after refreshing the page.

It's time to get that birds' eye view of your graphs, quite literally! 🦅 Let's dive in and make your graph editing experience more versatile and persistent.

Have Fun! :-)

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

⭐FINAL APP⭐
radufromfinland.com/projects/virtualworld

💻CODE💻
github.com/gniziemazity/virtual-world
2. Graph Editor = follow along
3. Dynamic Viewport = code after this lesson

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

⭐Emojis I used in the video⭐
🗑️💾

⭐My Video on 2D Vectors⭐
youtu.be/nzyOCd9FcCA

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

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

⭐Timestamps⭐
00:00 Introduction
01:06 Top-level Code Structure
02:01 Zoom Functionality
09:47 Drag / Pan Functionality
26:30 Saving and Loading