プログラムの構造

// プログラムが開始するとき一度だけ実行
function setup(){
  createCanvas(800,600);
}

// setupが実行された後，継続して実行
function draw(){
  // レンダリングのループ
}

システム変数

windowWidth / windowHeight
//ウィンドウの 幅 / 高さ

width / height
//キャンバスの 幅 / 高さ

mouseX / mouseY
//現在の 水平(X方向) / 垂直(Y方向)のマウス位置

テキストでのフィードバック

print(something);
//コンソールにデータを出力して表示

色

fill(120); //グレースケール:0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //文字列で色を指定
fill('#ccc'); //3桁のHex
fill('#222222'); //6桁のHex
color(0, 0, 255); //p5.Colorオブジェクト

数値計算

+ - / *

random(low,high);

map(value, in1, in2, out1, out2);
//入力値の範囲にある値を出力値の範囲にマッピングする

2Dのプリミティブ図形

line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  // 頂点の追加
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);

• グリッドシステム

• line()

• ellipse()

• rect()

• arc()

• vertex()

属性

background(color);
//背景色を設定

fill(color);
//塗りつぶしの色を設定

noFill();
//塗りつぶしを無効

stroke(color);
//線の色を設定

strokeWeight(weight);
//線の太さを設定

noStroke();
//線を無効

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);

条件分岐

if(test){
  //statements
}

=== 等しい
!== 等しくない
>  より大きい
<  より小さい
>= 以上
<= 以下