├── index.html
├── index2.html
├── tweet.html
├── .gitattributes
├── .gitignore
├── README.md
└── big.html


/index.html:
--------------------------------------------------------------------------------
1 | <canvas id=A><svg onload=for(Q=5e4;Q--;A.getContext`2d`.fillRect(Q%X,Q/X,1,I/X))for(V=W=0,X=I=297;I--/V;W=Z+Z+Q/2e4-1)Z=V*W,V=V*V-W*W+Q/99%3-2>


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
1 | <script>
2 | document.write`<canvas id=A>`;O=A.width=A.height=999;C=A.getContext`2d`;for(Q=9e5;Q--;C.fillStyle='#04'+I,C.fillRect(Q%O,Q/O,1,!!I))for(V=W=0,I=99;--I/V;W=Z+Z+Q/2e5-2)Z=V*W,V=V*V-W*W+Q/333%3-2.2
3 | </script>


--------------------------------------------------------------------------------
/tweet.html:
--------------------------------------------------------------------------------
1 | <script>
2 | document.write`<canvas id=A width=850 height=600>`;A=A.getContext`2d`;for(Q=5e5;Q--;A.globalAlpha=I/99,A.fillRect(Q%900,Q/700,1,I/50))for(V=W=0,I=99;I--/V;W=Z+Z+Q/2e5-1)Z=V*W,V=V*V-W*W+Q/300%3-2
3 | </script>


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | miniMandelbrot
 2 | ==
 3 | 
 4 | A Mandelbrot set tracer on a canvas in less than 256b
 5 | 
 6 | Golfed with @Xen_the, @keithclarkcouk, @veubeke, @joseprio @subzey @aemkei @p01 @FireyFly @siorki...
 7 | 
 8 | - Big, zoomable with click, commented source code: http://xem.github.io/miniMandelbrot/big.html
 9 | 
10 | - Super mini version: http://xem.github.io/miniMandelbrot/index.html (143b) (may freeze your browser for ~30 seconds)
11 | 
12 | - Tweet: https://twitter.com/MaximeEuziere/status/843397121369956354
13 | 
14 | - Best tweetable version: http://xem.github.io/miniMandelbrot/index2.html (194b)
15 | 
16 | - Tweet: https://twitter.com/MaximeEuziere/status/843812580569374720
17 | 
18 | - 140b version by xen (a bit zoomed and cropped, and longer to execute, but hey, 140b!):
19 | 
20 | ````
21 | <canvas id=A><svg onload=for(P=Q=5e4;Q--;A.getContext`2d`.fillRect(Q%X,Q/X,1,I/X))for(V=W=0,X=I=297;I--/V;W=Z+Z+Q/P)Z=V*W,V=V*V-W*W+Q/X%1-1>
22 | ````
23 | 


