setup()とdraw()

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

setup()終了後、p5.jsのシステムから繰り返し呼ばれる関数。ここに様々な図形などを描画することでアニメーションが実現できる。

preload()関数は、処理に時間がかかることを行いたいときに使います。例えば、画像の読み込みなどは時間がかかるので、アニメーションを実行する前に読み込んでおく必要があります。setup()関数は、この処理が終了するまで待ってから実行されます。

基本構成のサンプルプログラムを作成しました。

code:test01.js

/* 基本的な構成 */

'use strict' ; // エラーを減らすために、必ず入れましょう。

/*

グローバル変数の定義

プログラム全体を通じて使う変数は個々で定義する

*/

let x=0, y=0, t, active;

let myImage;

// 配列も定義できる

/*

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; // 楕円の横方向の直径

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 ;

}

// マウスボタンが押されたとき呼ばれる

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()関数の中でおこなうこと

}