A mathematical topic that has always fascinated me is Chaos Theory. At a foundational level, Chaos Theory states that even the most random of systems have underlying laws and patterns that can create ordered outcomes. In other words, order can be born out of chaos.
To get a sneak peek of the project, you can run it in Codesphere, an online development, and deployment tool, here:
Keep in mind that you will have to make a free account if you have not used Codesphere before. Once the Codesphere environment is created, you can deploy the app by running:
npm ci && node server.js
You can find more information on Codesphere here:
The chaos game begins by drawing three corners of a triangle, and a point in the center of the triangle. We’ll label our corners A, B, and C.
Now pick one of our corners at random. Say we choose A, draw an additional point halfway between the center and A.
Now repeat the process again, picking a random corner(C in this case), and drawing a point halfway between C and our most recent point.
The Chaos Game is interested in what occurs if you repeat this process continually. Will the entire triangle be filled up? Will the points be concentrated around the edges? Since we are picking the corners at random, maybe there will be no pattern at all?
Well, it turns out that a pattern does emerge: The Sierpinski Triangle.
Even more interesting than this fractal, is the fact that the Sierpinski Triangle occurs in other places in Mathematics, such as Pascal’s Triangle(When you fill in all odd numbers):
Let’s get started! If you are using Codesphere create an empty project. If you are not, create an empty directory.
Next, initialize npm:
We are going to create two files: server.js to run our express server, and a index.html file for our webpage.
touch server.js index.html
Finally, install ExpressJS, a NodeJS framework for creating web servers:
npm i express
For this project we are going to use Express to serve our html page that will contain our relevant code. To do this, we write the following code in our server.js file:
To run our server on port 3000, we can just run:
However, we haven’t yet put anything in our
index.html file, so we’ll just get a blank screen.
We can access p5js with the following extremely long CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>
Note, that we will also be creating a text field for the user to enter the number of iterations that they want to play the game for, which we can also use p5.js to make.
If we deploy our code, we should see the following:
And there you have it! In only around 50 lines of code we can simulate the Chaos Game and generate an amazing fractal!
Now if you are looking to play around with the Chaos Game some more, I’d encourage some of the following variations:
- What happens if you change the starting point? What if you start at one of the corners? What if you start outside the triangle?
- What happens if you change the corners of the triangle? What if it is a right triangle?
- Can this game be played in 3D with a pyramid?