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

投稿日:2020-01-05



ナカジ(@cp_nakajun)です。

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

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

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

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

p5jsでやってみよう

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

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

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

でなにかモチーフがないか考えた結果、ロゴを元に「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座標をずらして描画

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

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

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します