fgnass/LICENSE.txt

## README.md

      
    Raw
  

              README.md
            
          
    The Mandelbro™

The code was golfed down to 140 bytes during JSConf EU 2011, inspired by a slide from Jed Schmidt's talk:

Credits go to @sylvinus who came up with the idea and the original code
as well as @p01 and Jacob Seidelin who pioneered tweet-sized ASCII art fractals back in 2008.
Instead of drawing onto a canvas, the gist uses █ characters (U+2588) with a font-size of 1px. In order to make this work,
the target DIV must have the following styles:
font-size:1px;
line-height:1px;
width:300px;
word-wrap:break-word;

To support Firefox on OSX, we also have to set a font in which the FULL BLOCK character is exactly 1em wide. Helvetica works well here. All other browsers,
including Firefox on Windows and even IE6 don't care about the font. But be warned, it takes a while in old IEs to render the 90000 font tags.
Besides the use of String.prototype.fontcolor() this gist features some other nifty tricks, like using bitmasks and exploiting the
parsing rules for
legacy color values which are all documented in the annotated version.
If you want to learn more about the Mandelbrot set itself, check out the this comprehensive tutorial.
And here is a jsFiddle to play with.

  
## annotated.js
function(
  s,                  // Array to hold the result
  r,i,k,t,n           // Placeholder vars
){
  for(
    n=9e4;            // Loop over all 300 x 300 pixel
    n--;              //   until n is 0 is reached
    s[n]=             //   and set the current pixel
    '█'               //   to the FULL BOCK 3-byte unicode character (U+2588)
    .fontcolor(       //   and wrap it in a <font color=""> tag.
                      // Bonus: As the font tag uses legacy color values, we don't need a leading #!
                      // Since we iterate exactly 64 times, which is 1000000 in binary,
      (k&63)*4        //   the fill color will be black (with a slightly red tint) on the
                      //   inside of the set (111111 & 1000000 == 0).
      +1e5)           // Finally we add 100000 in order to shift the value to the right (blue),
                      //   so the lightest color will be #1000f8 while the darkest is #100000.
    )
    for(r=i=k=0;      // Calculate the Mandelbrot set, see http://warp.povusers.org/Mandelbrot
      r*r+i*i+k++<63; // for a good explanation.
      i=t)
        t=2*r*i+1
         -n/45e3,     // Center vertically, 300*300/2
        r=r*r-i*i+1
         -n/100%3     // Center horizontally, 300/3
}

## index.js
function(s,r,i,k,t,n){for(n=9e4;n--;s[n]='█'.fontcolor((k&63)*4+1e5))for(r=i=k=0;r*r+i*i+k++<63;i=t)t=2*r*i+1-n/45e3,r=r*r-i*i+1-n/100%3}

## LICENSE.txt
            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 Felix Gnass <http://twitter.com/fgnass>

 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.

## package.json
{
  "name": "Mandelbrot Set",

  "description": "Renders the Mandelbrot fractal set",

  "keywords": [
    "fractal",
    "mandelbrot",
    "fontcolor"
  ]
}

## screenshot.jpg

      
    Raw
  

              screenshot.jpg
            
          
## test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Mandelbro™</title>
<style>
#out {
  font-size: 2px;
  line-height: 1px;
  width: 300px;
  word-wrap:break-word; /* Force line break after 300px */
  font-family: "Arial Black", Helvetica, Verdana;
}
font {
  display: inline-block;
  width: 1px;
  height: 1px;
}
</style>
</head>
<body>
<div id="out"></div>
<script>
var mandelbrot =
function(s,r,i,k,t,n){for(n=9e4;n--;s[n]='█'.fontcolor((k&63)*4+1e5))for(r=i=k=0;r*r+i*i+k++<63;i=t)t=2*r*i+1-n/45e3,r=r*r-i*i+1-n/100%3}

var a = [];
mandelbrot(a);
document.getElementById('out').innerHTML = a.join('');
</script>
</body>
</html>
	function(
	s, // Array to hold the result
	r,i,k,t,n // Placeholder vars
	){
	for(
	n=9e4; // Loop over all 300 x 300 pixel
	n--; // until n is 0 is reached
	s[n]= // and set the current pixel
	'█' // to the FULL BOCK 3-byte unicode character (U+2588)
	.fontcolor( // and wrap it in a <font color=""> tag.
	// Bonus: As the font tag uses legacy color values, we don't need a leading #!
	// Since we iterate exactly 64 times, which is 1000000 in binary,
	(k&63)*4 // the fill color will be black (with a slightly red tint) on the
	// inside of the set (111111 & 1000000 == 0).
	+1e5) // Finally we add 100000 in order to shift the value to the right (blue),
	// so the lightest color will be #1000f8 while the darkest is #100000.
	)
	for(r=i=k=0; // Calculate the Mandelbrot set, see http://warp.povusers.org/Mandelbrot
	rr+ii+k++<63; // for a good explanation.
	i=t)
	t=2ri+1
	-n/45e3, // Center vertically, 300*300/2
	r=rr-ii+1
	-n/100%3 // Center horizontally, 300/3
	}
	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2011 Felix Gnass <http://twitter.com/fgnass>

	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": "Mandelbrot Set",

	"description": "Renders the Mandelbrot fractal set",

	"keywords": [
	"fractal",
	"mandelbrot",
	"fontcolor"
	]
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Mandelbro™</title>
	<style>
	#out {
	font-size: 2px;
	line-height: 1px;
	width: 300px;
	word-wrap:break-word; /* Force line break after 300px */
	font-family: "Arial Black", Helvetica, Verdana;
	}
	font {
	display: inline-block;
	width: 1px;
	height: 1px;
	}
	</style>
	</head>
	<body>
	<div id="out"></div>
	<script>
	var mandelbrot =
	function(s,r,i,k,t,n){for(n=9e4;n--;s[n]='█'.fontcolor((k&63)4+1e5))for(r=i=k=0;rr+ii+k++<63;i=t)t=2ri+1-n/45e3,r=rr-i*i+1-n/100%3}

	var a = [];
	mandelbrot(a);
	document.getElementById('out').innerHTML = a.join('');
	</script>
	</body>
	</html>