Check out a free preview of the full Creative Coding with Canvas & WebGL course

The "Hot Reloading & Future Features" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

Matt demonstrates how to use hot module reloading in a project to speed up development. Future improvements to the tool are also discussed.

Preview
Close

Transcript from the "Hot Reloading & Future Features" Lesson

[00:00:00]
>> Mathew DesLauriers: One other thing I just wanted to show, and this is kind of an experimental feature of canvas sketch, but it's kind of a cool feature. It starts to show where this tool can go in the future and how it can be more and more of a really, really good workflow for creative coding.

[00:00:18]
So instead of just running Canvas sketch on my share file, I'm going to run the same thing, but I'm going to specify this flag called --hot. And now when I reload and when I start coding, and I save my file, it's going to hot reload all of the changes into my scene.

[00:00:41]
And so the result of that is that it's a much more immediate feedback as you're coding and as you're saving your file. Because the changes in your code aren't producing this very bright flash of white as the page reloads. It's just taking the new code and it's rerunning it, and it's applying those changes without changing the time, or without changing the seconds of how long your loop is running.

[00:01:08]
So that's just something to keep in mind. It's a bit more of an advanced feature. But if you are using this tool, you could definitely use that. And it actually works, not just for the shaders, but with WebGL and with 2DR, it works as well. Starts to become really useful as you're doing more generative art sort of stuff.

[00:01:27]
But it's not something we'll do too much today. I just wanted to show you guys that feature and how sort of the future features of this tool are gonna get better and better. Another feature that is gonna come up eventually with this tool Is parameters, like little sliders in the top right.

[00:01:43]
So you can start to really easily, let's say you wanted to add a color here. Instead of specifying your colors with vec 3s, eventually in this tutorial, you're gonna be able to use color pickers and stuff like that. But I just haven't built those in yet, so they're still a work in progress.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now