0. 環境設定

環境設定については既に終わっているものとして進めていきます。

まずは「lab.js」で「p5.js」を実行出来るように以下のコードを入力してください。少し長いので，そのままコピー＆ペーストしていただいて構いません。

// p5.jsで使うため現在のコンポーネントへの
// ポインターを作ります。
const component = this

// p5.js 初期化関数　インスタンスモードで使います。
const s = ( p ) => {

// セットアップ（最初に1回だけ呼び出される）
// 三次元で描画するときはWEBGLを使います。
  p.setup = function() {
    p.createCanvas(
      component.options.el.clientWidth,
      component.options.el.clientHeight
    )
  }

// 描画（常に呼び出される）
  p.draw = function() {
    
  }
}

// p5.js instantiation
// (ここに記載するだけでなくHTMLのヘッダーにも追加が必要です。)
const myp5 = new p5(s, this.options.el)

// このコンポーネントが終わったらインスタンスを取り除く
this.on('end', () => myp5.remove())

1. 「円」を描いてみよう

それでは，さっそく図形を描いてみましょう。今回は「p5.js」の入門のデモを「lab.js」内で実行してみたいと思います。

まずは，以下のように入力してください。このコードは、「左から50ピクセル，上から50ピクセルに幅と高さが80ピクセルの楕円を描く」という意味です。「p.ellipse」の最初の２つの数字はそれぞれ画面上の位置を指定する「X座標」と「Y座標」です。この座標は円の中心の座標です。３つ目と４つ目の数字は円の幅と高さです。

p.ellipse(50, 50, 80, 80);

描画したら，実験を実行してみてください。以下のように画面の左上に円が表示されます。