{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","html":"

\n

今回はp5jsのトレーニングとして、arcと簡単なEaseOut関数を使ったコードを作りました。

\n

このコードの要点のみ解説したいと思います。
\n最終的なコードはCodepenでご確認いただけます。

\n
    \n
  1. arc関数で円弧を描く
    2. \n
  2. 描画する円弧の定義を、オブジェクトとして格納する
    3. \n
  3. 複数生成したいので配列に格納する
    4. \n
  4. Easingで動きをつける
    5. \n
  5. draw関数内で最終的な円弧を描く
    6. \n
\n

\n \n \n \n \n \n \n \narc関数で円弧を描く

\n

一見複雑にみえますが、主な描画関数はarcです。

\n
noFill(); // 塗りつぶしをなくします。\nstroke(線の色);\nstrokeWeight(線の太さ);\narc(円弧の中心x座標, 円弧の中心y座標, 円弧の幅, 円弧の高さ, 円弧の開始角度, 円弧の終了角度);
\n

\n \n \n \n \n \n \n \n描画する円弧の定義を、オブジェクトとして格納する

\n

円弧の定義の内、動的に変えたい値を1つのオブジェクトに格納します。
\n動的に変えたいのは色、太さ、円弧の大きさ、円弧の長さです。
\n自動で様々な円弧を生成したいので、値の初期値にrandom関数を使い、オブジェクトを定義します。

\n
{\n  color: color(random(255), random(255), random(255)), // 線の色\n  weight: random(1, 3), // 先の太さ\n  arcWidth: random(50, width), // 円弧の幅と高さ、正円は幅と高さも同じなので幅のみ定義\n  startDegree: random(360), // 円弧の開始角度\n  arcLength: radians(random(30, 120)), // 円弧の長さを角度で定義、開始角度とると円弧の終了角度になる\n}
\n

\n \n \n \n \n \n \n \n複数生成したいので配列に格納する

\n

for文を使い、好きな数の円弧の定義を生成し、arcsに格納します。

\n
let arcs = [];\n\nfor(let i = 0; i < 30; i++) {\n  arcs.push({\n    color: color(random(255), random(255), random(255)),\n    weight: random(1, 3),\n    arcWidth: random(50, width),\n    startDegree: random(360),\n    arcLength: radians(random(30, 120)),\n  })\n}
\n

\n \n \n \n \n \n \n \nEasingで動きの緩急をつける

\n

Easing[イージング]に関しては、CodeGridさんの記事で詳しく解説されているのでわからない方はざっと見たほうがいいかもしれません。

\n

ここでは、Processing内でサクッと書きたかったので、\nこちらの記事の式が簡単だったので、引用させていただきました。

\n
nowValue += (tagetValue - nowValue) * 0.05;
\n

要は目的の値までの距離を均等に徐々に足していくという式です。
\n目的の値に近づくほど足す値が小さくなっていくので、EaseOut[イーズアウト]の形になります。

\n

他にも、Robert Pennerさんのeasing関数など、様々なEasing関数があるようです。後日チャレンジしてみたいと思います。

\n

そして、Easingの値を格納するために、円弧の定義に新たにdelayDegを追加します。
\n円弧は0から360の角度で指定するので、目標角度を360としdelayFinalDegに格納します。
\n上記のEasing式に当てはめると以下の様なコードになります。

\n
const delayFinalDeg = 360;\n\n// Easing部分の式\ndelayDeg += (delayFinalDeg - delayDeg) * 0.05;
\n

delayDegは円弧ごとに変えたいので、先ほどのオブジェクトに追加します。

\n
{\n  color: color(random(255), random(255), random(255)),\n  weight: random(1, 3),\n  arcWidth: random(50, width),\n  startDegree: random(360),\n  arcLength: radians(random(30, 120)),\n  delayDeg: random(360), // この行を追加\n}
\n

\n \n \n \n \n \n \n \ndraw関数内で最終的な円弧を描く

\n

最後に、p5jsのdraw関数内でcanvasの中心座標に円弧を描きます。
\nEasing値となるdelayDegは円弧の開始と終了座標にそれぞれ加算します。

\n
arc(\n  width/2,\n  height/2,\n  arcWidth,\n  arcWidth,\n  radians(delayDeg + startDegree) - arcLength,\n  radians(delayDeg + startDegree),\n);
\n

delayDegが360まで到達(一回転する)したあと、再度ループして描画させたいので、360に近づいたタイミングで0に戻します。
\n今回使用したEasing式だと360に値に収束しますが、360になることはないので、-1した値とdelayDegを比較させます。

\n
if (delayDeg > delayFinalDeg - 1) arcLine.delayDeg = 0;
\n
\n以上のコードをp5jsのライフサイクル内に当てはめ、コードを完成させます。
\n最終的なコードはCodepenでご確認いただけます。\n
","fields":{"slug":"/2019-09-11_p5-jsスケッチトレーニング-円弧の線を円周上に沿って動かす/"},"tableOfContents":"","frontmatter":{"date":"2019.09.11","title":"p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-","cover":"","category":"Coding","excerpt":"p5.jsのarcと簡単なEasing式を使い、円弧の線を動かします。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","next":{"path":"/2019-09-08_アトミックデザインはコンポーネント再利用の設計方法/","title":"アトミックデザインはコンポーネント再利用の設計方法","category":"Design"},"prev":{"path":"/2019-09-14_p5-jsを本番サイトで使う方法/","title":"p5.jsを本番サイトで使う方法","category":"Coding"},"relatedPosts":[{"id":"2e52640f-36d6-5268-99ea-9d58492ffec5","fields":{"slug":"/2019-09-14_p5-jsを本番サイトで使う方法/"},"frontmatter":{"title":"p5.jsを本番サイトで使う方法","date":"2019-09-14T00:00:00.000Z","excerpt":"p5.jsをいざプロダクションビルド(本番サイト向け)で使う場合、一体どのような方法で使うのが最適でしょうか。p5.jsの特徴を踏まえ、代表的な使い方をご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"1eb35481-156d-520b-ab66-a911316fe17b","fields":{"slug":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/"},"frontmatter":{"title":"Webで簡単にコードで絵を描くp5.js","date":"2019-07-03T14:15:51.667Z","excerpt":"描画ライブラリp5.jsとCodepenを使い、ブラウザ上で簡単にスケッチを描く方法を紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"aa5f4477-fc03-52d8-a793-d1abdb3a7ecd","fields":{"slug":"/2019-09-02_p5jsのコードをsketchファイル上で実行する方法/"},"frontmatter":{"title":"p5jsのコードをsketchファイル上で実行する方法","date":"2019-09-02T00:00:00.000Z","excerpt":"Sketchで幾何学的なパターンを描くのに最適な、Processing(p5js)のコードをSketch上で実行できるPluginを紹介します。","templateKey":"post","category":"Coding","propertags":["p5js","sketch"],"commontags":["javascript"]}},{"id":"b24fa0f2-8884-5053-9f12-a2dbc1ab9fc6","fields":{"slug":"/2019-09-17_p5-jsをreactのコンポーネントとして実行する方法/"},"frontmatter":{"title":"p5.jsをReactのコンポーネントとして実行する方法","date":"2019-09-17T07:53:50.970Z","excerpt":"p5.jsを直接ページ内に読み込ませるのではなく、Reactなどのコンポーネントの中で実行する方法をコードベースでご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js","react"],"commontags":["component","javascript"]}},{"id":"a9f2125a-caa7-5d36-a7d1-c68b1a35d0fa","fields":{"slug":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/"},"frontmatter":{"title":"Pts.jsによる実践ジェネラティブアート","date":"2019-07-15T00:00:00.000Z","excerpt":"Ptsという幾何学的な図形を描画するのに特化したJavaScriptライブラリをご紹介します。","templateKey":"post","category":"Coding","propertags":["ptsjs"],"commontags":["generative","javascript"]}}]}}