A Virtual World - JavaScript Course: Lesson 3 / 11 [Pan & Zoom with JavaScript]

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⭐

⭐FINAL APP⭐

💻CODE💻
2. Graph Editor = follow along
3. Dynamic Viewport = code after this lesson

⭐ALL PREREQUISITES⭐

⭐Emojis I used in the video⭐
🗑️💾

⭐My Video on 2D Vectors⭐

☕Buy me a Coffee?☕

⚡️Join this Channel⚡️

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

[bmcch]

Great content. It is really great to learn with such a easy way of explaining. I have a comment though. I do not agree with the observation that modern interfaces zoom with regards to the center of the screen. My experience tells me that they use the mouse pointer location as the zoom point. After hearing this in the explanation I went into a couple of modern application that provide a similar viewPort (ex.: Google Maps) and confirmed my experience. I'll try modifying your implementation according to this.

On another suggestion regarding methods on top of points implemented in utils.js. Don't you agree that, because they are operations on top of points that they should be Point class methods (static or other wise)? Even considering that the resulting entity is not a Point, but a Vector (Which is represented in the same way). I understand that JavaScript does not have the same approach of statically importing methods (if it does I am not aware of it) but I this that the overhead of referring to them through as ' (...) = Point.add(p1, p2) is not overwhelming and it keeps the code more organized.
Would like to hear your opinion. Thanks

[eagerpk]

Radu! Your knowledge is amazing but the way you make things look so simple to learn is superb. Never seen anything like this taught in such a kool way. 🏅

[KirtiDhruv]

You deserve at least a 1 million followers and at least 50k views on each video!

[DanielJoseAutodesk]

There are people who, if they were to do this, would do an extremely complicated way. But you have shown that it is very easy to get what you want. 😁👍

[serveshchaturvedi]

To say this course is the best is an understatement. This is simply perfection. Forever grateful for this ❤

[___dp]

I love the way you pay attention to details! I would have never discovered this rare behavior related to the drag and the intent (dotted line)! You are awesome!

[Eternam]

Great lessons we are learning from the basics to amazing things to come
I love this series.
Thank you very much Radu.

[souerico]

This series is a gem! 🙌
I'm watching it for the second time to catch all the tips for my personal project! By the way you could have used IDs for the objects (Points, Segments). It could make the loading easier, I think.

[Radu]

A good homework is to make this editor mobile friendly as well. Think you can do it? How would you approach it? :-)

[pesterenan]

Another AWESOME video! I'm impressed by how robust the editor feels now, so cool! Can't wait to start adding things to it, making the roads and etc. I'm also coding and commiting code on my Github repo so I don't miss anything along the series hahah

[CA-at-YT]

Truly an amazing lesson - thank you (think I have to spend more coffee after phase 2 😉). Although a small improvement for intuitiveness might be to set the zoom-center where the mouse is (instead of the viewport center). Then you could point with the mouse to the area you are interested in.

[pizdaxyu]

soo good! I like how you start with minimal class with just one or two method and then build up

[gustvanmierlo]

Hi Radu,

As I said before, I'm programming this in Python.


Since I have no mouse but use the touchpad on my laptop I implemented the zooming and moving through the two finger squeezing, stretching and sliding. I had to google a bit to find out how to catch these events in the Python GUI library I'm using, but it turned out well.

In my viewport, I use three attibutes zoom, delta_x and delta_y and two conversion methods, canvas_to_graph_coordinates() and

And while waiting for your next video, I added some extra's in my Python world editor.
- A vertical and horizontal scroll bar to move the graph in the canvas.
- Small'+' and '-' buttons for zooming in and out.
- A '*' button for a "helicopter view': maximum zoom factor and delta_x and delta_y both = 0.
- If I zoom or move via the touchpad, the handles on the scrollbar or moving to the corresponding position (I know you like such details).
- A status bar, showing mouse position (in graph coordinates), delta_x, delta-y, zoom_factor, selected point coordinates and dragging yes or no.
- And I also save the zoom, delta_x and delta_y values along with the points and segments.

[devperatetechno]

totally amazing, im enjoying this a lot, thanks

[cloudzero]

Believe it or not I've waited years to figure out how to properly zoom and pan the canvas like this. Thank you so much. Something I started looking at recently for saving data in JS is IndexedDB (Indexed Database). It's supposed to be able to save whole objects but I don't know a lot about it, I'm curious about your opinion. Since I plan on creating a full game in JS it's important to know the best way to save games. Also, another way to save data is to cause a blob download (or similar).

[yusuf.isyaku]

Oh things are getting out of hand 🤦‍♂️.. Thank you Radu. I'd have to rewatch this again.

[ouyuanhan]

Great lecture!!!! THX!!!! Would you explain how to implement undo redo?

[kengraham]

These are amazing tutorial videos, now I just need to work out how to do dragging with an Apple Magic Mouse which has no middle button

[mrzielscheibe]

Hey Radu, thanks for your great videos, I'm having so much fun trying everything out and coding alongside you. (And of course I love the puns in the intros :D )

Today I encountered my first problem: when I used firefox I couldn't get a console output at 3:20 with the apparently deprecated "mousewheel" event type. I could get it to work when changing "mousewheel" to "wheel".

[javifontalva]

24:38 this is when I get lost. how come you put ctx.restore before ctx.save()??? I got confused.