制御関数

初期設定

setup

setup関数は初期設定を行う関数で、一度だけ実行されます。
主にキャンバスの生成や変数の初期化を行います。
次のsampleでは、キャンバスの生成とスライダー、変数の初期化を行っています。

sample


var slider;
var ballInit;
function setup(){
  createCanvas(200, 200);
  slider = createSlider(0, 100, 50);
  slider.position(10, 220);
  ballInit = [random(width, height)];
}

preload

preload関数は、setup関数より先に一度だけ実行され、外部データのロードを行うために使います。
loadJSON, loadImageなどのロード系関数はpreload内に記述します。

sample


var slider;
var ballInit;
var imgURL = "assets/sample.jpg"
var img;

function preload(){
   img = loadImage(imgURL);
}

function setup(){
  createCanvas(200, 200);
}

アニメーション

draw

draw関数は、setup実行後1秒間に60回のレートで繰り返し実行されます。
実行毎に変化するようにプログラムを書けばアニメーションとなります。
1秒間に実行する回数はframeRate関数で変更することができます。

sample


function setup(){
  createCanvas(100,100);
}
function draw(){
  background(255);
  text(str(frameCount), 30, 50);
  if(frameCount > 1000){
    noLoop();
  }
}

noLoop

noLoop関数はdraw関数の繰り返し実行を止める関数です。
setup関数またはdraw関数に書くと、一度だけdraw関数が実行されます。
サンプルはdraw関数のsampleを参照してください。

loop

noLoopで止めたアニメーションを再開することができます。

sample


function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}
  
function draw() {
  background(200);
  text(str(frameCount), 50, 80);
}

// マウスの左ボタンが押されてるとき実行
function mousePressed() {
  loop();
}

//マウスの左ボタン押されなくなったとき実行
function mouseReleased() {
  noLoop();
}

redraw

noLoopでアニメーションが止まっているとき、redrawを実行すると、一度だけdraw関数が実行されます。

sample


function setup() {
  createCanvas(100, 100);
  noLoop();
}
  
function draw() {
  background(200);
  text(str(frameCount), 50, 80);
}
  
function mousePressed() {
  redraw();  
}

設定保存関数

push, pop

push関数は現在の色やモード設定などの設定情報を保存し、pop関数は保存しておいた設定情報を復元します。
push以降で変更された設定情報は一時的なものとなり、popで変更はなかったことになります。
translateやrotateで図形を移動回転させるときに使うと、移動回転させる対象を限定することができます。

push,popを使わないsample


function setup() {
  createCanvas(100, 100);
  background(255);
  noLoop();
}
  
function draw() {
  fill(0);
  rect(10,10,50,50,);
  fill(200);
  ellipse(70,50,60);
  triangle(50,50, 100,100,20,100);
}

push,popを使うsample


function setup() {
  createCanvas(100, 100);
  background(255);
  noLoop();
}
  
function draw() {
  fill(0);
  rect(10,10,50,50,);
  push();
  fill(200);
  ellipse(70,50,60);
  pop();
  triangle(50,50, 100,100,20,100);
}

push,popを使ったので、fill(200)は一時的な変更となった