"use strict"; //constants const { PI: π, sqrt, round } = Math; //variables let c, ctx, W, H; //animation variables let fc; //frame count let pd = 3; let paused = false; let btn; let b = 10; //buffer distance from screen boundaries let vx, vy; //vertex coordinates let rx, ry; //random triangle point coordinates let mx, my; //midpoint coordinates //functions window.onload = () => { //canvas setup c = document.getElementById("Canvas"); ctx = c.getContext("2d"); //canvas --> full screen setSize(window.innerWidth, window.innerHeight, pd); //add event listeners c.addEventListener("click", sp); c.addEventListener("dblclick", reset); btn = document.getElementById("Info"); btn.addEventListener("click", info); triangle(); pickRandomPoint(); //begin animation window.requestAnimationFrame(animate); }; const animate = (timestamp) => { //create 20 points per frame for(let i=0; i<20; i++) { pickRandomVertex(); findMidPoint(rx, ry, vx, vy); drawDot(mx, my); //reassign rx & ry to new midpoint rx = mx; ry = my; } //call next animation recursively fc = requestAnimationFrame(animate); } const triangle = () => { ctx.beginPath(); ctx.moveTo(W/2, 2*b); ctx.lineTo(b, (sqrt(3)/2)*W + (2-sqrt(3))*b); ctx.lineTo(W-b, (sqrt(3)/2)*W + (2-sqrt(3))*b); ctx.lineWidth = pd; ctx.closePath(); ctx.stroke(); }; const pickRandomVertex = () => { let r = random(); if(r<=1/3) { vx = W/2; vy = 2*b; } else if(1/3 { ry = random(2*b, (sqrt(3)/2)*W + (2-sqrt(3))*b); let l = (W-2*b)*(ry-2*b)/(sqrt(3)*W - 2*sqrt(3)*b)+W/2; let u = (2*b - W)*(ry - 2*b)/(sqrt(3)*W - 2*sqrt(3)*b) + W/2; rx = random(l, u); }; const findMidPoint = (rx, ry, vx, vy) => { mx = (rx + vx)/2; my = (ry + vy)/2; }; const drawDot = (x, y) => { ctx.beginPath(); ctx.arc(x, y, 1, 0, 2*π); ctx.fill(); ctx.closePath(); }; //utility functions const sp = () => { if(!paused) { window.cancelAnimationFrame(fc); paused = true; } else { window.requestAnimationFrame(animate); paused = false; } }; const reset = () => { ctx.clearRect(0, 0, W, H); triangle(); }; const random = (max=1, min=0) => Math.random() * (max - min) + min; const setSize = (w, h, pd) => { //canvas apparent size c.style.width = `${w}px`; c.style.height = `${h}px`; //canvas actual size c.width = W = w * pd; c.height = H = h * pd; }; const info = () => alert("Sierpinski fractal emerging from chaos.\n\nRules:\n1) Choose a random point inside the triangle.\n2) Choose randomly a vertex of the triangle.\n3) Draw a point at the middle of the distance between the vertex and the random point.\n4) Repeat the process from newly drawn point.\n\nClick --> pause.\nDouble click --> clear.\n\nMath documentation at bottom of js tab."); /* The inspiration for this code was chaos game from numberphile: https://youtu.be/kbKtFN71Lfs Math documentation: The algorithm works like this: 1) Pick a random point of the triangle. 2) Choose a random vertex of the triangle. 3) Draw a point at the mid of these two points. 4) Repeat the process treating midpoint as new random point. We want an equilateral triangle which is independent of screen dimensions & it shouldn't touch the edges of the screen. So we want some buffer space between the triangle vertices & screen edges. Let b = buffer space & w = screen width = canvas width. Let the side size of the triangle be w - 2b => s = w - 2b We will place the top vertex of the triangle at (w/2 , 2b) The height of an equilateral triangle is (sqrt(3)/2)s so (sqrt(3)/2)(w - 2b) So bottom mid point has coordinates: (w/2, (sqrt(3)/2)(w - 2b)+2b) Now we can get the coordinates of the bottom vertices if we go s/2 = (w/2 - b) left and right. Bottom left vertex: (b , (sqrt(3)/2)w + (2-sqrt(3))b) Bottom right vertex: (w - b , (sqrt(3)/2)w + (2-sqrt(3))b) Now in order to pick a random point inside the triangle we need the line equations between the bottom vertices and the top vertex. Which we can easily do by substituting the coordinates to the line equation. (Generic line equation: y = ax + b) line equation for bottom left vertex - top vertex: y = ((sqrt(3)w - 2sqrt(3)b)/(2b - w))x + 2b - ((sqrt(3)w - 2sqrt(3)b)/(2b - w))(w/2) line equation for bottom right vertex - top vertex: y = ((sqrt(3)w - 2sqrt(3)b)/(w - 2b))x + 2b - ((sqrt(3)w - 2sqrt(3)b)/(w - 2b))(w/2) solving these equations for x we get: x = (w-2*b)*(ry-2*b)/(sqrt(3)*w-2*sqrt(3)*b)+w/2; Let's call this l. line equation for bottom left - bottom right vertices: x = (2*b-w)*(ry-2*b)/(sqrt(3)*w-2*sqrt(3)*b)+w/2; Let's call this u. So from the vertices of the triangle we know that y is bound between 2b & (sqrt(3)/2)w + (2-sqrt(3))b or 2b <= y <= (sqrt(3)/2)w + (2-sqrt(3))b and x is bound between the non horizontal lines of the triangle and the bottom line of the triangle or l <= x <= u So now we can pick a random point of the triangle & begin the algorithm. ☺ a wolfram alpha example of inner points of a triangle: http://m.wolframalpha.com/input/?i=0<%3Dy<%3Dsqrt%283%29+%2C+y%2Fsqrt%283%29<%3Dx<%3D%28y-2sqrt%283%29%29%2F%28-sqrt%283%29%29 triangle points: (0,0) , (1,sqrt(3)) , (2,0) triangle side size = 2 */

Sierpinski fractal from chaos