この記事は、
『Processing クリエイティブ・コーディング入門 - コードが生み出す創造表現』
のサンプルを、p5.jsで実装していくというものです。
そのまま実装している訳では無く、多少サンプルとは異なっています。

リスト3-2

完成図

[f:id:shootacean:20180409234757j:plain] ある程度時間経過させて、綺麗だと思った時点をキャプチャしました。

ポイント

• 時間経過によって円が描画されていく。
• 内側から外側へ、円が小さくなっていく。
• 青を基調としたランダムな色を生成する。

コード

<script type="text/javascript">
    function setup() {
        list3_2.setup();
    }
    function draw() {
        list3_2.draw();
    }

    const fn = {
        "randomColorRGB": () => {
            return random(0, 255);
        },
    };

    // 点描画で中心に円を描く
    const list3_2 = {
        "setup": () => {
            createCanvas(800, 600);
            background(0);
            noStroke();
            fill(255);
        },
        "draw": () => {
            frameRate(60);
            let x = random(0, width);
            let y = random(0, height);
            let d = dist(x, y, width / 2, height / 2);
            let diameter = 30 - d / 10.0;
            if (diameter > 0) {
                list3_2.dot();
                fill(fn.randomColorRGB(), fn.randomColorRGB(), 200);
                ellipse(x, y, diameter, diameter);
            }
        },
        "drawDotRandom2": (num) => {
            for (let i of [...Array(num).keys()]) {
                let x = random(0, width);
                let y = random(0, height);
                let d = dist(x, y, width / 2, height / 2);
                if (d < height / 2) {
                    list3_2.dot();
                } else {
                    list3_2.dotFrame();
                }
                ellipse(x, y, 10, 10);
            }
        },
        "dot": () => {
            noStroke();
            fill(63, 127, 255);
        },
        "dotFrame": () => {
            noFill();
            stroke(31, 127, 255);
        }
    };
</script>

list3_2オブジェクトに処理をまとめているのは、
サンプルのコーディングを進めて行くと、ごちゃごちゃとしてきそうなのを回避するためです。

反省点

• コードが全然整理できていない。
• 完成図とコードそれぞれを綺麗なモノにしていきたい。