このチャプターの目次
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, キャンバスの表示と更新
}
それぞれの関数には次の様な役割があるので覚えておきましょう。
- preload関数(画像や音声の読み込み)
- setup関数(キャンバスやスプライトの用意)
- 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);
}
実行すると、スプライトの色が変化している事がわかると思います。
次回はアニメーションの適用方法についてのお話です。