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

The "Coding Noise with noise2D" 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 jumps back into the code and demonstrates how to implement noise2D in the existing example.

Preview
Close

Transcript from the "Coding Noise with noise2D" Lesson

[00:00:00]
>> Mathew DesLauriers: So to do that, let's open up our code again,
>> Mathew DesLauriers: And here as you remember we have this radius value, and instead of just using a gaussian randomness, we're going to create a new thing here called radius, and we're gonna use random.noise 2D. And we pass in the horizontal and vertical coordinate for our noise.

[00:00:25]
You can pass in x and y which is in indexes, but it's gonna be better to pass in u and v because those numbers are between zero and one. So that's just gonna give us more consistent results. And this radius, then we're gonna use that here.
>> Mathew DesLauriers: Whoops, just like this.

[00:00:45]
And remember that,
>> Mathew DesLauriers: With Cavas2D if we try and draw a circle with a negative radius, we're gonna end up with a bit of an issue, so what you can do is either wrap this with Absolute, or you can, that's maybe what I'll do right now just to show you.

[00:01:06]
>> Mathew DesLauriers: And the other thing to remember is that we had a very small number, and now this value is between -1 and 1, which is still small. But we had before, we had multiplying it by .01 or .05 or something like that.
>> Mathew DesLauriers: So let's use a small number, like 0.05.

[00:01:24]
And,
>> Mathew DesLauriers: Now when you reload the page, you might see something interesting. One other thing that I wanna do now, is remove this deterministic randomness. It was just to show you deterministic randomness. But what I wanna do, is I wanna get back into reloading the page and getting a random result each time.

[00:01:46]
And that's what I just did, is I just deleted that line that said, set seed. And so now when I reload the page I end up with,
>> Mathew DesLauriers: Here we go, this different sort of scene.
>> Mathew DesLauriers: I'm using maybe, I can use a smaller number.
>> Mathew DesLauriers: And now we can start to see that with our noise function, it's still producing this randomness, but the randomness is slowly changing from one grid position to the next.

[00:02:15]
And that's gonna be really nice when we start to do rotation. That's what we'll do now.

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