Coding Is Fun

Inverse Kinematics

2018-10-17T00:00:00+00:00

Inverse Kinematics is the practice of aligning a set of bones and joints to place their endpoint at a target position.

Inverse Kinematics has two common applications: animations in games and movies, and robotics.

We will be doing all of our calculations and examples in 2D but the formulas can easily be applied to three dimensions.

Let’s first create a way to define a collection of bones and joints:

class Armature{
    constructor(bones, joints, root){
        this.bones = bones;
        this.joints = joints;
        this.root = root;
    }
}

class Bone{
    constructor(length){
        this.length = length;
        this.endpoint = {x: 0, y: 0}; 
    } 
}

class Joint{
    constructor(){
        this.angle = 0;
    }
}

Before exploring inverse kinematics, we should first explain it’s inverse, forward kinematics.

Forward kinematics is the calculation of an endpoint given the angles of joints and the lengths of bones. Given a list of bone endpoints, $P$, bone lengths, $L$, and a list of joint angles, $A$, the endpoint of a bone can be calculated as:

\[P_i = P_{i-1} + L_icos(\sum_{j=0}^i A_j){\hat{\textbf{i}}} + L_isin(\sum_{j=0}^i A_j){\hat{\textbf{j}}}\]

Admittedly, this formula is a bit messy, so lets break it down a bit.

The first value, $P_{i-1}$, represents the endpoint of the bone to which this bone is attached. It makes sense that we need to first calculate this value, as the position of an endpoint is simply the previous endpoint plus the offset of the bone. The recursive nature of this formula means that whenever the length of a bone or angle of a joint is changed, all of the bone positions following the changed feature must be recalculated.

The second part of the formula multiplies the length of the bone times the sine and cosine of the summation of the angles leading up to the calculated endpoint. Note that we cannot simply use the angle of the most recent joint, as it is the angle relative to the most recent bone. By summating the leading angles, we can find the global rotation of the bone.

Lets create a function for calculating the positions of bones in an armature. This function should be called whenever the length of a bone or angle of a joint is changed. To make sure of this, we will also be creating functions for changing values pertaining to the bones and joints. Adjusting this values through direct access to the bones and joints arrays will not cause the endpoints of the bones to be adjusted and therefore should not be done from outside the class (unfortunately javascript does not supoort private instance variables).

class Armature{
    constructor(bones, joints, root){
        this.bones = bones;
        this.joints = joints;
        this.root = root;
    }

    adjustBoneLength(boneIndex, newValue){
        this.bones[boneIndex].length = newValue;
        this.recalculateEndpoints();
    }

    adjustJointAngle(angleIndex, newValue){
        this.joints[angleIndex] = newValue;
        this.recalculateEndpoints();
    }

    recalculateEndpoints(){
        var lastPosition = {x: this.root.x, y: this.root.y};
        var lastAngle = 0;
        for(var i = 0; i < this.bones.length; i++){
            this.bones[i].endpoint.x = lastPosition.x + 
                this.bones[i].length * Math.cos(lastAngle + this.joints[i].angle);

            this.bones[i].endpoint.y = lastPosition.y + 
                this.bones[i].length * Math.sin(lastAngle + this.joints[i].angle);

            lastAngle += this.joints[i].angle;
            lastPosition.x = this.bones[i].endpoint.x;
            lastPosition.y = this.bones[i].endpoint.y;
        }
    }

}

Now using some simple controls, try to get the end of the armature into the target circle.

First Angle:

Second Angle:

Third Angle:

Not too hard right? But how would you tell a computer to do that?

It would be easy if we only had a couple of joints, we could use some simple trigonometry.

Given the above armature with endpoint E, the two joint angles are fairly trivial (though rather messy) to compute using the law of sine and law of cosine:

\[\theta_2 = 180 - cos^{-1}\frac{E_x^2 + E_y^2 - A^2 - B^2}{2AB}\] \[\theta_1 = tan^{-1}\frac{E_y}{E_x} - tan^{-1}\frac{Bsin{\theta_2}}{A + Bcos{\theta_2}}\]

