blogs

Sierpinski Triangle and Sierpinski Carpet

Posted 03 November 2017

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

Leave a Reply

Your email address will not be published. Required fields are marked *