今回からはp5.jsについて勉強していきます。
p5.jsとはJavaScriptのライブラリ（プログラミング言語の部品みたいな物）で、JavaScriptのできることを増やすことができます。
簡単なゲームとか作れます。
ただ、いきなりJavaScriptから描写すると書き方で苦戦する人がいると思うので、webブラウザから動かします。（JavaScriptから動かすのは今度します）
https://editor.p5js.org/
最初にこんなコードが書いてあるはずです。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}functionはJavaScriptの関数だということは解りますね？
setupは初めに読み込まれる関数です。
１回だけ読み込まれます。
drawは繰り返し実行されます。
createCanvasでキャンバスが描写されます。
左の数字が横の大きさ、右の数字が縦の大きさを指定しています。
backgroundは引数の数字で背景の明るさを指定しています。
左上の再生ボタンを押すと右に灰色の四角形が描写されるはずです。
この四角形の中にいろいろなものを描写していきます。
最初に丸を描写していきましょう。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(200, 200, 80, 80);
}これで四角の中に丸が描写されるはずです。
引数の解説をします。
一番左の数字が横の座標を指定します。
数字が大きければ大きいほど右にいきます。
二番目に左の数字が縦の座標を指定します。
数字が大きければ大きいほど上にいきます。
二番目に右の数字が横の直径を指定します。
数字が大きければ大きいほど縦に大きくなります。
一番右の数字が縦の直径を指定します。
数字が大きければ大きいほど縦に大きくなります。
ellipseのほかに描写できるものの一覧を下記に書きます。
xは横の座標を示しています。
yは縦の座標を示しています。
右にはそれぞれの座標の形を日本語で書いています。
triangleとquadのx,yはそれぞれの点を指定して描写します。
triangleは３点、quad４点が描写に必要です。
circle(中心のx座標, 中心のy座標, 直径) 円
rect(左上隅のx座標, 左上隅のy座標, x方向の長さ, y方向の長さ) 矩形
square(左上隅のx座標, 左上隅のy座標, 一辺の長さ) 正四角形
triangle(x1, y1, x2, y2, x3, y3) 三角形
quad(x1, y1, x2, y2, x3, y3, x4, y4) 四角形
line(始点のx座標, 始点のy座標, 終点のx座標, 終点のy座標) 線
色々描写してみましょう。
今回はここまで。
次回はもっと描写でできることを増やします。
コメント