How to Create a Koch Curve Using JavaScript

  Programming

If you’ve had an opportunity to observe them closely, I’m sure you’d agree with me when I say that fractal patterns are incredibly fascinating and awe-inspiring. Even though they look so complex, writing programs to generate them takes very little time and effort. In this tutorial, I show you how to create one of the simplest fractals we know. It’s called a Koch curve. I’m not going to get in to its theory–the Wikipedia article covers all of it. Instead, I’m going to focus on creating it is using just JavaScript and the HTML5 canvas.

1. Create and Initialize an HTML5 Canvas

We’ll start from scratch. So, create a new HTML document using your favorite text-editor, and add the HTML5 boiler-plate code to it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Koch Curve</title>
</head>
<body>
    <!-- all code goes here -->
</body>
</html>

Inside the <body>, add a <canvas> whose width and height are 700px and 600px respectively. Feel free to use other dimensions, if you want to.

<canvas id="my_canvas" width="700" height="600"></canvas>

Next, create a <script> tag, and get a reference to the canvas using the getElementById() method of the document object.

<script>
var myCanvas = document.getElementById("my_canvas");
</script>

Finally, get a reference to the 2D context of the canvas, by calling its getContext() method.

var ctx = myCanvas.getContext("2d");

The canvas is now ready.

2. Generate a Thue-Morse Sequence

One of the easiest ways to generate a Koch Curve is to use a Thue-Morse sequence, which is just a sequence containing zeroes and ones. It starts with a 0 and the rest of the digits are determined using the following algorithm:

  • Step 1: Generate the complement of all the previous digits
  • Step 2: Append the complement to the sequence
  • Step 3: Go back to Step 1

The first few digits look like this: 01101001…

As you can see, with every iteration, the size of the sequence doubles. Therefore, you must try and keep the number of iterations low.

Here’s the code I’ll be using to generate the sequence.

function generateSequence() {
    var sequence = "0";
    for(var i=0; i < 20; i++) {
        var parts = sequence.split("");
        var complement = "";
        for(var j=0; j<parts.length; j++) {
            complement = complement + 
                      (parts[j] == "0" ? "1" : "0");
        }
        sequence += complement;
    }
    return sequence;
}

It’s not the most efficient approach, but it gets the job done and is quite intuitive. Note that we are running 20 iterations. Going beyond that number increases the run-time dramatically.

3. Generate the Koch Curve

We shall now use the Thue-Morse sequence to generate the Koch curve. Here’s how we will use the sequence:

  • Everytime we encounter a zero in the sequence, we draw a straight line of a fixed length
  • Everytime we encounter a one in the sequence, we rotate the canvas by 60 degrees.

As you might have guessed, the code to implement the above algorithm is going to be very simple and straight-forward.

To draw the straight line, we’ll use the lineTo() method of the context. And, to rotate the canvas, we’ll use the rotate() method. Additionally, we’ll also use the translate() method so that we always start the next line exactly where the previous line ended. Here’s the code:

function draw() {
  var sequence = generateSequence();
  var parts = sequence.split("");
  ctx.translate(0, myCanvas.height);
  ctx.beginPath();
  ctx.moveTo(0,0);
  for(var i = 0; i < parts.length; i++) {
    if(parts[i] == "0") {
        ctx.translate(0,0.1);
        ctx.lineTo(0,0.1);            
    } else {
        ctx.rotate(Math.PI/3);
    }
  }
  ctx.stroke();
}

draw();

If you open the page in a browser, you should be able to see the following graphic, which is a portion of the Koch curve:

Koch curve

Conclusion

Feel free to experiment with more iterations and different lengths for the line segments. However, you’ll see that the shape of the curve doesn’t really change much. That’s because it repeats itself infinitely, although it does converge to form something called a Koch Snowflake.

If you found this article useful, please share it with your friends and colleagues!