I will spare you the algebra, but if you are curious this video works out the solutions.

However, as we continue to add more joints, it becomes harder to find an analytical solution. More importantly, whenever the number of degrees of freedom of the armature becomes unequal to the number of joints it becomes impossible to algebriacally find a solution (This will happen as soon as we bring our armature into three dimensions). This is where the multiple methods of inverse kinematics come into play.

In this article, I will be explaining the method known as cyclic coordinate descent (CCD). There are other strategies such as the jacobian inverse method, that I may explore in later posts.

In CCD, each joint of the armature is iterated, and brought to an angle that brings the endpoint of the armature closer to the target position. This iteration is repeated until the distance between the endpoint and the target position falls below a specified threshold.

The amount the angle of a joint should be changed will be the angle between the vector pointing from the position of the joint to the end of the armature, $\vec e$, and the vector between the position of the joint to the target position, $\vec t$. The formula to find this angle, $a$, can be calculated as:

\[a = \frac{cos^{-1}(\vec t \cdot \vec e)}{\lvert e\rvert \lvert t\rvert}\]

This is simply the inverse cosine of the dot product of the two vectors, divided by the product of the magnitudes of the two vectors. This formula relies on a property of a dot product (the summation of the products of the corresponding dimensional values of a vector) which states that:

\[\lvert a\rvert \lvert b\rvert cos(\theta) = \vec a \cdot \vec b\]

With this formula is mind it is rather simple to create our inverse kinematics functionality.

class Armature{
    // ...

    applyInverseKinematics(targetPosition){
        while(distance(this.bones[this.bones.length - 1].endpoint, targetPosition) > 1){
            this.approachTarget(targetPosition);
        }
    }

    approachTarget(targetPosition){
        for(var i = this.joints.length - 1; i >= 0; i--){
            // e
            var jointToEndpoint = {
                x: this.bones[this.bones.length - 1].endpoint.x - this.bones[i].endpoint.x,
                y: this.bones[this.bones.length - 1].endpoint.y - this.bones[i].endpoint.y
            }

            // t
            var jointToTarget = {
                x: targetPosition.x - this.bones[i].endpoint.x,
                y: targetPosition.y - this.bones[i].endpoint.y
            }

            // e * t
            var dotProduct = jointToEndpoint.x * jointToTarget.x +
                jointToEndpoint.y * jointToTarget.y;

            // |e||t|    *note that mag is a function defined elsewhere
            var magnitudesProduct = mag(e) * mag(t);

            // arccos(e * t)/(|e||t|)
            this.joints[i].angle = Math.acos(dotProduct) / magnitudesProduct;

            this.recalculateEndpoints();
        }
    }
}

Test out the following example that has the arm follow the mouse! Use the sliders to change the lengths of different bones.

First Bone:

Second Bone:

Third Bone:

Fourth Bone:

With our IK system set up, we can continue to add features to create interesting behavior.

First lets add some contraints to our joints, such as a minimum and maximum angle.

class Joint{
    constructor(minAngle, maxAngle){
        this.angle = 0;
        this.minAngle = minAngle;
        this.maxAngle = maxAngle;
    }
    set Angle(newAngle){
        if(newAngle > this.maxAngle){
            this.angle = this.maxAngle
        }
        else if(newAngle < this.minAngle){
            this.angle = this.minAngle;
        }
        else{
            this.angle = newAngle;
        }
    }

    get Angle{
        return this.angle;
    }
}

Now all we have to do is replace all of our references to “angle” in the armature class with our new property “Angle” (note the change in case).

In the following example, I’ve contrained the range of motion of all of the joints to 45 degrees, note the change in behavior from our previous example.

