index.jade

- 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.markdown

Mandelbrot in SCSS

The mandelbrot algorithm in SCSS.

A Live example by Gregor Adams

style.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};
      }
    }
  }
}

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