setup()とdraw()
p5.jsのシステムから最初に呼ばれる関数で、この関数を作ることが最初のステップとなります。ただし、preload()関数がある場合はその関数が終了するまで待っています。

setup()終了後、p5.jsのシステムから繰り返し呼ばれる関数。ここに様々な図形などを描画することでアニメーションが実現できる。
preload()関数は、処理に時間がかかることを行いたいときに使います。例えば、画像の読み込みなどは時間がかかるので、アニメーションを実行する前に読み込んでおく必要があります。setup()関数は、この処理が終了するまで待ってから実行されます。

基本構成のサンプルプログラムを作成しました。
実行結果はこうなります。

/* 基本的な構成 */
'use strict' ; // エラーを減らすために、必ず入れましょう。
/*
グローバル変数の定義
プログラム全体を通じて使う変数は個々で定義する
*/
let x=0, y=0, t, active;
let myImage;
// 配列も定義できる
let c=['red','blue','green','yellow','gray','silver','purple','navy'];
/*
setup 関数の定義
最初に一度だけ呼ばれる
*/
function setup(){
// キャンバスの作成　必須
createCanvas(400,400);
// カラーモードの指定、透明度を使うときは混乱を避けるため必要
colorMode(RGB,255,255,255,1);
// リフレシュレート1秒間にdraw()を何回呼ぶか（努力目標、最大60）
frameRate(30);
// その他、必要に応じて基本的な数値を設定
textSize(30); // 文字の大きさ
stroke('black'); // 線の色
strokeWeight(2); // 線の太さ
t = 10; // 楕円の横方向の直径
fill(c[0]); // 最初は赤で塗りつぶし
active = true; //
}
/*
draw()関数の定義
*/
function draw(){
background(240); // 背景は薄いグレー
image(myImage,mouseX-60,mouseY-60);
// 図形の表示
// tが大きくなると、縦長の楕円がだんだん横長に変化していく
ellipse(width/2,height/2,t,height-t);
t += 1;
// t（横方向の直径）が横幅より大きくなったら tを10にする
if ( t > width ) t=10;
}
/*
Event をつかまえる関数の定義
*/
// マウスがクリックされたら呼ばれる。
function mouseClicked(){
// フレームカウント（今までに表示したフレームの数、draw()が呼ばれた回数）
// 配列 c の長さの余りを計算し、それで色を指定
let a = frameCount % c.length ;
fill(c[a]);
console.log('色 ', c[a]); // コンソールに現在のフィルの色を表示
}
// マウスボタンが押されたとき呼ばれる
function mousePressed() {
noLoop();
active = false;
console.log('描画中？ ',active)
}
// マウスボタンが離されたとき呼ばれる
function mouseReleased() {
loop();
active = true;
console.log('描画中？ ',active)
}
// マウスがダブルクリックされたら呼ばれる。
function doubleClicked(){
if ( active ) {
noLoop(); // アニメーションの停止
active=false; // active も変更
console.log('描画中？ ',active)
} else {
loop(); // アニメーション開始
active = true; // active も変更
console.log('描画中？ ',active)
}
}
/*
preload()関数の定義
処理に時間がかかることを行う。
setup()関数は、この処理が終了するまで待っている
*/
function preload(){
// タイガーの画像を読み込む
//　画像の読み込みは時間がかかるので、preload()関数の中でおこなうこと
myImage = loadImage('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
}

mouseClicked()関数などは、イベントを参照してください。

Related