遊ぶようにプログラミングができる『クリエイティブコーディング』。『クリエイティブコーディング』の中でも一番とっつきやすいかと始めた『P5.js(ProcessingのJavaScript版』の連続記事も今回で8記事目。関数ランダムなどを扱ってきました。色や大きさを変えてみたいと思います。『クリエイティブコーディング』関係ではこんな記事も読まれています。色をランダムにまずは『配列』の記事で扱ったコードを変えていくことにします。CodePen.参考記事もんプロ~問題発見と解決のためのプログラミ...プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】https://coinbaby8.com/array-p5js.html今回のお題は『配列』。『プログラミング』を始めたばかりの頃を思い出すと、『配列』をどうもうまく使いこなせなかったのですが、慣れてくるにつれ、こんなに便利なものはないなと実感します。ボールを1個動かすだけなら『配列』の出番はないのですが、ボール...『配列』の時に扱ったコードはこちら。-1;}}}まずは色をランダムにしてみました。色の情報も、配列で使えるように宣言します。colorという文字は、すでに『P5.js(ProcessingのJavaScript版)』で予約されていて使えないので、colorを省略して『col』という変数にしています。色も配列に『setup』関数の中で、インスタンス毎に色の情報も持たせるようにします。色を塗る役割の『fill』関数の引数で、配列を指定しています。色を配列で指定もし『draw』関数の中で『color』関数を使ってしまうと、1フレーム毎に色が変わることになりチカチカ変わって大変になってしまいます・・アオキ色の指定は『setup』関数内で実施しておく方がいいかなと思います。プログラミングで大きさを変えて遊んでみる続いて円の大きさも変えてみたいと思います。CodePen.コードはこちら。半径も『配列』として保存させるために『変数』をつくります。英語で半径を表す『Radius(ラディウス)』を省略して『rad』変数をつくっています。//半径も配列に『setup』関数の中の『for』文のなかで、半径をランダムで指定しておきます。//半径をここで決めておく『draw』関数内の『ellipse関数(だ円を描く関数)』のなかで、半径を指定しています。色やサイズをばらばらにすることで、より鮮やかになってきたかなと思います。赤やオレンジなどの同系色の中で変更するもよし、ちょっと透明にさせるもよし。アオキ『HSL』だとそういう調整が簡単にできるので楽ですね。user【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)...https://coinbaby8.com/colormode-hsl.html遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろん、ホームページやウェブサービス、洋服やコスメなどでも、『色』によってずいぶんと雰囲気が変わります。下記の内容がある程度わかると、とても表現の幅が広がるんじゃないかなと思います。『数学』や『物理』を知るほどに、より多彩な表現ができるようになります。『プログラミング』を有効活用していけたらなと思います。『クリエイティブコーディング』関係ではこんな記事も読まれています。)mアオキのツイッターアカウント。)この記事へのコメントはありません。この記事へのトラックバックはありません。返信をキャンセルする。-URL上に表示された文字を入力してください。検索プロフィール世界のアオキ問題発見と解決のための新時代の教育を。STEAMも、プログラミングも。テスト用の知識ではなく世界を変える知識を。CoderDojo熊本支部の中の人。難しい事をわかりやすく伝える事に喜びを感じております。尊敬する人はレオナルド・ダ・ビンチ(雑食系天才)。チャンピオン変更のお知らせ2018年9月より、子供向けプログラミング教室、『CoderDojo熊本』の初...2019.12.5高校生向けの『新・情報の科学』なる教科書を読んでみ...2020年に小学生でプログラミング必修化になり、2021年、2022年と段階的...2019.11.19バビロン大富豪の教え〜姪っ子へのプレゼントのつもり...小学校5年生の姪っ子から、とあるマンガを買って欲しいとおねだりされまして。