search
LoginSignup
9

More than 5 years have passed since last update.

posted at

updated at

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

元ネタ

プログラムでシダを描画する - 強火で進め
「プログラムでシダを描画する」を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));
}

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
What you can do with signing up
9