【p5.js】作品：青と水色が流れてく【Flow Field】

2025年1月7日2025年1月16日

URLをコピーしました！

ワタタク

参照型の配列を参考にして、青と水色が流れていくアニメーション作品をつくりました。

コード、コード内に参考にしたページのURL(Flow FieldについてのYotube動画)、良かったこと、反省点、次にどうするかをまとめています。

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

作品：「青と水色が流れてく」とコード

綺麗で好き。

配色は使用しているシャーペンのKURUTOGA DIVE（アビスブルー）とKURUTOGA ADVANCE（水色）から得ました。

// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg

let posBlue = [];  // 青色の点
let posCyan = [];  // 水色の点

function setup() {
    createCanvas(w = 500, w);  // 500x500ピクセルのキャンバスを作成
    background(255);  // 背景を白色に設定
    strokeWeight(1);  // 点の太さを1に設定

    // 青色と水色の点の位置を初期化
    for (let i = 0; i < 130; i++) {  // 各色の点の数を増やす
        posBlue[i] = {x: random(w), y: random(w)}; // 青色の点の位置をランダムに設定
        posCyan[i] = {x: random(w), y: random(w)}; // 水色の点の位置をランダムに設定
    }
}

function draw() {
    stroke(43, 123, 202); // 線の色を青色に設定
    fill(43, 123, 202); // 青色で塗りつぶす
    for (let i = 0; i < posBlue.length; i++) {
        ellipse(posBlue[i].x, posBlue[i].y, 5, 5); // 青色の円を描く
      
        // ノイズ値に基づいて位置を更新
        let dx = noise(posBlue[i].x / w * 15, posBlue[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
        let dy = noise(posBlue[i].x / w * 15, posBlue[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
      
        posBlue[i].x += dx; // xオフセットをx座標に加える
        posBlue[i].y += dy; // yオフセットをy座標に加える
    }
    
    stroke(0, 191, 255); // 線の色を水色に設定
    fill(0, 191, 255); // 水色で塗りつぶす
    for (let i = 0; i < posCyan.length; i++) {
        ellipse(posCyan[i].x, posCyan[i].y, 5, 5); // 水色の円を描く
      
        // ノイズ値に基づいて位置を更新
        let dx = noise(posCyan[i].x / w * 15, posCyan[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
        let dy = noise(posCyan[i].x / w * 15, posCyan[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
      
        posCyan[i].x += dx; // xオフセットをx座標に加える
        posCyan[i].y += dy; // yオフセットをy座標に加える
    }
}

ワタタク

参照動画のpointをellipseに変える→ellipseを2つに増やす。そうすることで水色と青色がウネウネと流れてくようになりました。

この作品をつくって良かったこと

すごいと思う作品を真似して、自分なりにこうしてみたいと思ったように作りなおすと、すごいと思える作品をつくれる
今までシンプルなデザインのコードを真似してきていたけど、今回は「おおっ～！！」って自分で感じる作品をつくることができたので嬉しい
前回の記事の参照型の配列を使った水玉模様の続きの内容で、ほんの少し変えるだけで、すっごい作品が変わることが分かった
上級者さんの作品を真似る→自分なりに応用することの楽しさが分かった
やりたかった作品を見て、詩を書くことができた（現段階では公開していない）
正規化について知ることができた
OpenProcessingで作品をアップして、そこからアニメーションをブログに貼れることに気づく
OpenProcessingのアニメーションが見れなかったときのために、一応、XでもGIFを共有しておきたいと思う
インターネットで1ページ目に表示されることを意識しすぎないタイトルの記事を作成しやすくなった。検索意識して記事を書くと機械的だし、僕自身を感じてもらいにくいと思っていたんです。何ていうか。僕の言葉を書きやすくなったかな。

反省点

あとどれくらいこの部分の解説はあるんだろう？と気になって、集中力が少し切れがちだった（先の次はどうするか？の項目で改善完了）

次はどうするか？

動画や記事からの学び方を変える
- 1 最初に動画は全部見る。記事は全部読む
- 2 何をどのくらいノートに書くことになりそうか目次てきなものを作成してメモしておく
- 3 コードの写経をする
- 4 自分なりに作りかえたコードを印刷する
- 5 ノートにまとめていく
- 6 定期的に復習する。学習を始める前、寝る前とかにコード見て、何をしているのか分かるか確認する

今回の作品が完成したときはすごく嬉しかった。

すごいな。と思う作品を真似し、自分なりに変えると笑顔になれる作品をつくることができると分かったので。

できたときは、めっちゃ笑顔になりましたね。

眠気が飛んで、いつもなら寝てる時間までこうして記事を書いたりすることができています。

続けて、発想力をつけ、世界中の人に楽しんでもらえるようになろう。

ワタタク

それでは今日もレッツワクワクコーディング。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！