p5.playの基本

p5.playを利用するとどんな事が出来るのでしょうか?
その答えは、"公式サイト"にあります。

p5.play公式サイト

公式サイトの上部メニューにある"Demos"をクリックする事で、
サンプルプログラムを確認する事ができます。(眺めているだけでワクワクします!!)

左側にある"Demos"から、様々なサンプルを試す事ができます。

それともう1つ、"Docs"にはp5.playで使われている関数やパラメータ等の詳細情報を確認する事ができます。("辞書"の様に使います)

左側にあるメニューから"p5.play"に関数詳細情報を確認する事ができます。
p5.playに慣れると、こちらを参考にしながら開発を進めていく事になるでしょう。

p5.playの基本

p5.playを始めるにあたって、次の3つの関数を覚えておきましょう。
この3つの関数は、1,2,3の順番で実行されます。

function preload(){
   // 1, 画像や音声の読み込み
}

function setup(){
   // 2, キャンバスやスプライトの用意
}

function draw(){
   // 3, キャンバスの表示と更新
}

それぞれの関数には次の様な役割があるので覚えておきましょう。

  1. preload関数(画像や音声の読み込み)
  2. setup関数(キャンバスやスプライトの用意)
  3. draw関数(キャンバスの表示と更新)

手始めにsetup関数とdraw関数に必要な処理を実装してみます。
(preload関数にはここでは何も記述しません)

function preload(){

}

function setup(){
   createCanvas(windowWidth, windowHeight);// 1, キャンバスの用意
   frameRate(32);// 2, フレームレートの指定
   noSmooth();// 3, ドット絵が綺麗に
}

function draw(){
   background(0);// 4, 背景を黒に
}

実行すると、キャンバスは真っ黒な状態です。
ここまでは、p5.jsの記述方法と変わりませんね。

スプライトを表示する

スプライトを作る処理は次の様に記述します。

スプライト = new Sprite(x座標, y座標, 直径);

具体的に実装をするとこの様になります。

let sprA;// 1, スプライト変数

function preload(){

}

function setup(){
  createCanvas(windowWidth, windowHeight);
  frameRate(32);
  noSmooth();
  sprA = new Sprite(width/2, height/2, 64);// 2, スプライトを作る
  sprA.shapeColor = color("white");// 3, スプライトを白に
}

function draw(){
   background(0);
}

実行すると下記の様に、キャンバスの中央にスプライトが表示されます。

表示されるスプライトの色は自動で決まります。
自分で色を指定したい場合は、
スプライトのshapeColorにcolorオブジェクトを設定します。

スプライト.shapeColor = color(カラーネーム);

全体のコードは下記の様になります。

let sprA;// 1, スプライト変数

function preload(){

}

function setup(){
  createCanvas(windowWidth, windowHeight);
  frameRate(32);
  noSmooth();
  sprA = new Sprite(width/2, height/2, 64);// 2, スプライトを作る
  sprA.shapeColor = color("white");// 3, スプライトを白に
}

function draw(){
   background(0);
}

実行すると、スプライトの色が変化している事がわかると思います。

次回はアニメーションの適用方法についてのお話です。