参照型の配列を使った水玉模様

参照型の配列を使った水玉模様
  • URLをコピーしました!
ワタタク

参照型の配列を使って水玉模様をつくりました。

コード、参考にしたページのURL、良かったこと、反省点、次にどうするかをまとめています。

この記事を書いた人

クリエイティブコーダー Watataku のプロフィール写真
ワタタク(Watataku)

上達の研究家 / アーティスト

「才能」ではなく「論理(システム)」で、人の心を動かす機能するアートを探究中

【文系・36歳・未経験】から独学でクリエイティブコーディングに挑戦し、独自の思考法で以下の実績を達成

  • 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選(勝率50%)
  • 開始1年9ヶ月目に、虎ノ門ヒルズ ステーションタワー49階 スカイガーデン&プールのために制作した作品が展示される
目次

作品とコード

参照型の配列を使った水玉模様
// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg

function setup() {
    createCanvas(w = 500, w);
    background(255);
    stroke(1);
    strokeWeight(0.3);

    pos = [];
    for (let i = 0; i < 250; i++) {
        pos[i] = {x: random(w), y: random(w)};
    }
}

function draw() {
	fill(135, 206, 250);
    for (let i = 0; i < pos.length; i++) {
        ellipse(pos[i].x, pos[i].y, 50, 50);
    }
}

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

  • ベクトルについて知った
  • ベクトル場について知った
  • ベクトルを意識することで、風を感じたときにベクトルの力の向きをイメージしたり、今回作成したイメージが頭に浮かぶようになった
  • P5.jsに初挑戦した作品
  • B5のルーズリーフの使い方がうまくなり、クリエイティブコーディング上級者さんのコードなどから、多くを学べるようになった
    • 4色ボールペンの使い方改善
    • 端っこに線を引いたりでして、ページ数や動画なら分数を書く
    • 気づきも書く
    • コードも印刷して貼る。読んで何をしてるのか分かると笑顔になる
  • 作品を簡単に模写することで、そのコードを学ぶ意欲が増加する
  • Campusのルーズリーフの書きやすさ、読み返しやすさが分かった
  • クリエイティブコーディング上級者さんや、サンプルコードを1回で全部やろうとせず、分けて、段階を踏んで作品をつくっていくやり方に挑戦して続けていこうと思えた
ワタタク

プログラミングは、ルーズリーフなどにまとめるのは、非効率的みたいだけど、僕はこちらの方が学びが多く、考える力もついてると思うのでやってみている。

デザイン系のプログラミング系なので、紙に書いたほうがどういう絵を描くのかイメージしやすくなる。

僕は自分なりに、考えながらルーズリーフに書いたほうが上達していると感じやすいし楽しい。

反省点

  • どのノートにプログラミングをまとめていくのか決めるのに時間がかかった。手帳の特殊なサイズのリフィル(HB×WA5)にまとめていたが、小さく感じたのでB5のルーズリフィルに変更した。
    • B5にまとめていくと決めたので問題は解決された
  • 配色の知識がないのでつける

次はどうするか?

  • ルーズリーフの書き方の改善点を活かし、次の作品づくりに取り掛かる

P5.jsに初挑戦だったので、ちょっとコード書くのに時間かかった。

でもProcessingの基礎をやってきたおかげで、何をしているのかスムーズに分かるようになってるということに気づけて嬉しい。

ワタタク

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

ワタタク(Watataku)
上達の研究家
アナログ絵画(2025.11~) × クリエイティブコーディング(2024.3~)

「不完全な人間(Analog)」が、「完全な論理(Algorithm)」を武器にどこまで行けるか。

手描きの一本の線(One)をコードで無限(All)に拡張し、再び一つの作品へ定着させる。「才能」ではなく「発見」と「システム」で描く、人生をかけた実験記録。

溢れる思考を、独自の脳内OS「Watataku Blueprint」で整理し、初心者から世界で活躍するまでの「激闘」と「攻略本」を公開しています。

▼【創作×上達】思考を「作品」に変える、モレスキン6冊の運用設計図
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次