Perlin Noise and its Application

Standard

Although the term Perlin Noise may seemed to be unfamiliar, but its application goes to the contemporary movies and video games in the last 20 years. The noise was developed by Ken Perlin for the 1982 film TRON. The task was to develop a more fluid and natural appearance for 3D objects for the film. Normally image texture is used as the material for the 3D object, but Ken Perlin used a random mathematical formula. “Perlin noise is simply a well-crafted pseudo-random function which is designed to look controlled and natural.” The technique revolutionize the field of motion graphics as it allows the 3D object much more efficiently at that time where computer memory was very limited, as a mathematical formula uses much fewer memory than a large image map and it was easier to apply the noise formula than using the UV method that wrap an image around a 3D object. Perlin noise was very efficient and effective that the graphics industry adopted them as standard techniques (Williams, 2012). In 1997 Ken received an Award from the Academy of Motion Picture Arts and Science for his work. The awards says, “The development of Perlin Noise has allowed computer graphics artists to better represent the complexity of natural phenomena in visual effects for the motion picture industry.” (Perlin, n.d.)

Figure 1. Perlin Noise used to animate array of cubes (2012) graphicdimensions.wordpress.com

The application of Perlin noise in the Motion Graphic and Video Games is very wide as it is the foundation of various systematic texture and modelling algorithms. Perlin Noise is generated mathematically like a graph, thus for different dimensional graph its function also varies. The application of Perlin Noise are:

Landscape or Terrain

By Using the 2 Dimensional Perlin Noise as a height map it can create an interesting shape of terrain. The shape of it can be easily calculated, stretch indefinitely and it is calculated to the very detail (Figure 2) (Tulleken, 2009).

Various example of landscape generated using Perlin Noise (Tulleken, 2009) (Quilez, 2008).

Figure 2. Various example of landscapes generated using Perlin Noise. (2008) iquilezles.org

 Figure 2 (lower right). (2009) devmag.org.za

Clouds

Perlin Noise is very convenient in rendering 2D clouds (Cortes, 2012), and 3 Dimensional Perlin Noise can produce volumetric clouds (Figure 4).

Figure 3. 2D clouds generated using Perlin Noise, Perlin Noise Generated, Adjusting Levels and Adding Colour (From Left to Right) (Cortes, 2012).

Figure 3. 2D clouds generated using Perlin Noise. Steps are: Perlin Noise Generated, Adjusting Levels and Adding Colour (From Left to Right) (2012). romancortes.com

Figure 4. Volumetric Cloud (Kutz, n.d).

Figure 4. Volumetric Cloud (n.d). peterkutz.com

Textures

2 Dimensional Perlin Noise is mostly use to create texture, and its basic application is to map it with a gradient. This will result in attractive maps or fire effects as shown in figure 5. The noise also allows the blending in between 2 textures (Figure 6).

Figure 5. Various textures generated using Perlin Noise (Tulleken, 2009).

Figure 5. Various textures generated using Perlin Noise. (2009) devmag.org.za

Figure 6. 2 Textures blended together using Perlin Noise (Tulleken, 2009).

Figure 6. 2 Textures blended together using Perlin Noise.(Tulleken, 2009).

(2009) devmag.org.za

And by using the 3 dimensional Perlin, it can generate a growing effect using 3 textures and the appropriate blending (Figure 7). (Tulleken, 2009)

Figure 7. Real Time Transitions Using Perlin Noise (Tulleken, 2009).

Figure 7. Real Time Transitions Using Perlin Noise (Tulleken, 2009).

Animation

Perlin Noise can be used to animate or deform any object easily, be it 3D or 2D, below are various example of animation using Perlin Noise.

Figure 8. Perlin Noise deforming a sphere. (2012) graphicdimnesions.wordpress.com

Video 1. Perlim Noise Animation (Ferenczi, 2010).

Video 2. Perlim Noise 3D (Wezside, 2011).

Video 3. Perlim Noise Warping (Hamzic, 2012).

Video 4. Processing Perlin Noise Experiment 2 (Berg, 2008).

Here are also basic applications of Perlin Noise in website using WebGL and Three.js, click on the image to access.

Figure 9. Wobbly Chrome Sphere. (n.d.) clicktorelease.com

Figure 10. Lights with Radial Blur. (n.d.) clicktorelease.com

Figure 11. Fireball Explosion. (n.d.) clicktorelease.com

Reference

Berg, B. (2008) ‘Processing Perlin Noise Experiment 2’. Available at: http://vimeo.com/1699793 [Accessed 13 November 2013].

Click To Release. (n.d) ‘Experimenting with Perlin Noise’. [online] Available at: http://www.clicktorelease.com/blog/experiments-with-perlin-noise [Accessed 13 November 2013].

Cortes, R. (2012) ‘The Entry I Didn’t Submit to Js1K’, Roman Cortes. [online] 1 April 2012. Available at: http://www.romancortes.com/blog/the-entry-i-didnt-submitted-to-js1k/ [Accessed 13 November 2013].

Ferenczi, B. (2010) ‘Perlin Noise Animation’.  2010. Available at: http://vimeo.com/13416415 [Accessed 13 November 2013].