--------------------------------------------------------------------------------
/big.html:
--------------------------------------------------------------------------------
  1 | <meta charset=utf-8>
  2 | <canvas id=c>
  3 | <style>*{margin:0;padding:0;border:0}body{background:#000;}canvas{border:1px solid;cursor:crosshair}</style>
  4 | <script>
  5 | 
  6 | ctx = c.getContext("2d");
  7 | 
  8 | // Draw the mandelbrot set on a 1000x1000 canvas (representing x between -2 and 2, and y between -2 and 2)
  9 | // related: https://plus.maths.org/content/computing-mandelbrot-set
 10 | // related: https://au.answers.yahoo.com/question/index?qid=20071231170737AAQznDP
 11 | zoom_x = 0;
 12 | zoom_y = 0;
 13 | iterations = 100;
 14 | c.width = 1000;
 15 | c.height = 1000;
 16 | limit_left = -2.5;
 17 | limit_top = -2.5;
 18 | limit_right = 2.5;
 19 | limit_bottom = 2.5;
 20 | relative_width = 5;
 21 | relative_height = 5;
 22 | x = 0;
 23 | y = 0;
 24 | 
 25 | 
 26 | draw_column = function(){
 27 |     
 28 |   for(grouped_colums = 0; grouped_colums < 10; grouped_colums++){
 29 |   
 30 |     // Increment x
 31 |     x++;
 32 |     
 33 |     // Consider x in the current interval (visible viewport)
 34 |     relative_x = limit_left + relative_width * (x / c.width);
 35 |     
 36 |     // Loop on y
 37 |     for(y = 0; y < c.height; y++){
 38 |     
 39 |       // Consider y in the current interval (visible viewport)
 40 |       relative_y = limit_top + relative_height * (y / c.height);
 41 |       
 42 |       // At this pixel, c is the complex number relative_x + i * relative_y
 43 |       
 44 |       // The series tested in the Mandelbrot set is defined by:
 45 |       
 46 |       // Z[0] = 0
 47 |       // Z[n] = Z[n-1]² + c
 48 |       
 49 |       // We start with z = 0 and update it at each iteration.
 50 |       // If the series diverges (|Zn| > 2), c is outside the Mandelbrot set
 51 |       // If it never diverges, c is in the set.
 52 |       // Each iteration brings more precision to the set, and the new divergent points found at each iteration can be shown by a different color.
 53 |       // Z(n) is complex, so we use Zx and Zy for real and imaginary parts.
 54 |       zx = 0;
 55 |       zy = 0;
 56 |       diverge = false;
 57 |       
 58 |       // Iterate
 59 |       for(i = 0; i < iterations; i++){
 60 |         
 61 |         // Compute the i-th iteration:
 62 |         // z[i] = z[i-1]² + c
 63 |         //
 64 |         // If we decompose the complex numbers in the form a + i * b:
 65 |         //
 66 |         // a[z[i]] + i * b[z[i]] = (a[z[i-1]] + i * b[z[i-1]])² + a[c] + i * b[c]
 67 |         //                       = a[z[i-1]]² + 2 * a[z[i-1]] * i * b[z[i-1]] + (i * b[z[i-1]])² + a[c] + i * b[c]
 68 |         //                       = (a[z[i-1]]² - b[z[i-1]]² + a[c]) + i * (2 * a[z[i-1]] * [b[z[i-&]] + b[c])
 69 |         //
 70 |         // Using our variables:
 71 |         //
 72 |         // real part of Z[n]:
 73 |         // zx = zx² - zy² +  relative_x
 74 |         //
 75 |         // imaginary part of Z[n]:
 76 |         // zy = zx * zy * 2 + relative_y
 77 |         
 78 |         backup_zx = zx;
 79 |         zx = zx * zx - zy * zy + relative_x;
 80 |         zy = backup_zx * zy * 2 + relative_y;
 81 |         
 82 |         // Stop and apply a color if |Zn| > 2, i.e. zx² + zy² > 4
 83 |         if(zx * zx + zy * zy > 4){
 84 |           ctx.fillStyle = "hsl("+ i * 5 + ", 50%, 50%)";
 85 |           ctx.fillRect(x, y, 1, 1);
 86 |           diverge = true;
 87 |           break;
 88 |         }
 89 |       }
 90 |       
 91 |       // If the iterations didn't diverge, color in black
 92 |       if(!diverge){
 93 |         ctx.fillStyle = "#000";
 94 |         ctx.fillRect(x, y, 1, 1);
 95 |       }
 96 |     }
 97 |   }
 98 |   
 99 |   // Next column
100 |   if (x < c.width) requestAnimationFrame(draw_column);
101 | }
102 | 
103 | // Click on the canvas
104 | c.onclick = function(e){
105 | 
106 |   // Double the current zoom
107 |   relative_width /= 2;
108 |   relative_height /= 2;
109 |   
110 |   // Double the iterations
111 |   iterations += 50;
112 |   
113 |   // Retrieve the click coordinates
114 |   zoom_x = e.pageX;
115 |   zoom_y = e.pageY;
116 |   
117 |   // Consider them in the current viewport
118 |   relative_zoom_x = limit_left + (limit_right - limit_left) * zoom_x / c.width;
119 |   relative_zoom_y = limit_top + (limit_bottom - limit_top) * zoom_y / c.height;
120 |   
121 |   // Set viewport bounds
122 |   limit_left = relative_zoom_x - relative_width / 2;
123 |   limit_right = relative_zoom_x + relative_width / 2;
124 |   limit_top = relative_zoom_y - relative_height / 2;
125 |   limit_bottom = relative_zoom_y + relative_height / 2;
126 |   
127 |   // Reset column counter
128 |   x = 0;
129 |   draw_column();
130 | }
131 | 
132 | // Start drawing
133 | draw_column();
134 | 
135 | </script>


--------------------------------------------------------------------------------