This armature behaves far more organically, resembling the behavoir of a tentacle. As you may have noticed, while playing with the above example, it is possible to make the armature lock in place, unable to approach the target. To replicate this flaw, bring your mouse to the upper right hand corner of the display, then try to form the armature into an S shape. After doing so, bring your mouse towards the bottom left hand corner of the display. This should “lock” the armature, causing it to fail to meet a target it could otherwise reach. This behavior is a shortcoming of the CCD algorithm that is solved in some of the other IK implementations.

I hope you enjoyed this article, and that you’ve learned something new! Feel free to leave any questions or comments below.

Flocking

2018-08-16T00:00:00+00:00

Have you ever watched a school of fish, a flock of birds, or even a crowd of people and watched how they move?

Moving together, yet without a leader, they are exhibiting a behavior known as flocking.

Programmer Craig Reynolds defined this behavior according to three rules:

Separation - Members will steer to maintain a defined distance from one another
Alignment - Members will steer to face in a similar direction as members around them
Cohesion - Members will steer to remain close to the flock

We can create flocking behavior in code by using these same rules.

First we need a way to represent a single member of the flock. These are called boids. Boids will have a position, velocity and acceleration. During every frame of the simulation, they will use their acceleration and velocity values to update their position.

//  Defining the model for a boid
class Boid{

    // They will be initialized with a starting x and y position
    constructor(xPos, yPos){
        //  The mass of the boid will dictate how responsive it is to flocking forces
        this.mass = 1;
        this.position = {x: xPos, y: yPos};
        this.velocity = {x: 0, y: 0};
        this.acceleration = {x: 0, y: 0};
    }

    //  Heading is represented by a decimal value indicating the radians
    get heading{
        return Math.atan2(this.velocity.x, this.velocity.y);
    }

    //  This function will be called to guide the boid while flocking
    applyForce(force){
        //  Acceleration is force devided by mass
        this.acceleration.x += force.x / this.mass;
        this.acceleration.y += force.y / this.mass;
    }

    update(){
        //  We will later add code to change the velocity of the boid given its suroundings
        updatePosition();
    }

    updatePosition(){
        //  Acceleration is change in velocity
        this.velocity.x += this.acceleration.x;
        this.velocity.y += this.acceleration.y;

        //  Veloity is change in position
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;

        //  Acceleration is reset each frame
        this.acceleration = {x: 0, y: 0};
    }
}

Next, lets create a model for an entire flock.

// Defining the model for a flock
class Flock{
    constructor(flockSize){
        this.boids = [];
        this.size = flockSize;
        this.populateFlock();
    }

    populateFlock(){
        for(var n = 0; n < this.size; n++){

            //  The boids will be created at the center of the graph.
            this.boids.push(new Boid(0,0));

            //  The angle of the boids are evenly distributed in a circle
            var angle = (n / this.size) * 2 * Math.PI;

            //  The velocity is set based on the calculated angle
            this.boids[n].velocity = {x: Math.cos(angle), y: Math.sin(angle)};
        }
    }

    updateFlock(){
        for(var i = 0; i < this.size; i++){
            this.boids[i].update();
        }
    }
}

And finally, we can create a function to render our flock. I have created a few functions such as “drawTriangle” that are irrelevent to the flocking algorithm and therefore not included in this article.

function renderFlock(flock){
    for(var i = 0; i < flock.size; i++){
        renderBoid(flock.boids[i]);
    }
}

function renderBoid(boid){
    //  The drawTriangle function takes a position and a rotation as parameters
    drawTriangle(boid.position.x, boid.position.y, boid.heading);
}

Alright, now lets test our flock update

var flock = new Flock(10);

function loop(){
    // The loop will run every 10 milliseconds
    setTimeout(loop, 10);
    flock.update();
    renderFlock(flock);
}

Wait! All of the boids are gone as soon as they leave the canvas, I’ll add a bit of code to make the sides of the screen wrap to one another. If a boid leaves on the left side of the canvas it will reappear on the right side.

Now that we have our flock management and rendering code set up, we can start applying our three rules of flocking.

