Instantly share code, notes, and snippets.

chriseppstein/Mandelbrot-in-SCSS.markdown

forked from pixelass/Mandelbrot-in-SCSS.markdown
Last active Aug 29, 2015
 - f = 50 - c = f * 4 + 1 - n = c * c section - for (i = 0; i < n; i++) - x = Math.round((((c - 1) / 2) - i % c) / ((c - 1) / 2) * -2000) - y = Math.round((((c - 1) / 2) - (i % n - i % c) / c) / ((c - 1) / 2) * 2000) span(class="_#{x}_#{y}")

Mandelbrot in SCSS

The mandelbrot algorithm in SCSS.

 /** * @doc functions */ @function square(\$n) { @return \$n * \$n; } @function complex-add(\$x, \$y) { @return square(\$y) + square(\$x); } @function complex-subtract(\$x, \$y) { @return square(\$x) - square(\$y); } @function complex-multiply(\$x, \$y) { @return 2 * \$x * \$y; } @function complex-next(\$z) { \$x: nth(\$z, 1); \$y: nth(\$z, 2); \$a: complex-subtract(\$x, \$y) + \$xx; \$b: complex-multiply(\$x, \$y) + \$yy; \$ret: complex-add(\$a, \$b); @return \$a, \$b, \$ret; } /** * @doc variables */ // 50 * 15 takes about 6 minutes to compile, so be careful how high you set these. // might end up crashing \$factor: 50; // \$facor * 4 + 1 = number of points on one side; \$iterations: 15; // number of shading iterations \$pixel-size: 10px; // size of one point \$count: \$factor * 4 + 1; \$start: -2; \$end: 2; \$xx: 0; \$yy: 0; \$size: (\$count * \$pixel-size); \$color: 255; \$next: (); \$color-map: (); /** * @doc styles */ *, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0; } section { position: relative; width: \$size; height: \$size; font-size: 0; line-height: 0; } span { height: (\$size/\$count); width: (\$size/\$count); display: inline-block; } /** * @doc Mandelbrot set * * @description * renders the Mandelbrot set */ @for \$x from \$start * \$factor through \$end * \$factor { @for \$y from \$start * \$factor through \$end * \$factor { // resolve positions \$xx: \$x/\$factor !global; \$yy: \$y/\$factor !global; // flag to make sure we know when to stop \$done: false; // first match \$first: complex-add(\$xx, \$yy); // next match \$next: (\$xx, \$yy)!global; // paint the squares ._#{\$xx*1000}_#{\$yy*1000} { //\$r: 0; //\$g: 0; //\$b: 0; \$h: 0; \$s: 100%; \$l: 50%; @if \$first > 4 { // try the first iteration @if \$done == false { \$h: 20deg; \$done: true; } } @else { // then try the rest of the iterations @for \$i from 2 through \$iterations { // calculate the next complex number \$next: complex-next(\$next)!global; // set the color hue for the square @if \$i % 2 == 0 { // even numbers refer to 2 // still bigger than 2? @if nth(\$next, 3) > 2 { @if \$done == false { \$h: \$i * 20deg; \$done: true; } } } @else { // odd numbers refer to 4 // still bigger than 4? @if nth(\$next, 3) > 4 { @if \$done == false { \$h: \$i * 20deg; \$done: true; } } } } } @if \$done == false { \$l: 0%; \$done: true; } \$c: hsl(\$h, 100%, \$l); @if map-has-key(\$color-map, \$c) { \$id: map-get(\$color-map, \$c); @extend %#{\$id}; } @else { \$id: unique-id(); \$color-map: map-merge(\$color-map, (\$c: \$id)) !global; @at-root { %#{\$id} { // set the background-color with the calculated values background-color: \$c; } } @extend %#{\$id}; } } } }

pixelass commented Sep 12, 2014

 Hi Chris. I saw you forked my gist (nice, I really respect that) I updated my version to use box-shadow instead of multiple elements. http://mandelbrot.cssnerd.com/detail/ (160801 layers of box-shadow) This drastically improves the performance (rendering). https://gist.github.com/pixelass/71f17591165857a30fa1