P5.js (Processing)

プログラミングで色や大きさをランダムにして遊んでみる(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』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

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

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

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

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

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

10. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

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

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

CAPTCHA


関連記事

  1. P5.js (Processing)

    加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

    遊ぶようなプログラミングでおなじみの『クリエイティブコーディング』。…

  2. HTML/CSS

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

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

  3. P5.js (Processing)

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

    プログラミングでアートだったりデザインを作ることを『クリエイティブコ…

  4. クリエイティブコーディング

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

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  5. GLSL/WebGL

    【GLSL】プログラミングでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて…

    最近いろんなところで目にする『プロジェクションマッピング』や『インタラ…

Sponsored link

最近の記事

  1. 検索システム

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

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  3. Laravel

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. HTML/CSS

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