However, in order to do this, our boids need to have information of other boids nearby. We need to change the boid update function to take an array of neighboring boids as a parameter. We also need to allow our updateFlock function to provide each boid update with its neighbors.

class Flock{
    constructor(flockSize){
        // ...
        
        //  The proximity boids have to be, to be considered neighbors.
        this.neighborDistance = 10;

        //  The neighborDistanceSquared is compared to the square distance between neighbors.
        //  This avoids the performance costly square root operation.
        this.neighborDistanceSquared = Math.pow(this.neighborDistance, 2);
    }

    // ...

    updateFlock(){
        for(var i = 0; i < this.size; i++){
            var neighbors = [];
            //  Iterates through all other boids to find neighbors.
            for(var j = 0; j < this.size; j++){
                if(j != i){
                    var squareDistance = Math.pow(this.boids[j].position.x - this.boids[i].position.x, 2) 
                        + Math.pow(this.boids[j].position.y - this.boids[i].position.y, 2);
                     
                    if(squareDistance < this.neighborDistanceSquared){
                        neighbors.push(this.boids[j]);
                    }
                }
            }
            this.boids[i].update(neighbors);
        }
    }
}

Separation

Finally we can begin with applying separation to our boids. This force is calculated as a sum of vectors pointing away from nearby boids.

class Boid{

    constructor(xPos, yPos){
        //  ...
        //  We define an ideal distance for our boids to keep from one another
        this.separationDistance = 5;

        //  The strength with which the boid will avoid others
        this.separationStrength = 1;
    }

    //  ...

    update(neighbors){
        var separationForce = calculateSeparation(neighbors);
        this.applyForce(separationForce);
        updatePosition()
    }

    calculateSeparation(neighbors){
        //  This vector is the force we want to apply to our boid to keep it away from neighbors
        var separationForce = {x: 0, y: 0}

        for(var i = 0; i < neighbors.length; i++){
            //  Distance = sqrt((x1 - x2)^2 + (y1 - y2)^2)
            var distance = distance(this.position.x - neighbors[i].position.x,
                                    this.position.y - neighbors[i].position.y);
            if(distance < this.separationDistance){
                //  The offset between the two boids
                var offset = {
                    x: this.position.x - neighbors[i].position.x,
                    y: this.position.y - neighbors[i].position.y,
                }

                //  Note the use of a normalize function,
                //  It scales the vector so that its magnitude is 1.
                //  This value is used to indicate direction rather than distance.
                //  This function is not included in javascript so I had to implement it myself.
                var normalizedOffset = normalize(offset)

                //  The normalized offset is divided by the distance between the boids.
                //  A further boid requires less force to avoid
                var force = {x:normalizedOffset.x /= distance, y:normalizedOffset.y /= distance};

                //  The calculated force is added to the total separation force
                separationForce.x += force.x;
                separationForce.y += force.y
            }
        }

        return separationForce;
    }
    //  ...
}

Separation Strength

Separation Distance

As you watch how the boids avoid one another, try playing with the avoidance strength and seperation distance values. Note that the seperation distance cannot be greater than the neighbor distance value.

Cohesion

Next, we will implement cohesion, forcing boids toward the average position of all of its neighbors. Cohesion is essentially the opposite of separation. If boids are too close they will repel one another, if they are too far, they will atract one another. These two forces will work together to maintain a specified distance between boids.

class Boid{
    //  ...

    calculateCohesion(neighbors){
        
        //  This is the average position of all neighbors
        var averagePosition = {x: 0, y: 0};
         
        //  Tracks the number of boids within the cohesion distance
        var count = 0;
        
        for(var i = 0; i < neighbors.length; i++){
            var distance = distance(this.position.x - neighbors[i].position.x,
                                    this.position.y - neighbors[i].position.y);
            if(distance < this.cohesionDistance){
                averagePosition.x += neighbors[i].position.x;
                averagePosition.y += neighbors[i].position.y;
                count++;
            }
        }

        averagePosition /= count;

        var displacement = {x: averagePosition.x - this.position.x,
                            y: averagePosition.y - this.position.y};

        //  This vector is the force we want to apply to our boid to keep it away from neighbors
        var cohesionForce = {x: displacement.x * this.cohesionStrength, 
                             y: displacement.y * this.cohesionStrength};

        return cohesionForce
    }
}

