Sierpinski Triangle

Another fractal that exhibits the property of self-similarity is the Sierpinski triangle. An example is shown in below picture . The Sierpinski triangle illustrates a three-way recursive algorithm. The procedure for drawing a Sierpinski triangle by hand is simple. Start with a single large triangle. Divide this large triangle into four new triangles by connecting the midpoint of each side. Ignoring the middle triangle that you just created, apply the same procedure to each of the three corner triangles. Each time you create a new set of triangles, you recursively apply this procedure to the three smaller corner triangles. You can continue to apply this procedure indefinitely if you have a sharp enough pencil. Before you continue reading, you may want to try drawing the Sierpinski triangle yourself, using the method described.

When you change the depth shape will change like below

function drawLine(ctx, top_point, left_point, right_point) {

    ctx.beginPath();
    ctx.fillStyle = "red";

    ctx.moveTo(top_point.x, top_point.y);
    ctx.lineTo(left_point.x, left_point.y);
    ctx.lineTo(right_point.x, right_point.y);
    ctx.fill();
}

function sierpinksiTriangle(level, ctx, top_point, left_point, right_point) {

    if (level === 0) {

        drawLine(ctx, top_point, left_point, right_point);

    } else {


        var leftMid = {};
        var rightMid = {};
        var bottomMid = {};

        leftMid.x = (top_point.x + left_point.x) / 2;
        leftMid.y = (top_point.y + left_point.y) / 2;

        rightMid.x = (top_point.x + right_point.x) / 2;
        rightMid.y = (top_point.y + right_point.y) / 2;


        bottomMid.x = (left_point.x + right_point.x) / 2;
        bottomMid.y = (left_point.y + right_point.y) / 2;

        sierpinksiTriangle(level - 1, ctx, top_point, leftMid, rightMid);
        sierpinksiTriangle(level - 1, ctx, rightMid, right_point, bottomMid);
        sierpinksiTriangle(level - 1, ctx, leftMid, left_point, bottomMid);


    }

}

Now invoke the Function

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var topPoint = {};
var leftPoint = {};
var rightPoint = {};
var depth = 6;

topPoint.x = 200;
topPoint.y = 10;

leftPoint.x = 10;
leftPoint.y = 200;

rightPoint.x = 400;
rightPoint.y = 200;


sierpinksiTriangle(depth, ctx, topPoint, leftPoint, rightPoint);

Sierpinski carpet

The Sierpinski carpet is the fractal illustrated below which may be constructed analogously to the Sierpinski sieve, but using squares instead of triangles.

function drawRect(ctx, x, y, width, height) {
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, width, height);
    ctx.fill();
}

function sCarpet(level, ctx, x, y, width, height) {
    if (level === 0) {
        drawRect(ctx, x, y, width, height);
    } else {

        width = width / 3;
        height = height / 3;

        sCarpet(level - 1, ctx, x, y, width, height);
        sCarpet(level - 1, ctx, x + width, y, width, height);
        sCarpet(level - 1, ctx, x + width * 2, y, width, height);

        sCarpet(level - 1, ctx, x, y + height, width, height);
        sCarpet(level - 1, ctx, x, y + height * 2, width, height);

        sCarpet(level - 1, ctx, x + width, y + height * 2, width, height);

        sCarpet(level - 1, ctx, x + width * 2, y + height, width, height);
        sCarpet(level - 1, ctx, x + width * 2, y + height * 2, width, height);


    }
}

Now invoke the function

var c = document.getElementById("canvas2");
var ctx = c.getContext("2d");
var height = 500;
var width = 500;
var x = 0;
var y = 0;
var depth = 3;
sCarpet(depth, ctx, x, y, width, height);

Change the depth to see different shapes  through iteration

The Koch Snowflake was created by the Swedish mathematician Niels Fabian Helge von Koch. he used the Koch Snowflake to show that it is possible to have figures that are continuous everywhere but differentiable nowhere.

The Koch Curve

In order to create the Koch Snowflake, von Koch began with the development of the Koch Curve. The Koch Curve starts with a straight line that is divided up into three equal parts. Using the middle segment as a base, an equilateral triangle is created. Finally, the base of the triangle is removed, leaving us with the first iteration of the Koch Curve.

And Lets Implement with JavaScript and canvas

function drawLine(ctx, x1, y1, x2, y2, color) {

    ctx.fillStyle = "#000";
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.closePath();
}

function kochCurve(level, ctx, x1, y1, lenght, angle, color) {

    if (level === 0) {

        var x2 = x1 + lenght * Math.cos(angle);
        var y2 = y1 + lenght * Math.sin(angle);
        drawLine(ctx, x1, y1, x2, y2, color);

    } else {

        var x2 = x1 + lenght / 3 * Math.cos(angle);
        var y2 = y1 + lenght / 3 * Math.sin(angle);

        var theta1 = angle - Math.PI / 3;
        var theta2 = angle + Math.PI / 3;

        var x3 = x2 + lenght / 3 * Math.cos(theta1);
        var y3 = y2 + lenght / 3 * Math.sin(theta1);

        var x4 = x1 + lenght * 2 / 3 * Math.cos(angle);
        var y4 = y1 + lenght * 2 / 3 * Math.sin(angle);

        kochCurve(level - 1, ctx, x1, y1, lenght / 3, angle, 'red');
        kochCurve(level - 1, ctx, x2, y2, lenght / 3, theta1, 'blue');
        kochCurve(level - 1, ctx, x3, y3, lenght / 3, theta2, 'yellow');
        kochCurve(level - 1, ctx, x4, y4, lenght / 3, angle, 'brown');

    }

}

Invoke kochCurve function

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var x1 = 20; 
var y1 = 200;
var length = 300;
var angle = 0;
var depth = 3;

kochCurve(depth, ctx, x1, y1, length, angle, 'black');

When you Invoke with different depth you will see one of the below shape

The Koch Snowflake

From the Koch Curve, comes the Koch Snowflake. Instead of one line, the snowflake begins with an equilateral triangle. The steps in creating the Koch Curve are then repeatedly applied to each side of the equilateral triangle, creating a “snowflake” shape.

To Implement Just  write kochCurve  function two time with 60 degree angle

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var x1 = 20;
var y1 = 200;
var length = 300;
var angle = 0;
var depth = 3;

var x2 = x1 + length;

var x3 = x1 + length * Math.cos(Math.PI / 3);
var y3 = y1 + length * Math.sin(Math.PI / 3);

kochCurve(depth, ctx, x1, y1, length, angle, 'black');
kochCurve(depth, ctx, x2, y1, length, Math.PI * 2 / 3, 'black');
kochCurve(depth, ctx, x3, y3, length, -Math.PI * 2 / 3, 'black');when

When you Invoke with different depth you will see one of the below shape