schedule2018-12-17

p5jsのサンプルを動かしてみる

はじめに

javascriptで図形やグラフィカルな描画が書けるp5jsが面白そうだったので、サンプルを動かしました。

このサイトの環境でどう動かせるか実験した記事です。

公式 p5js

時計のサンプルを動かしてみる

Example clock

function setup() {
  // 親要素を指定して描画位置を変更する
  let canvas = createCanvas(400, 400);
  canvas.parent('canvas');
  
  // 省略
}

変更箇所はcanvasの大きさと位置だけです。 p5jsのデフォルトでは</body>のすぐ上にcanvasが描画されるため、記事の中に組み込めるようにcanvasの親要素を指定してます。

関数が充実していますね。 時間がsecond() minute() hour()だけで取得できますし、図形の形や色も簡潔にかけるためコードがスッキリしています。

参考

《JavaScript》p5.jsでcanvasを任意の場所に配置する方法。 Qiita