LoginSignup
11
9

More than 5 years have passed since last update.

「プログラムでシダを描画する」をSass(CSS)で描画する

Last updated at Posted at 2014-05-28

元ネタ

プログラムでシダを描画する - 強火で進め
「プログラムでシダを描画する」をEmacs Lispで描画する
「プログラムでシダを描画する」をDartで描画する - Qiita
「プログラムでシダを描画する」をGoで描画する - Qiita
Clojure - プログラムでシダを描画する - Qiita
「プログラムでシダを描画する」をPythonで描画する - Qiita
「プログラムでシダを描画する」をJavaScript+Canvasで描画する - Qiita
「プログラムでシダを描画する」をPHPで描画する - Qiita

追記:
$flaag: #{random(10) <= 3};のままだとコンパイルに数時間かかる上にあまり$flag: #{random(100) <= 25};でした場合と大差なかったのでソースを$flag: #{random(100) <= 25};の方に修正しました。

fern.png

fern.scss
$N: 20;
$COLOR: green;
$WIDTH: 500px;
$HEIGHT: 500px;

@function W1x($x, $y){ @return 0.836 * $x + 0.044 * $y;}
@function W2x($x, $y){ @return -0.141 * $x + 0.302 * $y;}
@function W3x($x, $y){ @return 0.141 * $x - 0.302 * $y;}
@function W4x($x, $y){ @return 0;}

@function W1y($x, $y){ @return -0.044 * $x + 0.836 * $y + 0.169;}
@function W2y($x, $y){ @return 0.302 * $x + 0.141 * $y + 0.127;}
@function W3y($x, $y){ @return 0.302 * $x + 0.141 * $y + 0.169;}
@function W4y($x, $y){ @return 0.175337 * $y;}


@function f($k, $x, $y, $box-shadow:""){
    @if $k > 0 {
        $box-shadow: f($k - 1, W1x($x, $y), W1y($x, $y), $box-shadow);

        $flag: #{random(100) <= 25};
        @if $flag == "true" {
            $box-shadow: f($k - 1, W2x($x, $y), W2y($x, $y), $box-shadow);
        }

        $flag: #{random(100) <= 25};
        @if $flag == "true" {
            $box-shadow: f($k - 1, W3x($x, $y), W3y($x, $y), $box-shadow);
        }

        $flag: #{random(100) <= 25};
        @if $flag == "true" {
            $box-shadow: f($k - 1, W4x($x, $y), W4y($x, $y), $box-shadow);
        }

        @return $box-shadow;
    } @else {
        $s: 490;
        $x: $x * $s + $WIDTH * 0.5;
        $y: $HEIGHT - $y * $s;
        @if $box-shadow != "" {
            $box-shadow: $box-shadow + ",";
        }
        @return $box-shadow + $x + " " + $y + " 0 0 " + $COLOR;
    }
}


.fern{
    width: $WIDTH;
    height: $HEIGHT;
}

.fern:after{
    content: "";
    display: block;
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0);
    box-shadow: unquote(f($N, 0, 0));
}
11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9