45 lines
1 KiB
Sass
45 lines
1 KiB
Sass
$canvasWidth: 200;
|
|
$canvasHeight: 200;
|
|
$iterations: 20;
|
|
$xCorner: -2;
|
|
$yCorner: -1.5;
|
|
$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;
|
|
$data: append($data, $x + px $y + px 0 rgb($r,$g,$b), 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);
|
|
}
|
|
}
|
|
.set {
|
|
height: 1px;
|
|
width: 1px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate($canvasWidth*0.5px, $canvasWidth*0.5px);
|
|
box-shadow: $data;
|
|
}
|