Day 5
<p dir="auto">This my fifth post on the <code>100 days of learning challenge I set myself.You can read more about this years goals <a href="https://steemit.com/personal/@harps116/starting-2018" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">here.
<h2>Making the random numbers seem more organic.
<p dir="auto">But there is another mathematical tool that we have at our disposal to make some nice sets of numbers. Enter:
<h2>Perlin Noise
<p dir="auto">Perlin Noise allows us to make smooth randomness, It was originally developed to create textures in 3d graphics. Let's say we wanted to make a vase seem like it was made of marble. Rather than hand create we can use an algorythm to generate a texture.
<p dir="auto">So what does Perlin Noise look like?
<p dir="auto">Say we picked a random number at any given moment in time, the timeline would look totally random like so:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmXxArkpmq3uy17FMsodZCLdeJEsKs97TDWZSbAQocgLfs/random_wave.png" alt="random_wave.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmXxArkpmq3uy17FMsodZCLdeJEsKs97TDWZSbAQocgLfs/random_wave.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmXxArkpmq3uy17FMsodZCLdeJEsKs97TDWZSbAQocgLfs/random_wave.png 2x" />
<p dir="auto">See the Pen <a href="https://codepen.io/harps116/pen/qpgmWo/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Random Wave by Adam Harpur (<a href="https://codepen.io/harps116" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">@harps116) on <a href="https://codepen.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">CodePen.
<p dir="auto">The X axis represents our timeline and each point is a random number at that given point in time with a sequencial x value as it iterates across the width of the canvas and a series of vertices at random y values that create the wave shape.
<p dir="auto">The output is showing us the values as we move through time, but it isn't that pleasant to look at, the peaks and troughs are very harsh.
<p dir="auto">We could use Perlin Noise to make a nice smooth pattern. Yes, the numbers are still random but they seem to have a closer relationship to eachother:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmPxHNEd8kSL7BD15H9bnyKMtRfLrx7tmbQomL1vdE2wK1/perlin_noise.png" alt="perlin_noise.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmPxHNEd8kSL7BD15H9bnyKMtRfLrx7tmbQomL1vdE2wK1/perlin_noise.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmPxHNEd8kSL7BD15H9bnyKMtRfLrx7tmbQomL1vdE2wK1/perlin_noise.png 2x" />
<p dir="auto">See the Pen <a href="https://codepen.io/harps116/pen/EorZra/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Perlin Noise 1D by Adam Harpur (<a href="https://codepen.io/harps116" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">@harps116) on <a href="https://codepen.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">CodePen.
<p dir="auto">Here we are scanning Perlin Noise wave. I would suggest checking out the example via the link for the full effect.
<p dir="auto">Here are the basic steps:
<p dir="auto">We get a noise value returned from p5.js's noise function which is a number between one and zero which we then multiply by the height of the canvas.
<p dir="auto">This us allows us to plot the points.
<p dir="auto">We increase the X value by the increment and set the start position to a start variable which is also incremented.
<p dir="auto">This lets us move across the Perlin Noise graph.
<p dir="auto">That was quick at look at what Perlin Noise can do for us in terms of creating Random Numbers. This has a lot of potential and I'm hoping to explore more advanced topics involving Perlin Noise.
<p dir="auto">Check out Daniel Shiffman's great series on the <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aFlwukCmDf0-1-uSR7mklK" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Nature of Code, this 100 days of learning is a great excuse for me to finally work through the lessons and take some notes as I go.