7_5：タイマー p5.js JavaScript

すべてのp5.jsプログラムは、スタートしてから経過した時間量をミリ秒単位で数えます(1ミリ秒は1/1000秒)。このカウンタを使用すると、ある特定のタイミングでアニメーションを引き起こすことができます。millis()関数はこのカウンタ値を返します。

millis()

説明

プログラムがスタートしてからのミリ秒数を返す(1ミリ秒は1/1000秒)。この情報は通常、タイミングイベントやアニメーションシーケンスで使用される。

シンタックス

millis()

予定された出来事を引き起こす

millis()からの値をifブロックと合わせて使用すると、プログラムのアニメーションや出来事を連続させることができます。次の例では、time1時間が経過すると円を右に、その後time2時間が経過すると円を右に移動させています。

const time1 = 2000;
const time2 = 4000;
let x = 0;

function setup() {
    createCanvas(480, 120);
}

function draw() {
    const currentTime = millis();
    background(204);
    if (currentTime > time2) {
        print('time2を過ぎた');
        x -= 0.5;
    }
    else if (currentTime > time1) {
        print('time1を過ぎた');
        x += 2;
    }
    ellipse(x, 60, 90, 90);
}

タイマー

文字通り、経過時間を秒数で示すタイマーの例です。

// 開始時間値
let startTime;
// 1秒
const oneSec = 1000;
// 経過時間値
let elapsedTime = 0;
// 秒数をカウント
let count = 0;
let p;

function setup() {
    createCanvas(240, 120);
    // 開始時間値を得る
    startTime = millis();
    textSize(30);
    textAlign(RIGHT);
    stroke(255)
    background(204);
    p = createP();
}

function draw() {
    background(204);
    // 経過秒数を表示するテキストを描画
    text(count + '秒経過', 170, 70);
    // 現在時間値
    const now = millis();
    // 経過時間値
    elapsedTime = now - startTime;
    // 1秒たったら
    if (elapsedTime >= oneSec) {
        // 秒数を1つ大きくする
        count++;
        // 再びスタート
        startTime = millis();
    }
}