Cohesion Strength

Cohesion Distance

Note how the boids stick near one another. However these boids now resemble clumps rather than a flock. By combining separation and cohesion, we can create much more realistic behavior.

Separation Strength

Separation Distance

Cohesion Strength

Cohesion Distance

Heading

Last but not least, we need to implement “heading”. This final rule forces boids in a similar direction that their neighbors are travelling.

class Boid{
 
    //  ...

    calculateAlignment(neighbors){
        //  This is the average velocity of all neighbors
        var averageVelocity = {x: 0, y: 0};
         
        //  Tracks the number of boids within the cohesion distance
        var count = 0;
        
        for(var i = 0; i < neighbors.length; i++){
            var distance = distance(this.position.x - neighbors[i].position.x, 
                                    this.position.y - neighbors[i].position.y);

            if(distance < this.alignmentDistance){
                averageVelocity.x += neighbors[i].velocity.x;
                averageVelocity.y += neighbors[i].velocity.y;
                count++;
            }
        }

        //  Average = sum/count
        averageVelocity /= count;

        var alignmentForce = {x: averageVelocity.x * this.alignmentStrength, 
                              y: averageVelocity.y * this.alignmentStrength};

        return alignmentForce
    }
} 

Separation Strength

Separation Distance

Cohesion Strength

Cohesion Distance

Alignment Strength

Alignment Distance

When combined, these three simple rules have created complex emergent behavior. I hope you’ve enjoyed reading about flocking and that you’ve learned something new! Please provide any feedback or suggestions in the comments.

Let’s Make Some Noise

2018-08-05T00:00:00+00:00

Today I want to make some noise functions.

These functions will all follow two rules:

They will take a positional parameter and will return a value between 0 and 1.
The same parameter will always return the same output.

First we need a way to visualize these functions. Noise functions are often visualized as greyscale images because they are a concise way of visualizing the relationship between the input, the coordinants of the pixel, and the output, the darkness of the pixel. I will be writing all code in javascript so that I can easily provide interactive examples, but the priciples can be carried over into the programming language of your choice. Our visualizer will be an html5 canvas, we will be using the function below to pass in an array of values between 0 and 1, and populate the pixels of the canvas with their respective values.

// Aquire the data of the canvas, so that we can assign to it in our UpdateCanvas function
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;

// pixels should be an array of arrays with a length of 3 (For the three color channels)
function UpdateCanvas(pixels){
    for (var y = 0; y < canvas.height; y++) {
        for (var x = 0; x < canvas.width; x++) {
            var index = (y * canvas.width + x) * 4;
            for(var channel = 0; channel < 4; channel++){
                data[index + channel]  = pixels[index/4][channel];
            }
        }
    }
    context.putImageData(imageData, 0, 0);
}

function ValueToPixel(value){
    // red, green, blue, alpha
    return [value*255, value*255, value*255, 255];
}

Lets test our Update Canvas Method by inputting an array of values set by a sider.

// The slider provides a value between 500 and 990
var valueSlider = document.getElementById('ConstantValueSlider');
function loop(){
    // An array of values between 0 and 1
    values = []
    for (var y = 0; y < canvas.height; y++) {
        for (var x = 0; x < canvas.width; x++) {
            // valueSlider will give a value between 0 and 100
            values[x + y * canvas.width] = valueSlider.value / 100.0;
        }
    }

    // Converts the array to pixel values with red, green, blue, and alpha channels
    valuesAsPixels = values.map(x => ValueToPixel(x));

    UpdateCanvas(valuesAsPixels);
}

Value:

