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

The "Canvas Q&A" 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:

A question is asked about how to save work when it is randomly generated,


Transcript from the "Canvas Q&A" Lesson

>> Mathew DesLauriers: But I just wanted to see if anyone has any questions.
>> Speaker 2: Do you have any way of, let's say you're just reloading and getting a different random setup every time, is there any way you could be like, I really like that. How do you?
>> Mathew DesLauriers: Yeah, so, good question.

So what I do when I'm doing this generative art sort of stuff. Is that I will quite often at the top of file, somewhere right after I require random, I'm gonna set random seed. And instead of always using the same value, I'm going to use a random number between like 0 and like 1 million, or something like that, and the random module has a function called getRandomSeed.

And that's just gonna give you back a number between zero and something really large. And then I console.log the seed. So I do random.getSeed. And now in my console, I have all these random distributions and stuff like that. And I see this, you can now either, in your console, you can preserve log, so every time you reload you still have the old values.

That's one way I do it. Another thing is just to manually instead of doing this, so I just have the value 1. And I'm like value 2. Nah, value 3. Nah, and I'm like 4. And I might just be like 4 is really good. There's other things too like one thing I do sometimes is I'll create a loop.

And I'll create a bit of an animation where each frame is a different seed, and each then each frame actually spits out a file that is associated with that seed. That's something else that is kind of useful with this tool. So I'm just gonna show you if I was to move this random.getRandomSeed again like I was doing before.

In the settings object, you can specify a suffix which is a string. And when you give a string, and then you save your file, Command S, if you look in your downloads, it will have that suffix on the end of the file. And so what I tend to do is I'll use the random seed, so I just do getSeed which is the current seed.

And now when I save this file, I end up with a file that has the random seed associated with it. And there's there's even more technical things that I do to try and reproduce this artwork. Because this is like a thing that I run into all the time in generative art is I have a variation that I really enjoy, and then I lose it and I can't get back to it.

And so, there's another hotkey in Canvas Sketch, which is Command K, and it doesn't work unless you're in a Git Repo. And what that does is it exports. But then it also commits all of your code. And the exported file with have the git hash on the end of the file.

And so what I do is I'll be tweaking code and I'll be like, okay, I like this variation. Let's say, this is really cool. I'll do Command K in a Git Repo. It's gonna commit my code as it is right now. And it's gonna give me back a file that associated with that exact Git hash.

And so later, when I have, let's say, like 50 or 100 different images, I can be like this image is really good and I just wanna go back, change the size, or I just wanna go back to that Git hash, tweak it, and so you can do that.

But yeah, there is definitely a lot of little things like that that you start to notice when you do this kind of thing over and over again.

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