イイダリョウのブログ。p5.js事始め:いろんな図形を配置してみる2019-05-26p5.js事始め:いろんな図形を配置してみるJSブラウザでインタラクティブコンテンツを作りたくて検討をした結果、一番興味深かったp5.jeを事始めます。円を描く:ellipse()円弧を描く:arc()線を描く:line()点を描く:point()四角形を描く:quad()正四角形を描く:rect()三角形:triangle()正多角形:sin()、cos()最後にcanvasかSVGか、それが問題だp5.jsはcanvas要素で作られている。最近はVue.jsと親和性が高いSVGが優勢でcanvasは時代遅れになりつつあるみたい。インタラクティブコンテンツを作る上ではどうなのか、比較検討してみた。以前触れたSVGのチャートライブラリc3.js。こちらの元となるd3.jsがある。「d3.jsはチャートライブラリではない」ということなのだがサンプルを見るとそれでもチャート系が多い。GitHubまた、p5.jsにはd3.jsよりも私にとってはメリットに感じる部分が多かった。API)と連携できそうWebGLの3D作品も作れそうcanvasだけでなく外部のDOMも操作できそうProcessingの作品もちょっとした書き換えで移植できそうProcessingも合わせると歴史も情報も多いということで、とりあえずインタラクティブコンテンツはp5.jsをメインにすることにした!p5.jsの基本p5.jsを始めるにはまずライブラリのファイルをインストールする。src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>最新版が0.80なのね。バージョン1にもなっていない。基本形はsetup()とdraw()2つのメソッドからなる。//描画コンテンツの設定}setup()はcanvasや全体に共通する設定を書く。draw()は描画される設定を書く。描画は毎秒60フレームで行われる。Started」にあるコードをゲットしてスタートする。CodePen.PCではマウス、スマホでは指を動かすと円が残像を残しながら描かれる。(PCではクリックしながら動かすと半透明に)コードはこちら。createCanvas()はcanvas要素のサイズ。幅、高さともに300px。background()は背景色。stroke()は線の色。押しているときの設定、fill()は面の色。押していないときの面は#fffに。ellipse()は円。引数4つで「マウスの横位置、マウスの縦位置、幅80px、高さ80px」リファレンスを見ると色は16進数、RGBAの他にもHueなどいろいろ設定できそう。※参考:http://p5js.org/reference/#/p5/mouseIsPressedellipse()は円。※参考:http://p5js.org/reference/#/p5/ellipse縦位置、横位置は絶対値を入れるとcanvasの左上からの位置になるがmouseX、mouseYだとマウス(スマホは指)の位置になる。この第3、第4引数を異なる数字にすると楕円形になる。Primitives」を見ていく。※参考:https://p5js.jp/reference/#group-Shapeまずはarc()円弧から。開始位置0にすると右端のようだった。PIは180度のため終了位置HALF_PIにすると90度の円弧になる。最後のモードは必須ではない。3点を結んぶ線になった。150);引数は順番に「点1の横位置、点1の縦位置、点2の横位置、点2の縦位置」1点目をマウス位置、2点目をcanvasの中央(150)にしているこれによって、マウスを動かすと漫画の集中線のような線が描画される。mouseY);引数は順番に「点の横位置、点の縦位置」マウスを動かすと点が描かれる。mouseY+30,);引数は順番に「「点1の横位置、点1の縦位置、点2の横位置、点2の縦位置、点3の横位置、点3の縦位置、点4の横位置、点4の縦位置」quad()は四角形だが、正四角形ではない。4点すべての数値を指定することができる。点1をマウスの位置にしてあとは適当な数字をプラスしてみた。60);円ellipse()と同様に幅と高さを異なる数値にすると長方形になる。60);引数に5つ目を追加すると角丸になる。10);五つ目の10で四隅に10pxずつの角丸が入る角丸は四隅の数値を個別に指定することもできる。時計回りに一周する順番。CSSのborder-radiusと同じ。左上が10、右上が5、右下が0、左下が30。正多角形:sin()、cos()上の方法で正三角形の数値を調べるのは難しいが、sin()、cos()を組み合わせて描く方法があった。30pxシェイプの点vertex()にx、Yの値を入れるこれまでよりちょっと複雑だが、変数cornerに入れた数字で360を割った角度の正多角形ができる。今回は3なので正三角形。|マナペディア|変数cornerを5にすると正五角形になる。corner=5;変数cornerを6にすると正五角形になる。corner=6;以降、変数cornerの数値を増やすごとにだんだんを円に近づいていく。最後にということでp5.jsをGettingしてStartedしました!p5.jsの元となるprocessingの存在は前から知ってて本屋さんでパラ見してたが、何ができる技術なのかいまいちよくわかっていなかったんですよね。して触ってみるとシンプルなコードで楽しくインタラクティブコンテンツが作れそうに感じました♪p5.jsでできることはこんなものじゃなくてデザインだけでなくデジタルアートの分野まで発展できそうです。p5.jsこれからもいろいろと試していきたく思います。Train(p5.js1.4〜1....p5.jsの続きです。P_1_0_01」のコー...p5.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。