Mandelbrot algorithm in SCSS (version 2)

index.jade

mandelbrot-set

hr
.iframe
  h2 precomiled 
  p (5 1/2 hours compile time)
    br
    | 3.4MB CSS (wait for it to load)
  a(href="http://mandelbrot.cssnerd.com/v2/" target="_blank") http://mandelbrot.cssnerd.com/v2/
  br
  iframe(src="http://mandelbrot.cssnerd.com/v2/" height=400 width=400 frameborder=0 scrolling="no")

Mandelbrot algorithm in SCSS (version 2).markdown

Mandelbrot algorithm in SCSS (version 2)

Second (faster) version of the mandelbrot algorithm in SCSS

A Pen by Gregor Adams on CodePen.

License.

style.scss

$canvasWidth: 40;
$canvasHeight: 40;
$iterations: 20;
$xCorner: -2; 
$yCorner: -1.5;
$dotSize: 4px;
$zoom: 3;
$data: ()!global;
@mixin plot ($x,$y,$count){
  $index: ($y * $canvasWidth + $x) * 4;
  $r: $count * -12 + 255;
  $g: $count * -12 + 255;
  $b: $count * -12 + 255;
  $a: 255;
  $data: append($data, $x*$dotSize $y*$dotSize 0 rgba($r,$g,$b,$a), comma)!global;
}
@for $x from 1 to $canvasWidth {
    @for $y from 1 to $canvasHeight {
      $count: 0;
      $size: 0;
      $cx: $xCorner + (($x * $zoom) / $canvasWidth);
      $cy: $yCorner + (($y * $zoom) / $canvasHeight);

      $zx: 0;
      $zy: 0;

      @while $count < $iterations and $size < 4  {
        $count: $count + 1;
        $temp:  ($zx * $zx) - ($zy * $zy);
        $zy:  (2 * $zx * $zy) + $cy;
        $zx:  $temp + $cx;
        $size:  ($zx * $zx) + ($zy * $zy);
      }

      @include plot($x, $y, $count);
    }
}
mandelbrot-set {
  $marginRight: $dotSize*$canvasWidth;
  $marginBottom: $dotSize*$canvasHeight;
  display: inline-block;
  height: $dotSize;
  width: $dotSize;
  box-shadow: $data;
  margin: 0 $marginRight $marginBottom 0;
}