Uploaded September 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 build a graph editor from scratch, using basic HTML, CSS and JavaScript. The graph will act as a basis and the world will be generated according to it.

In this digital age, a good user interface should streamline interactions, minimizing the need for excessive clicks and keyboard inputs. I'll teach you how to do this when making a graph editor and how to think like this in general.

Throughout this series, I'll guide you step by step, showcasing how to build a graph editor with a primary focus on mouse interaction. The mouse is a versatile tool, and in this course, we use it to add, drag, remove points effortlessly. 🖱️

We'll start from the basics, gradually implementing new features and refining existing ones, all with the aim of achieving a final logic that's not only functional but also intuitive. By the end, you'll not only have a graph editor to be proud of but also the skills to customize it to your heart's content.

Have Fun! :-)

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

⭐FINAL APP⭐
radufromfinland.com/projects/virtualworld

💻CODE💻
github.com/gniziemazity/virtual-world
1. Spatial Graphs = follow along
2. Graph Editor = code after this lesson

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

⭐Pythagorean Theorem Video⭐
youtu.be/iqSlzYXdFzw

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

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

⭐Timestamps⭐
00:00 Introduction
01:09 Top-level Code Structure
03:21 Adding Points
06:06 Selecting Points
17:35 Removing Points
22:05 Dragging Points
24:54 Creating Segments
35:03 Debugging / Fine-tuning