smoothNoise.js


The SmoothNoise script creates, as you expect, smooth random noise. There are many different ways to create noise and other patterns, the most known one is Perlin noise. Noise is mainly used to generate procedural textures and patterns, which ends up in a different result each time.
SmoothNoise will create a random path, based on values such as, frequency, subDivision, width, etc…. The script allows to create the following path segment on the fly, which really helps animate the path.

Create noise

These two example are provided by the script download. These are just a basic implementation of the smoothNoise script. They are easy to understand, even if they are not really clean or well commented.

Predefined demo

A smoothNoise curve made from predefined points. Can change values on the fly and is rendered with DOM objects.

Gyro_ballApp

Curve demo

A endless random smoothNoise curve. Animated and rendered with SVG elements.

The first step to create noise is to init a new smoothNoise object. There are multiple options to play with, just change them before you add a new slope. If there are no values provided, the script will use the basic values.
With the “noise.add()” function is it possible to add a single slope, starting from the “noise.lastPos” values. This function makes it possible to create endless smooth noise, by first updating the “noise.lastPos” values and then using the “noise.add()” function.


var noise = new smoothNoise(); //INIT NOISE

    //THESE ARE THE BASIC VALUES
    noise.frequency = 10; //BASE FREQUENCY
    noise.subDivision = 10; //SUBDIVISION
    noise.highLimit = 300; //UPPER LIMIT
    noise.lowLimit = 500; //LOWER LIMIT
    noise.lastPos = {x:0,y:0}; //START POSITION
    noise.points = []; //PRE DEFINED BASE POINTS
    noise.width = window.innerWidth; //WIDTH OF THE FULL CURVE

//WILL FILL THE FULL WIDTH
var fill = noise.fill(); //FILL WITH NOISE -> RETURNS ARRAY WITH EACH POINTS X AND Y POS

//WILL ADD ONE SLOPE. STARTS FROM noise.lastPos
var add = noise.add(); //ADD SLOPE -> RETURNS ARRAY WITH EACH POINTS X AND Y POS

for (var i = 0; i < fill.length; i++) //USE EACH COORDINATE 
{
  var x = fill[i].x
  var y = fill[i].y
};


Theory

The SmoothNoise script will first create, even distributed points within the width that is set for the noise. If there is no width set for the noise it will use the full window as width reference. It sets as many points as the noise frequency value is set. The points are in a range of the highLimit and lowLimit value of the noise. Keep in mind that the normal reference point is top-left(0,0).
The SmoothNoise script will not draw any of these points, it just returns the x and y position for each point. The script uses this values later on.


function randomNumber(min,max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
noise_frequency
(frequency = 10, full width)

Once these reference points are created, the script will calculate where the points in between are. Based on the subDivision factor,returns the script the position of the points between one and the next point. There are two basic ways, provided by the script, to calculate these in-between points. Either with Linear Interpolation or with Cosine Interpolation.


function Linear_Interpolate(a, b, x)
{
	return  a*(1-x) + b*x;
}

function Cosine_Interpolate(a, b, x)
{
	var ft = x * 3.1415927 //MATH PI
	var f = (1 - Math.cos(ft)) * .5

	return  a*(1-f) + b*f
}

Lastly, the script will return an array with all the positions, calculated by the script. There are “noise.frequency * noise.subDivision” values, each store one x and one y position.


var noise = new smoothNoise(); //INIT NOISE
    
    var fill = noise.fill(); //FILL WITH NOISE -> RETURNS ARRAY WITH EACH POINTS X AND Y POS
    for (var i = 0; i < fill.length; i++) //ADD A POINT FOR EACH COORDINATE
    {
      var x = fill[i].x;
      var y = fill[i].y;
    }
noise_subDivision_1

Conclusion

The smoothNoise script is really basic, don’t except any magically things. The script works good for it’s purposes, but could be really enhanced with additional work. We will see where this script will end, but i can see a few purposes for this script right now.
It’s even possible to create real perlin noise with this script. Just generate multiple noises and multiply the points correctly.