p5jsで線の図形をグローっぽくぼんやり光らせつつ、カッコ良く回転させてみよう！

ナカジ(@cp_nakajun)です。

p5jsでなにかやってみたくて

光るCPを回したらわりとキレイでした。 #p5js #processing pic.twitter.com/NP0EQLWc4C

— ナカジ (@cp_nakajun) December 15, 2019

当ブログのロゴ表示と「CP」をグローっぽく光らせて回してみました。

やってることは単純ですが、リファレンスにさせて頂いたコードと共に「比較」してもらうことで何かの参考になれば…

と思い書き残しておこうと思います。

p5jsでやってみよう

今回、以下の記事を参考にさせて頂いてます。

1. p5.jsでクリエイティブなwebサイトを作る
2. ぼんやり光る効果を出す簡単な方法 その2

もともと「１」の回すをやってみたかったのがスタートです。

でなにかモチーフがないか考えた結果、ロゴを元に「C」と「P」にしました。

概要としては

• CPを「1」のように回転させる
• グローエフェクトのようにぼんやり光らせる

ということをやってます。

回転とグローエフェクト

以下のコードが回転とグローエフェクト部分になります。

function drawLogoRotate() {
    blendMode(BLEND);
    background(0, 0, 0, 100);
    noFill();
    blendMode(SCREEN);

    for (var i = 1; i < 8; ++i) {
        strokeWeight(i * 2);
        stroke(45, 164 - (i * 14), 168, 100 - (i * 5));
        
        for (var x = 0; x <= 1000; x = x + 500) {  
            rotate(frameCount * 0.005);
    
            drawLogo(); // ロゴ描画関数読み込み
        }
    }
}

• blendMode(BLEND)で背景とのブレンド
• blendMode(SCREEN)で描画線をスクリーン合成に
• for (var i = 1; i < 8; ++i)とstrokeWeight(i * 2)で太さを変えながら描画
• for (var x = 0; x <= 1000; x = x + 500) でX座標をずらして描画

というようなイメージです。

コードの全容を貼り付けようかと思っていたのですが、無駄に長いだけな気がしたので割愛します。