If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Perlin noise (1D)

Animated movies and videos games use Perlin noise to create detailed natural patterns like landscapes or hair grooms. Perlin noise adds multiple curves together at different resolutions to create a final pattern. Amplitude sliders can then control how much each curve contributes to the summed curve. Click here to play with the interactive used in this video.

Want to join the conversation?

  • duskpin ultimate style avatar for user DeborahRoseBala
    I'm confused, why is it called noise?
    (4 votes)
    Default Khan Academy avatar avatar for user
  • duskpin tree style avatar for user Tyvon Wallace
    I don't know what's going on.
    (2 votes)
    Default Khan Academy avatar avatar for user
  • leaf green style avatar for user colin
    Is this scripted? Anyway intuitive information.
    (1 vote)
    Default Khan Academy avatar avatar for user
  • winston default style avatar for user NANI
    great work so far we define a curve which captures the overall variation and brightness the brightness depends on the y-coordinate or amplitude of a curve but remember our goal is to capture the patterns of different resolutions the first curve only captures variation at low resolutions think of it as a broad stroke so we need to add higher resolution variation to our curve these are the smaller details or changes in the amplitude to do this simply add two curves together for example take our original curve and add it to the second curve which would result in this final curve very cool mathematically we are just adding the y-coordinates together okay we've updated our program so that we can try this out at the top is the low resolution curve same as the previous exercise and below it is a new curve which is created by squishing two copies of the original curve together it's a higher resolution curve because it contains more detail call this our medium resolution curve and we can keep doing this here we've added a third curve it's defined by squishing two copies of the medium resolution curve together in the same way this is our high resolution curve it contains the most detailed variations and at the bottom we show the results of adding these curves together I see you have amplitude sliders as well that's fancy yes these allows you to adjust how much that resolution contributes to the final curve meaning if the amplitude slider is set to zero then that resolution is ignored in the final curve and if I ramped up it really takes over by the way this process was invented by Ken Perlin in 1988 and this is why the variation is called Berlin noise and his idea has been used in almost every computer-generated movie in the past 20 years now it's your turn to try this out in the next exercise we'll test your understanding of these multiple resolution curves and then we can move into higher dimensions do you have an anecdote about Perlin noise well in addition to surface shading we also use noise patterns to control our hair grooms for example we use purlins and other types of noises to control the length of hairs the width thus kragle clumping and other parameters you can see in almost all of our hair grooms definitely spots hair is a good one to look at for that in the good dinosaur bring me
    (0 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam orange style avatar for user Elder Fauth
      great work so far we define a curve which captures the overall variation and brightness the brightness depends on the y-coordinate or amplitude of a curve but remember our goal is to capture the patterns of different resolutions the first curve only captures variation at low resolutions think of it as a broad stroke so we need to add higher resolution variation to our curve these are the smaller details or changes in the amplitude to do this simply add two curves together for example take our original curve and add it to the second curve which would result in this final curve very cool mathematically we are just adding the y-coordinates together okay we've updated our program so that we can try this out at the top is the low resolution curve same as the previous exercise and below it is a new curve which is created by squishing two copies of the original curve together it's a higher resolution curve because it contains more detail call this our medium resolution curve and we can keep doing this here we've added a third curve it's defined by squishing two copies of the medium resolution curve together in the same way this is our high resolution curve it contains the most detailed variations and at the bottom we show the results of adding these curves together I see you have amplitude sliders as well that's fancy yes these allows you to adjust how much that resolution contributes to the final curve meaning if the amplitude slider is set to zero then that resolution is ignored in the final curve and if I ramped up it really takes over by the way this process was invented by Ken Perlin in 1988 and this is why the variation is called Berlin noise and his idea has been used in almost every computer-generated movie in the past 20 years now it's your turn to try this out in the next exercise we'll test your understanding of these multiple resolution curves and then we can move into higher dimensions do you have an anecdote about Perlin noise well in addition to surface shading we also use noise patterns to control our hair grooms for example we use purlins and other types of noises to control the length of hairs the width thus kragle clumping and other parameters you can see in almost all of our hair grooms definitely spots hair is a good one to look at for that in the good dinosaur bring me
      (1 vote)
  • starky sapling style avatar for user amccormick24
    What if I dont understand what a curve is
    (0 votes)
    Default Khan Academy avatar avatar for user
  • leaf red style avatar for user Ashraf Raza
    how do you make an animated video.I mean do you have to create animated drawings of every second , every millisecond of the animation ? can you make me understand these stuff clearly ??
    (0 votes)
    Default Khan Academy avatar avatar for user
    • piceratops ultimate style avatar for user Atreya Vedantam
      So, what you have to do is draw frames for a second or two. Then you'd have to write a code to fill up the gaps between. Remember, even high-quality animation is made up of frames only, so at a basic level, it's too just a collection of millions of photos. You can learn more about these in the animation course taught here in Pixar In A Box.
      (1 vote)
  • leafers tree style avatar for user Davidt62
    can you mix all three and is there more curves
    (0 votes)
    Default Khan Academy avatar avatar for user
  • starky seedling style avatar for user marieflora.some
    Explore how 2D curves can be added together to create more detailed patterns. Click here to play with the interactive used in this video.
    (0 votes)
    Default Khan Academy avatar avatar for user
  • purple pi purple style avatar for user Taryn
    This video isn working on my account... please fix this..... Thanks!!
    (0 votes)
    Default Khan Academy avatar avatar for user

Video transcript

- Great work. So far we define a curve which captures the overall variation and brightness. - The brightness depends on the Y coordinate or amplitude of a curve. - But remember our goal is to capture the patterns at different resolutions. The first curve only captures variation at low resolutions, think of it as a broad stroke. - [Lady Voiceover] So we need to add higher resolution variation to our curve. These are the smaller details or changes in the amplitude. - [Lady Voiceover] To do this, simply add two curves together, for example, take your original curve and add it to the second curve, which would result in this final curve. - [Lady Voiceover] Very cool. Mathematically we are just adding the Y coordinates together. - [Lady Voiceover] Okay, we've updated our program so that we can try this out. At the top is the low resolution curve, same as the previous exercise. - [Lady Voiceover] And below it is a new curve which is created by squishing two copies of the original curve together. It's a higher resolution curve because it contains more detail. Call this our medium resolution curve. - [Lady Voiceover] And we can keep doing this. Here we've added a third curve. It's defined by squishing two copies of the medium resolution curve together in the same way. - [Lady Voiceover] This is our high resolution curve. It contains the most detailed variations. - [Lady Voiceover] And at the bottom we show the results of adding these curves together. - [Lady Voiceover] I see you have amplitude sliders as well, that's fancy. - [Lady Voiceover] Yes, this allows you to adjust how much that resolution contributes to the final curve. - [Lady Voiceover] Meaning if the amplitude slider is set to zero, then that resolution is ignored in the final curve, and if I ramp up it really takes over. - [Lady Voiceover] By the way, this process was invented by Ken Perlin in 1988 and this is why the variation is called Perlin Noise. - [Lady Voiceover] His idea has been used in almost every computer generated movie in the past 20 years. - Now it's your turn to try this out. In the next exercise we will test your understanding of these multi resolution curves. - Then we can move into higher dimensions. - Do you have an anecdote about Perlin Noise? - Well in addition to surface shading we all see as noise patterns to control our hair grooms. For example you use perlin and other types of noises to control the length of hairs, the width, the scraggle, comfing and other parameters. You can see it in almost all of our hair grooms, definitely Spot's hair is a good one to look at for that in The Good Dinosaur. - [Lady Voiceover] Pretty neat.