Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Chaos Game - inspired by Numberphile
<canvas id="canvas" width="800" height="600"></canvas>
<button onclick="randomStart();drawMassive(5000);">Random</button>
<button onclick="niceStart();drawMassive(50000);">Nice</button>
<script type="text/javascript">
const canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
const A=[0,0],B=[0,0],C=[0,0];
var S=[0,0];
function nextPoint() {
var nr = parseInt(Math.random()*6)+1;
var ot = [0,0];
if(nr===1||nr===2) { ot = A; } else if(nr===3||nr===4) { ot = B; } else if(nr===5||nr===6) { ot = C; }
var M = [ (S[0]+ot[0])/2 , (S[1]+ot[1])/2 ];
S = M;
drawPoint(M[0],M[1],"#FF0000");
return nr;
}
function randomStart() {
A[0] = rN(800);
A[1] = rN(600);
B[0] = rN(800);
B[1] = rN(600);
C[0] = rN(800);
C[1] = rN(600);
S[0] = rN(800);
S[1] = rN(600);
drawPoint(A[0],A[1],'#FF0000');
drawPoint(B[0],B[1],'#00FF00');
drawPoint(C[0],C[1],'#0000FF');
}
function niceStart() {
A[0] = 400;
A[1] = 10;
B[0] = 10;
B[1] = 590;
C[0] = 790;
C[1] = 590;
S[0] = 400;
S[1] = 300;
drawPoint(A[0],A[1],'#FF0000');
drawPoint(B[0],B[1],'#00FF00');
drawPoint(C[0],C[1],'#0000FF');
}
function rN(f) {
return parseInt(Math.random()*f);
}
function rC() {
return [rN(800),rN(600)];
}
function drawMassive(no) {
let s = new Date()/1;
for(var i=0;i<no;i++) { nextPoint();}
console.log("time to Draw "+(new Date()/1-s));
}
function drawPoint(x,y,color,size) {
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = (color||false)? color : '#000000';
var s = (size||false)? size : 2;
ctx.arc(x,y,s,0,2*Math.PI);
ctx.stroke();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment