Sunday, March 3, 2019

2D and 3D Perlin Noise

This has been a great weekend! I have sort of exhausted for the moment my tutorials on Perlin Noise. The task now is to implement this in a minimal footprint of code that is accessible to students, and Kogan is a big help with this!!!!

Daniel Shiffman, and Gene Kogan have been a great help! Here are some results of 2D and 3D Perlin Noise experiments!

The first example shows how a noise( ) value could be used to define a pattern, and filled with random gray scale values.

The second one shows how forms can be created by using some pretty cool maths! The example shows a Bézier Curve.

According to the p5.js documentation this is actually a 2D Bézier Curve!

bezier (x1,  y1,  x2,  y2, x3,   y3,  x4,  y4);

A Bézier Curve is a special type of parametric equation that helps to define a geometric object, which can be a surface or curve.

Most students might know parametric equations through the study of the unit circle for example we can convert the cartesian coordinates (x, y) into parametric coordinates on the unit circle if t is a value of both x and y. 
(x, y) = (cos t, sin t)

2D Perlin Noise
2D Perlin Noise
3D Perlin Noise
2D Bézier Curve with Perlin Noise

Here is a true 3D Bézier Curve with Perlin Noise!!!
bezier (x1,  y1,  z1,  x2,  y2,  z2,  x3,   y3  z3,  x4,  y4,  z4);

True 3D Bézier Curve Perlin Noise

For the most part I think implementing the idea of create shapes via