Fractals with JavaScript in a tweet!

Let’s implement Fractals with JavaScript, and make it fit in a tweet! 280 characters worth of code creates these amazing patterns:

Code

F=()=>{
c=v.getContext('2d')
c.lineWidth=.03
C=[1,-.5,-.5]
S=[0,.87,-.87]
P=[[X=300,Y=300],[X,Y],[X,Y]]
R=()=>{d=parseInt(Math.random()*3)
P=P.map (([x,y],i)=>(c.moveTo(x,y),c.lineTo(X=x+3*C[I=(d+i)%3],Y=y+3*S[I]),[X,Y]))
c.stroke()
setTimeout(R,17)
}
R()}

And it needs the following HTML to work:

<canvas width=400 height=400 id="v"></canvas>
<script>F()</script>

Demo

You can try it out online at my Runkit page

Or, right here!

Click anywhere in the canvas above to generate a new one!

Line-by-line explanation

F=()=>{

Creating a top-level function which starts a recursive loop drawing the fractal progressively.

c=v.getContext('2d')

v here refers to the <canvas id="v"> HTML element. In case you didn’t know, elements with ids are available as globally available JavaScript variables in the browser by default.

Since we’re drawing in 2-dimensional space, .getContext('2d') gives us the right API to draw in 2D.

c.lineWidth=.03

Setting a really small line width makes the new lines in the fractal fade in as they are drawn. It’s just weird that that happens.

C=[1,-.5,-.5]
S=[0,.87,-.87]
P=[[X=300,Y=300],[X,Y],[X,Y]]
R=()=>{d=parseInt(Math.random()*3)
P=P.map (([x,y],i)=>(c.moveTo(x,y),c.lineTo(X=x+3*C[I=(d+i)%3],Y=y+3*S[I]),[X,Y]))
c.stroke()
setTimeout(R,17)
}
R()}