The easiest noise function to create will be a white noise function. White noise is a series of unrelated values within a defined variance. In other words, two different inputs, no matter how close they are, will produce randomly different outputs. Our defined variance will be 0 and 1.

It might be tempting to create a function like the following to generate white noise:

function WhiteNoise(width, height){
    var values = [];
    var length = width * height;

    // Assign each indicie in the array a random value between 0.0 and 1.0
    for(var i = 0; i < length; i++){
        values[i] = Math.Random();
    }

    return values;
}

While this code does indeed produce white noise, it breaks the second rule I defined at the beginning of the article. Watch below as we run the function repeatedly:

// The slider provides a value between 500 and 990
var FrequencySlider = document.getElementById('DynamicStaticUpdateFrequency');
function loop(){
    whiteNoiseValues = WhiteNoise(canvas.width, canvas.height);
    // Converts the array to pixel values with red, green, blue, and alpha channels
    var valuesAsPixels = whiteNoiseValues.map(x => ValueToPixel(x));
    UpdateCanvas(valuesAsPixels);
    
    // The display is refreshed every 1000 minus the value of the frequency slider milliseconds
    setTimeout(loop, 1000 - FrequencySlider.value);
}

Update Frequency:

Everytime we run this function, we get different results. This is because of how random number generators work. Random number generation is far beyond the scope of this post, but it is important to note that random number generators have an internal state. The internal state is manipulated during each call to the random number generator and is then used in subsequent generations. For our purposes, we would like to create a random number function that is free of an internal state, and instead takes an x and a y value as its “state”. I adapted a simple hash function from a stack overflow post to suit my needs. Note the use of a seed. Changing this seed will change the output of the function and will allow for different generations given the same coordinants.

seed = 0
// This function will return a "random" number given two coords
function randomFromCoords(x, y){
    var h = seed + x*374761393 + y*668265263; // all constants are prime
    h = (h^(h >> 13))*1274126177;

    // The hash calculates a value between 0 and 2147483647 (The maximum value of a 32 bit integer).
    // This value is then divided by 2147483647 so that we can return a value between 0 and 1.
    return (h^(h >> 16)) / 2147483647.0;
}

Using this function we can revise our white noise to produce the following <!–

function WhiteNoise2(width, height){
    var values = [];
    seed = 20;
    for (var y = 0; y < height; ++y) {
        for (var x = 0; x < width; ++x) {
                values[x + y * width] = randomFromCoords(x,y);
        }
    }
    return values;
}

And by tweaking our original update loop to use our new function we produce the following

// The slider provides a value between 500 and 990
var FrequencySlider = document.getElementById('StaticWhiteNoiseLoopDisplayCanvas');
function loop(){
    whiteNoiseValues = WhiteNoise2(canvas.width, canvas.height);
    // Converts the array to pixel values with red, green, blue, and alpha channels
    var valuesAsPixels = whiteNoiseValues.map(x => ValueToPixel(x));
    UpdateCanvas(valuesAsPixels);
    
    // The display is refreshed every 1000 minus the value of the frequency slider milliseconds
    setTimeout(loop, 1000 - FrequencySlider.value);
}

–>

Update Frequency:

Viola! Our first noise function.

Now, before we move on to our next function, I would quickly like to show you how to scale our noise function, as this will come into play later as we built more complex functions.

As of now, our noise function operates at a 1:1 scale between pixels and samples. However, we can change this so that we can “zoom” in on our noise function, giving us a closer look at the generated values. We only need to modify our code slightly to allow for the user to change the scale of the noise.

function WhiteNoise(width, height, scale){
    var values = [];
    seed = 20;
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
                // The x and the y values are divided by the scale, then floored.
                // This is equivalent of integer division.
                scaledX = Math.floor(x / scale);
                scaledY = Math.floor(y / scale);
                // Note the usage of randomFroomCoords over Math.random
                values[x + y * width] = randomFromCoords(scaledX,scaledY);
        }
    }
    return values;
}

Scale:

However, unless we are generating a texture for a static television, we don’t have much use for white noise.

What is more useful is coherent noise. Coherent noise is defined as noise that will exhibit a small change given a small change in input, and will exhibit a random change given a big change in input. For example, if we provided our noise function with the value “3” it might return a value like “.3” and if we provided “3.1” it might return “.29”. In other words, it is safe to assume that if two input values are close, their corresponding output values will be close. This allows for us to make textures resembling things like clouds, fire, or what I find most interesting: heightmaps.

Our first coherent noise function will be perlin noise.

Perlin noise (as pictured above) consists of many sub-gradients. These sub-gradients are represented by a grid of vectors (as pictured below).

In perlin noise, the field is divided into a grid. Each grid cell has a vector at each corner that defines a gradient. When a point is sampled, its respective grid cell is calculated. Next for each corner of the cell, the dot product of the vector from the corner to the point and the corner’s gradient vector is calculated. The average of these four values is the value of the point.

First we need a way to determine gradient vectors for each subdivision of the field. Let’s create a table of 8 vectors, representing the 8 cardinal and intercardinal directions.

var vectors = [[1,0],[1,1],[0,1],[-1,1],[-1,0],[-1,-1],[1,-1]]

Next, lets create a function to determine the cell of the sampled point. We will use a parameter, scale, to indicate the size of the cell.

function pointToCell(x, y){
    cellX = Math.floor(x);
    cellY = Math.floor(y);
    return {x:cellX, y:cellY};
}

We also need a way to determine the four gradient vectors of the cell. For this we’ll need to generate a random number given an input coordinant. You might now ask “Isn’t that exactly what our white noise function did?” To which I would respond, “Yes.” So lets use our “randomFromCoords” function to generate vectors for our grid cell.

function cellToVectors(cellX, cellY){
    halfCell = .5;
    // I use the four intercardinal directions to label the vectors.
    // The random values are multiplied by 8 to map them to the 8 entries of the vectors array.
    NEvector = vectors[Math.floor(randomFromCoords(cellX + halfCell, cellY + halfCell))*8];
    SEvector = vectors[Math.floor(randomFromCoords(cellX + halfCell, cellY - halfCell))*8];
    SWvector = vectors[Math.floor(randomFromCoords(cellX - halfCell, cellY - halfCell))*8];
    NWvector = vectors[Math.floor(randomFromCoords(cellX - halfCell, cellY + halfCell))*8];
    return {NE: NEvector, SE: SEvector, SW: SWvector, NW: NWvector};
}

For our next step, a dot product calculation, we need to first create a dot product funtion. The dot product of two vectors is the magnitude of each vector multiplied by the cosine of the angle between the vectors. When the two vectors are pointed in oposite directions, the dot product will be zero.

// each vector is assumed to have an x and a y property
function dotProduct(vector1, vector2){
    // Another way to calculate the dot product. This is more performance friendly than cosine calculations.
    return vector1.x * vector2.x + vector1.y * vector2.y;
}

And last but not least, we a function to determine a weighted average between values. This will be used when averaging between the four dot products. The method we are using is known as linear interpolation.

// linear interpolation, "lerp" for short.
function lerp(value1, value2, t){
    return (1 - t) * value1 + t * value2;
}

Now we can create our perlin noise function!

function perlin(x, y){
    var cellCoord = pointToCell(x, y);

    // Get the positions of the x and y coordinants relative to the cell
    var Xoffset = x - cellCoord.x;
    var Yoffset = y - cellCoord.y;

    var vectors = cellToVectors(cellCoord.x, cellCoord.y);

    // The offset from each corner is calculated.
    // Then the dotproduct between the offset vector and the random vector is calculated.
    var NEoffset = {x: Xoffset - 1, y: Yoffset - 1};
    var NEdotProduct = dotProduct(NEoffset, vectors.NE);

    var SEoffset = {x: Xoffset - 1, y: Yoffset};
    var SEdotProduct = dotProduct(SEoffset, vectors.SE);
    
    var SWoffset = {x: Xoffset, y: Yoffset};
    var SWdotProduct = dotProduct(SWoffset, vectors.SW);

    var NWoffset = {x: Xoffset, y: Yoffset - 1};
    var NWdotProduct = dotProduct(NWoffset, vectors.NW);

    var Nlerp = lerp(NWdotProduct, NEdotProduct, Xoffset);

    var Slerp = lerp(SWdotProduct, SEdotProduct, Xoffset);

    var finalValue = lerp(Slerp, Nlerp, Yoffset);

    return finalValue;
}

