イイダリョウのブログ。Train(p5.js2.1)JSp5.jsの続きです。CodingTrainのp5.jsチュートリアル、前回(1.6)までは静止画の描画でした。2.1からはいよいよアニメーションに入っていきます。今回はp5.js組み込みの変数を使って簡易なペイントアプリを作って見ます。Tutorialこの動画から静止画の描画ではなくアニメーションに入っていく。字幕の設定を日本語に変更する。CodePen.円と四角が描かれている。rect(400,100,50,50);}関数setup()は最初の1回に行われる。関数draw()は繰り返しループされる。setup()でキャンパスを設定。幅600px、高さ400pxdraw()のbackground()で背景色。draw()の最初のfill()は円の色、ellipse()関数は円の位置、サイズdraw()の次のfill()で四角の色。rect(400,100,50,50);}draw()のellipse()の第一引数をmouseXにmouseXはp5.jsに最初から組み込まれている変数でマウスの横位置を取得する。rect(400,100,50,50);}draw()にあったbackground()をsetup()に移動する背景が最初の一度描かれのみのため、円の描画がリセットされずに残り続ける。//rect(400,100,50,50);}draw()のellipse()の第2引数をmouseYに四角を設定するfill()、rect()は不要なので削除するmouseYもp5.jsの組み込み変数で、マウスの縦位置を取得する。円を調整してペイントアプリのように絵を描けるようにする。CodePen.円に線がなくなって、透明設定がついて、サイズも小さくなった。//変更}draw()の冒頭にnoStroke()を追加して線を消すdraw()のfill()に第4引数でアルファ(不透明度)設定を追加draw()のellipse()の第3〜4引数で円のサイズを変更mousePressed()でマウスを押すとリセットこのままだと線が増えるばかりなのでリセット設定を追加する。CodePen.画面をクリックするとリセットされて絵が消える。background(250,250,100);}mousePressed()の中に背景のリセット設定を入れる。p5.jsにはsetup()とdraw()以外にも組み込みの関数がある。referenceおまけ:mouseDragged()で描画、doubleClicked()でリセットこのままだと一筆描きのように線を区切れないので、動画にはないが別の関数でアレンジした。CodePen.マウスをドラッグしている間だけ線が描かれるようにした。referenceでもスマホだとうまく動かないかも。「Touch」系の関数も検討すべきかも。最後にということでp5.jsを使ってペイントアプリを作って見ました。p5.jsシリーズ、先はまだまだ長いですが、やっていきたいシリーズなので引き続きよろしくお願いします。Train(p5.js1.4〜1....p5.jsの続きです。Coding...p5.jsの続きです。1.1...p5.jsシリーズの続きです。P_1_0_01」のコー...p5.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。