CG関連

プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

遊ぶようにプログラミングができる『クリエイティブコーディング』。

『クリエイティブコーディング』の中でも一番とっつきやすいかと始めた『P5.js(ProcessingのJavaScript版』の連続記事も今回で8記事目。

これまでに、

  • 色(HSL)
  • 速度・加速度
  • ベクトル
  • 配列
  • 関数
  • ランダム

などを扱ってきました。

せっかくなのでもっと色や大きさを変えてみたいと思います。

Sponsored link

プログラミングで色や大きさを変えて遊んでみる まずは色をランダムに

まずは『配列』の記事で扱ったコードを変えていくことにします。

See the Pen
p5.js vector-array-test
by aoki_monpro (@suica)
on CodePen.

参考記事

『配列』の時に扱ったコードはこちら。

まずは色をランダムにしてみました。

See the Pen
p5.js random-color-scale
by aoki_monpro (@suica)
on CodePen.

コードはこちら

位置・速度・加速度と同じように、
色の情報も、配列で使えるように宣言します。

colorという文字は、
すでに『P5.js(ProcessingのJavaScript版)』で予約されていて使えないので、
colorを省略して『col』という変数にしています。

『setup』関数の中で、
インスタンス毎に色の情報も持たせるようにします。

『draw』関数の中で実際に色を塗るのですが、

色を塗る役割の『fill』関数の引数で、配列を指定しています。

もし『draw』関数の中で『color』関数を使ってしまうと、

1フレーム毎に色が変わることになりチカチカ変わって大変になってしまいます・・

アオキ
色の指定は『setup』関数内で実施しておく方がいいかなと思います。

プログラミングで大きさを変えて遊んでみる

続いて円の大きさも変えてみたいと思います。

See the Pen
p5.js random-color-scale2
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

色を変更した時と同じように、

半径も『配列』として保存させるために『変数』をつくります。
名前はなんでもいいんですが、

英語で半径を表す『Radius(ラディウス)』を省略して『rad』変数をつくっています。

『setup』関数の中の『for』文のなかで、半径をランダムで指定しておきます。

『draw』関数内の『ellipse関数(だ円を描く関数)』のなかで、半径を指定しています。

色やサイズをばらばらにすることで、より鮮やかになってきたかなと思います。

もちろん赤やオレンジなどの同系色の中で変更するもよし、

ちょっと透明にさせるもよし。

アオキ
『HSL』だとそういう調整が簡単にできるので楽ですね。
Sponsored link

プログラミングで色や大きさを変えて遊んでみる まとめ

遊ぶようにプログラミングができる『クリエイティブコーディング』とはいえ、

ある程度の『プログラミング』の知識はどうしても必要になってしまうのですが、
下記の内容がある程度わかると、とても表現の幅が広がるんじゃないかなと思います。

  • 色(HSL)
  • 速度・加速度
  • ベクトル
  • 配列
  • 関数
  • ランダム

『三角関数』を使うとよりスムーズな表現もできるようになりますし、

『数学』や『物理』を知るほどに、より多彩な表現ができるようになります。

おもしろい動きや仕組みをつくるために学校の勉強を活用する、という方法も、

新しい教育の一つのカタチなのかなと思いつつ、

『プログラミング』を有効活用していけたらなと思います。

アオキ
どうせなら楽しく遊びたいもんですね〜

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

7. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

12. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  2. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
  3. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
PAGE TOP