Hamzic, A. (2012) ‘Perlin Noise Wrapping’. 2012. Available at: http://vimeo.com/35057708 [Accessed 13 November 2013].

Perlin, K. (n.d.) ‘Noise and Turbulence’, New York University. [online] Available at: http://mrl.nyu.edu/~perlin/doc/oscar.html [Accessed 13 November 2013].

Quilez, I. (2008) ‘Advanced Perlin Noise’. [online] Available at: http://iquilezles.org/www/articles/morenoise/morenoise.htm [Accessed 13 November 2013].

Tulleken, H. (2009) ‘How to Use Perlin Noise in Your Games’, DevMag. [online] 25 April 2009. Available at: http://devmag.org.za/2009/04/25/perlin-noise/ [Accessed 13 November 2013].

Wezside, (2011) ‘Perlin Noise 3D’. 2011. Available at: http://vimeo.com/31792461 [Accessed 13 November 2013].

Williams, D. (2012) ‘Designing Noise’, Graphic Dimensions. [online]  4 December 2012. Available at: http://graphicdimensions.wordpress.com/2012/12/04/designing-noise [Accessed 13 November 2013].

YTmartinz, (2012) ‘A 3D Perlin Noise Experiment’. 5 February 2012. Available at: http://www.youtube.com/watch?v=vPrZJgy0Iqk#t=88  [Accessed 13 November 2013].

List of Images

Figure 1. A Gif Animation on ‘Perlin Noise used to animate array of cubes’, (2012) [image online] ‘Designing Noise’. Graphic Dimensions. 4 December 2012. Available at: http://graphicdimensions.wordpress.com/2012/12/04/designing-noise [Accessed 13 November 2013].

Figure 2. Pictures of ‘Various example of landscapes generated using Perlin Noise’ , (2008) [image online] ‘Advanced Perlin Noise’. Available at: http://iquilezles.org/www/articles/morenoise/morenoise.htm [Accessed 13 November 2013].

Figure 2 (lower right). A picture of ‘An example of landscape generated using Perlin Noise’, (2009) [image online].  ‘How to Use Perlin Noise in Your Games’, DevMag. 25 April 2009. Available at: http://devmag.org.za/2009/04/25/perlin-noise/ [Accessed 13 November 2013].

Figure 3. Series of pictures depicting ‘2D clouds generated using Perlin Noise. Steps are: Perlin Noise Generated, Adjusting Levels and Adding Colour (From Left to Right)’, (2012) [image online] ‘The Entry I Didn’t Submit to Js1K’, Roman Cortes. 1 April 2012. Available at: http://www.romancortes.com/blog/the-entry-i-didnt-submitted-to-js1k/ [Accessed 13 November 2013].

Figure 4. A Picture Depicting ‘Volumetric Cloud’, (n.d.) [image online] ‘Computer Graphics by Peter Kutz’, Peter Kutz. Available at: http://www.peterkutz.com/ [Accessed 13 November 2013].

Figure 5. A series of pictures depicting ‘Various textures generated using Perlin Noise’, (2009) [image online]  ‘How to Use Perlin Noise in Your Games’, DevMag. 25 April 2009. Available at: http://devmag.org.za/2009/04/25/perlin-noise/ [Accessed 13 November 2013].

Figure 6. A series of pictures depicting ‘2 Textures blended together using Perlin Noise’, (2009) [image online]  ‘How to Use Perlin Noise in Your Games’, DevMag. 25 April 2009. Available at: http://devmag.org.za/2009/04/25/perlin-noise/ [Accessed 13 November 2013].

Figure 7. A series of pictures depicting ‘ Real Time Transitions Using Perlin Noise’, (2009) [image online]  ‘How to Use Perlin Noise in Your Games’, DevMag. 25 April 2009. Available at: http://devmag.org.za/2009/04/25/perlin-noise/ [Accessed 13 November 2013].

Figure 8. A Gif Animation on ‘Perlin Noise deforming a sphere’, (2012) [image online] ‘Designing Noise’. Graphic Dimensions. 4 December 2012. Available at: http://graphicdimensions.wordpress.com/2012/12/04/designing-noise [Accessed 13 November 2013].

Figure 9. A picture showing ‘Wobbly Chrome Sphere’ as a hyperlink to: http://www.clicktorelease.com/code/perlin/chrome.html, (n.d.) [image online] ‘Experimenting with Perlin Noise’, Click To Release. Available at: http://www.clicktorelease.com/blog/experiments-with-perlin-noise [Accessed 13 November 2013].

Figure 10. A picture showing ‘Lights with Radial Blur’ as a hyperlink to: http://www.clicktorelease.com/code/perlin/lights.html, (n.d.) [image online] ‘Experimenting with Perlin Noise’, Click To Release. Available at: http://www.clicktorelease.com/blog/experiments-with-perlin-noise [Accessed 13 November 2013].

Figure 11. A picture showing ‘Fireball Explosion’ as a hyperlink to: http://www.clicktorelease.com/code/perlin/explosion.html, (n.d.) [image online] ‘Experimenting with Perlin Noise’, Click To Release. Available at: http://www.clicktorelease.com/blog/experiments-with-perlin-noise [Accessed 13 November 2013].

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s