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

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

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

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

この記事を書いた人
ワタタク
  • クリエイティブコーディング上達関連情報と、その過程の記録を発信中
  • コンセプトは「クリエイティブコーディング1万時間の歩き方」
  • 2024年にProcessingの基礎学習のアウトプットを終え、2025年から作品制作開始

目次

作品とコード

参照型の配列を使った水玉模様
// 参考にさせていただいた作品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の基礎をやってきたおかげで、何をしているのかスムーズに分かるようになってるということに気づけて嬉しい。

ワタタク

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次