Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
- 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}")
/**
* @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

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.