Brandon Hillard Projects Personal Experience About Me

Creating Sierpiński's Triangle



Sierpinski's triangle is a fascinating fractal shape that has captured the imagination of mathematicians and computer scientists alike for decades. It is named after the Polish mathematician Wacław Sierpiński, who first described the triangle in 1915.

The Sierpinski triangle is created by repeatedly subdividing an equilateral triangle into four smaller triangles, removing the central triangle, and then repeating the process on each of the remaining triangles. The result is an infinitely complex pattern that resembles a snowflake or a coral reef.

One of the most interesting aspects of the Sierpinski triangle is that it can be generated using a relatively simple set of rules. In fact, the code provided in this post is a JavaScript implementation of the Sierpinski triangle using the p5.js library. The code uses a recursive function to draw a series of smaller triangles within the main triangle, creating the illusion of an infinite loop that zooms in closer and closer to the shape.

The following JavaScript code generates an infinite-looking loop that constantly zooms in closer to a Sierpinski triangle:

var triLength = 462;
const centerCanvas = 200;
var recursionLimit = 7;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  centerDist = sqrt(80000);
  fill(0);
  strokeWeight(2);
}
                
function draw() {
  background(220);
  if(triLength < 923){
    triLength+=7; 
    }else{
      triLength = triLength/2;
  } 
  
  var p0 = {
    x: triLength/2,
    y: 400-(triLength * sqrt(3)/2)
  },
  p1 = {
    x: triLength,
    y: 400
  },
  p2 = {
    x: 0,
    y: 400
  }
  
  addTriangle(p0,p1,p2, recursionLimit);
}
                
function addTriangle(p0,p1,p2,limit){
  if(limit > 0){
    var p0p2 = {
      x:(p0.x + p2.x) / 2,
      y:(p0.y + p2.y) / 2
    },
    p0p1 = {
      x:(p0.x + p1.x) / 2,
      y:(p0.y + p1.y) / 2
    },
    p1p2 = {
      x:(p1.x + p2.x) / 2,
      y:(p1.y + p2.y) / 2
    }
    
    addTriangle(p0p2, p1p2, p2, limit - 1);
    addTriangle(p0p1, p1, p1p2, limit - 1);
    addTriangle(p0, p0p1, p0p2, limit - 1);

  }else{
    triangle(p0.x,p0.y,p1.x,p1.y,p2.x,p2.y);
  }
}

The `triLength` variable is the length of the sides of the largest equilateral triangle, which is initially set to 462 pixels. The `recursionLimit` variable is the number of levels of recursion in the Sierpinski triangle, set to 7.

In the `setup()` function, the canvas is created with a width and height of 400 pixels, the angle mode is set to degrees, and the stroke weight is set to 2. Additionally, the `fill() function sets the fill color to black.

The `draw()` function is repeatedly called, causing the triangle to zoom in closer and closer as `triLength` gets smaller.

If `triLength` is less than 923, it is incremented by 7 pixels. Otherwise, `triLength` is divided by 2. This causes the triangle to start out large and then shrink as the program runs.

The `addTriangle()` function is called with the three points of the largest triangle as arguments. This function recursively adds smaller triangles to create the Sierpinski triangle.

If the `limit` is greater than 0, the function creates three new points at the midpoint of each side of the triangle. The function then calls itself three times, each time with a different set of points to draw smaller triangles. If the `limit` is 0, the function draws a triangle using the three points passed to it.

The result is an interesting visual effect that creates the illusion of infinite depth. Thank you for reading about my quick implementation of the Sierpinski triangle!

The Sierpinski triangle has found applications in many different areas of science and technology, including computer graphics, chaos theory, and even in the design of antennas for wireless communication. Its simple yet elegant structure has inspired countless artists, mathematicians, and scientists, and continues to fascinate and intrigue people to this day.