And by plugging this function back in to our value generator,

function perlinNoise(width, height){
    var values = [];
    seed = 20;
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            // The number x and y are divided by is the size of the cell
            values[x + y * width] = perlin(x/30,y/30);
        }
    }
    return values;
}

We create the following:

Wait, that doesn’t look like the picture! There’s actually one last function we need to add to our perlin noise generation. As of now, the four corresponding dot products of a point are interpolated between linearly, however, this does not create a smooth transition between squares. Instead we want to interpolate using a quartic function devised by Ken Perlin himself (shown below).

\[6t^5 - 15t^4 + 10t^3\]

In code we write this as:

fade: function(t){
    return t * t * t * (t * (t * 6 - 15) + 10);
}

So now if we change our calls to lerp to now apply the fade functions to the offsets,

function perlin(x, y){
    // ...

    var Nlerp = this.lerp(NWdotProduct, NEdotProduct, fade(Xoffset));

    var Slerp = this.lerp(SWdotProduct, SEdotProduct, fade(Xoffset));

    var finalValue = this.lerp(Slerp, Nlerp, fade(Yoffset));

    // ...
}

We produce the following:

We did it! Now, before we wrap up, let’s add a couple more features to our noise generator.

First, let’s implement scaling functionality, like we did with our white noise. By changing the constant that our x and y values are divided by, we can change the scale of the perlin noise.

function perlinNoise(width, height, scale){
    var values = [];
    seed = 20;
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            // The number x and y are divided by the scale parameter
            values[x + y * width] = perlin(x/scale,y/scale);
        }
    }
    return values;
}

Scale:

Now that we have a method of scaling our noise, we can layer multiple noise functions on top of each other to create something known as fractal noise (pictured below).

Fractal noise is created by adding together multiple noise functions. Typically, each added noise will have a greater frequency and smaller amplitude. In other words, the first function will define the general layout of the output, but the later functions will dictate the details.

Fractal noise is generated with two parameters, the number of octaves, and the persistence. The number of octaves is simply the number of noise functions used in creating the final output. The persistence is a value that dictates the rate at which the amplitude of successive noise iterations decreases.

\[A = p^n\]

The amplitude is equal to the persistence, a number between 0 and 1, raised to the number of the current iteration. Frequency is often set to equal $2^n$.

With these formulae in mind, we can construct our fractal noise function.

function fractalNoise(width, height, scale, octaves, persistence){
    var values = [];
    seed = 20;
    for (var y = 0; y < height; ++y) {
        for (var x = 0; x < width; ++x) {
            var value = 0;
            // For each octave... 
            for(var n = 0; n < octaves; n++){
                // A = p^n
                var amplitude = Math.pow(persistence, n);
                
                // F = 2^n
                var frequency = Math.pow(2, n);

                // Add each noise value to the total value of that pixel
                value += perlin((x/scale) * frequency, (y/scale) * frequency) * amplitude;
            }
            values[x + y * width] = value;
        }
    }
    return values;
}

Scale:

Octaves:

Persistence:

Note that sampling a point in fractal noise takes $O(n)$ time where n is the number of octaves. Increasing the number of octaves will decrease the performance of the noise function.

Thats all for today, I hope you had fun and maybe learned a thing or two about generating noise with code. If you have any comments, corrections, or suggestions for articles in the future please leave them in the comment section below.