Main content

## Pixar in a Box

### Course: Pixar in a Box > Unit 8

Lesson 2: Painting with randomness- Start here!
- Looking at different resolutions
- Resolution challenge
- One dimensional noise
- One dimensional noise
- Perlin noise (1D)
- Multi-resolution noise
- Perlin noise (2D)
- Two dimensional noise
- Painting your dino skin
- Make your own dino skin 2
- Bonus Challenge

© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice

# Perlin noise (2D)

Explore how 3D curves can be added together to create 2D noise. Click here to play with the interactive used in this video.

## Want to join the conversation?

- So I'm assuming code-wise that this 2-dimensional noise is the equivalent of a range of values inside a 2-dimensional array like so:
`var noise2D = [[100, 255, 50, 85, 92, 100], [60, 92, 284, 129, 37, -50], [68, 180, 90, 10, -20, 3]];`

As essentially, the values of the 2nd dimension of the array would be the`Z`

, the second dimension would be the`X`

or`Y`

, and the first dimension would be the complement of whatever the second dimension is. Is my analogy correct? Is this how 2-dimensional noise would be implemented into a program, aside from the fact that I used fixed values here instead of noisy interpolation?**EDIT**: I think you may have misinterpreted my question. I've edited my question to better reflect what I was talking about. I was following what the video said in that you have to use 3 dimensions to describe 2-dimensional noise.(7 votes)- I think you're describing 2D noise. For 3D noise, you have a function that takes three parameters, like
`noise(x, y, z)`

and returns value. 3D noise can be used to create 2D clouds that change over time, or to texture a 3D surface in a realistic way.

3D noise requires numbers in a 3D array. As a minimal example, you could add values to the points of unit cube, with something like:`var noise3D = [[[0, 1], [2, 3]], [[4, 5], [6, 7]]];`

The function then uses the x, y, z, parameters as indices to look up the value in the arrays. For non-integer values, it uses some sort of interpolation between values in the grid as for one- and two-dimensional noise. For 1D noise, you need to interpolate between 2 values; for 2D noise you interpolate between 4 values (the corners of the square surrounding a point on a grid); for 3D noise you interpolate between 8 values (the corners of the cube surrounding a point in space).(3 votes)

- o((>ω< ))o╰（‵□′）╯(～￣(OO)￣)ブ(╬▔皿▔)╯o(≧口≦)o( ˘︹˘ )(3 votes)
- One quick question... How do you solve that in numbers? (sorry if I needed some experience before taking this course)(2 votes)
- so... if you want to make a 3d surface would you need a 4d thing?(1 vote)
- Most likely, you would need a 3D model to make a 3D surface. I'm pretty sure that 4D is the time and space dimension in astronomy.(1 vote)

- Does pixar tend to use procedural textures and shaders for all of their assets? (vs using mapped and painted textures)(1 vote)
- How come the more you subdivide, the blurrier the picture gets?(1 vote)
- At0:31the graph is 3d so how would a person draw that on paper?(1 vote)
- they dont draw that they scan a page with many dots on it(1 vote)

## Video transcript

- So far we've been working with Perlin noise in one dimension. - But remember, the problem we really wanna solve is in two dimensions. - Luckily, we can apply
the exact same idea in 2D. This part is really fun. - [Woman 2] Remember, to
generate 1D variation, we used a 2D curve to define the variation of the base color along the line. - [Woman 1] We used the
x component of the curve to define the horizontal pixel position, and the y component defined
the brightness of each pixel. - [Woman 2] But to make 2D noise, we'll need to start with a 3D surface to define the variation across the plane. Think of a 3D surface as
a collection of points which have an x, y, and z component. For example, here is a surface defined by a bunch of random points. - [Woman 1] Think about the x and y coordinates of each point as the finding the pixel position in a 2D
plane, and the z coordinate will define the brightness of each pixel. - [Woman 2] If we do that, we get a 2D output which looks like this. Notice the peaks of this surface result in lighter points, and
the valleys are darker. - [Woman 1] As before,
the output has very sharp boundaries between light and dark areas. That's because the surface isn't smooth. - [Woman 2] Luckily we
can subdivide this surface in the exact same way we
smoothed our 2D curve. This will add new in-between
points to our surface, resulting in smoother transitions. - [Woman 1] And that gives us this very natural looking variation. It's exactly the kind of cloudy pattern identified in the shading packet. - You probably wanna try
this out for yourself. In the next exercise,
you can try matching some 2D patterns using this technique. - [Woman 1] We will give
you a target pattern, and you can match this by
adjusting one the base color. Two the resolution, this is how far we zoom in or out of our surface. Three, the subdivision, or how much smoothing we apply to the curve. - In this example we're manipulating a few parameters to get our look. But in a real production shading project, how many parameters would you adjust? - Well, background
characters would actually be usually in the hundreds
but main characters, like Arlo, you would have up to thousands. If he's in mud, you would control how much mud he gets,
or the color of the mud, or how dry the mud is supposed to be. He could have rain, and so you would control maybe how fast it is, or the different parts where
you want the rain to show up. He could have bruises,
like throughout the journey he gets bruises and he gets part of the journey represented on his body. And you would have controls
for all of those things, besides colors or maybe
in certain environments he looks a little bit
too shiny so you want to bring the shininess down,
or things like that. So there's just controls
for pretty much everything. - [Woman 2] Sounds complicated. - [Woman 1] It is!