Skip to content

Instantly share code, notes, and snippets.

@ondras
Forked from 140bytes/LICENSE.txt
Created April 6, 2012 18:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ondras/2321944 to your computer and use it in GitHub Desktop.
Save ondras/2321944 to your computer and use it in GitHub Desktop.
Sierpinski triangle - 140byt.es

Sierpinski triangle


Trivial Sierpinski triangle fractal implementation, drawn into a HTML canvas. Based on the "Chaos game" algorithm - drawing pointer moving towards randomly chosen triangle vertices.

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

function (c,s,i,a,b,r) { // c=context; s=size; i=iterations; a,b=pointer coords
for (;i--;r=Math.random()*3) // draw 'i' pixels; in each iteration, pick a number 0..2
c.fillRect( // draw pixel at current pointer's location [a,b]
a = (r>2)*s+a >> 1, // adjust the pointer's location by moving half way towards
b = (r<1)*s+b >> 1, // a randomly chosen vertex of a triangle [s,0],[0,0],[0,s]
1, 1 // (pixel size)
)
}
function(c,s,i,a,b,r){for(;i--;r=Math.random()*3)c.fillRect(a=(r>2)*s+a>>1,b=(r<1)*s+b>>1,1,1)}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2012 Ondrej Zara <http://ondras.zarovi.cz/>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "sierpinskiTriangle",
"description": "Sierpinski triangle drawn into HTML canvas.",
"keywords": [
"sierpinski",
"triangle",
"gasket",
"fractal",
"canvas"
]
}
<!doctype html>
<html>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var sierpinski = function(c,s,i,a,b,r){for(;i--;r=Math.random()*3)c.fillRect(a=(r>2)*s+a>>1,b=(r<1)*s+b>>1,1,1)}
sierpinski(document.getElementById("canvas").getContext("2d"), 500, 100000);
</script>
</body>
</html>
@williammalo
Copy link

9 bytes smaller:
function(c,s,i,a,b,r){for(a=b=0;i--;r=Math.random())c.fillRect(a=(r>2/3&&s)+a>>1,b=(r<1/3&&s)+b>>1,1,1)}

@xpansive
Copy link

xpansive commented Apr 6, 2012

@williammalo
Results will be different though, because r will be undefined the first time the loop runs. This should work and be a byte smaller too:

``` function(c,s,i,a,b){for(a=b=0;i--;)r=Math.random(),c.fillRect(a=(r>2/3&&s)+a>>1,b=(r<1/3&&s)+b>>1,1,1)}``

@williammalo
Copy link

@xpansive
"r" will leak to the global scope.

@williammalo
Copy link

Also, 20 bytes smaller than the original:
function(c,s,i,a,b,r){for(;i--;r=Math.random()_3)c.fillRect(a=(r>2)_s+a>>1,b=(r<1)*s+b>>1,1,1)}

@xpansive
Copy link

xpansive commented Apr 7, 2012

Whoops, totally missed that.

@ondras
Copy link
Author

ondras commented Apr 7, 2012

@williammalo
Thanks a lot for your improvements; I adjusted the code according to your last variant. Values "a" and "b" are now rounded each iteration (difference from my original version), but I suppose that is not a problem :-)

@williammalo
Copy link

@ondra Thanks! :)
1 byte smaller!:
function(c,s,i,a,b,r){for(;i--;r=Math.random()_3)c.fillRect(a=(r>2)_s+a>>1,b=!~~r*s+b>>1,1,1)}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment