Second (faster) version of the mandelbrot algorithm in SCSS
A Pen by Gregor Adams on CodePen.
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") |
Second (faster) version of the mandelbrot algorithm in SCSS
A Pen by Gregor Adams on CodePen.
$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; | |
} |