イイダリョウのブログ。【p5.js】クリエイティブコーディングに挑戦(その1)2019-06-20【p5.js】クリエイティブコーディングに挑戦(その1)JSp5.jsの続きです。前回はp5.js習得のためになりそうなサイトや書籍をまとめました。今回はその中でドットインストールの作例「p5.jsクリエイティブコーディング」が素敵だったので挑戦してみます。今回、取り組むのはドットインストールの講座「p5.jsでクリエイティブコーディングを体験しよう」。※参考:p5.jsでクリエイティブコーディングを体験しよう1本目で完成品をいじっている。完成版で遊んでみようおお!グリッド状に配置されたドットがカーソルを載せると波紋状に大きさが変わる!色もランダムに変わる。p5.jsをやりたい動機はユーザーの操作にインタラクティブに反応するところなのでモチベーションがあがる。描画領域の設定2本目の動画部分。描画領域の設定をしようまず、HTMLファイルでp5.jsのライブラリを読み込む。src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>私がいつも使っているCodePenならJSの歯車アイコンのところでリンクできる。準備完了したので、p5.js部分を作成。描画領域のセットアップ}関数setup()の中に描画領域の設定を書いていく。fill(255);}createCanvas()で幅200px、高さ200pxのcanvasを作成background()で背景色RGB全て0(黒)noStroke()で線を無しにfill()で面の色をRGB全て255(白)色の値を一つだけにするとRGB三色が全て同じ値になるのは独特な書き方。設定はしているけど、まだオブジェクトがないので何も描かれていない。グリッドを作ってみよう作った。高さ)で幅と高さにはsizeを入れるellipseは楕円という意味。5pxの楕円が左から50px、上から50pxのところから始まって、列も行も50pxずつ離れて描画された!ただ、動画でも語られているように、ほとんど同じ内容で値の数字だけ変わっているのはメンテナンス性が低いのでループ化したい。for文のループにするfor文でループにする。二重ループを使ってみようやってみた。CodePen.見た目は同じ。}}楕円設定のところをfor文でループ化。条件xの初期値は50。150になるまでxに50ずつ足す(=3回分)for文の中身はellipse()だが第一引数(左からの位置)をxに第二引数(上からの位置)を変えたfor文を3つ書く先ほどより冗長ではなくなったけど、ほとんど同じfor文を3つ重ねているのをなんとかしたい。「二重ループ」にする。CodePen.またまた見た目は同じ。}先ほどのfor文の外をfor文で囲う。外のfor文の条件yの初期値は50。3で合計9回ループする。見た目がずいぶんスマートになった!あまりネストを深くするとわかりにくくなりそうな気もするけど、二重ループにするだけでこれだけすっきりするなら今後も使っていきたい。円の数を増やす次は円の数を増やす。}createCanvas()の第一引数を600(canvasの幅が600px)変数stepを追加。値を20に二重ループの条件1:yもxもスタートを0に二重ループの条件2:yはheightいっぱいまで、xはwidthいっぱいまで続ける二重ループの条件3:step(20)ずつ足していくwidthやheightと書くだけで幅や高さいっぱいまでのサイズを取得できるのは楽でいいですね♪これでcanvasのサイズが大きくなり、端から端まで20px感覚で楕円がループされる。CodePen.リロードをすると毎回大きさが変わる。}}}for文の外の変数をstepのみにfor文の中に変数sizeを設定。random()関数で0〜15の間にループでellipse()を実行されるたびにsizeにランダムな値が入る変数sizeの位置をfor文の外に置いたままだとrandom()はページ読み込み時の1回しか実行されない。書く位置によって挙動が変わるのは面白く、今後も意識していきたい。random()はp5.jsで用意されている関数。p5.js以前、おみくじの記事で触れた組み込み関数Math.random()に似ている。クモのようにコツコツと動画では後半でランダム値にもっとメリハリをつける方法を解説していた。CodePen.うむ、確かに前よりも大小差は強くなった。}for文の中に書いた変数sizeをいったんコメントアウト変数sizeの設定のみで値は書かない。条件はrandom()が0.95以上であればrandom()の範囲を0〜10にそれ以外はstep(20)に先ほどは0〜15まで満遍なくだったが、今回は0〜10とさっきより狭い範囲のランダムの中で0.95を超えた場合だけ極端に大きい20になる。差がより明確になっている。20サイズの円が主役、他は脇役という感じのメリハリがついた。これもリロードのたびにランダムに位置が変わる。最後に(次回は色と動き)今回はキャンバスの設定、円の配置、円サイズのランダム化に取り組んだ。次回は後半戦、円の色をランダムに設定したり、カーソルに合わせて円のサイズが変わるインタラクティブコンテンツにしていきたく思う。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。