javascript - 在 p5js 中重置草图

Question

所以我在玩 p5js 并使球弹跳，同时在每次弹跳后失去动力。我希望能够在 30 秒或一分钟后让球复位。所以我基本上是在一分钟后重置草图，有人知道怎么做吗？我知道我必须使用 minute() 或 millis() 但不太明白。这是我的代码:

var py = 100 // postion y
var spd = 5 // speed
var gravity = 0.1

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


function draw() {
    background(0);
    fill('red');
    stroke('blue');
    ellipse(width/2, py, 25, 25);
    py = py + spd;
    spd = spd + gravity;

    if (py > 400 || py < 0) {
    spd = -0.95 * spd;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Answer 1

添加一个函数 (start)，它初始化参数并获取自启动草图 (start_time) 以来的毫秒数(千分之一秒) millis() .这是动画的开始时间:

let py, spd, gravity, start_time;

function start() {
    py = 100 // postion y
    spd = 5 // speed
    gravity = 0.1
    start_time = millis()
}

在setup()中调用start():

function setup() {
    createCanvas(400, 400);
    start();
}

在 draw() 中评估当前时间是否超过开始时间加上生成时间(在以下示例中为 10 秒。如果超过时间，则调用 start() 再次:

function draw() {

    // [...]

    let current_time = millis();
    let timespane = 10 * 1000; // 10 seconds
    if (current_time > start_time + timespane) {
        start();
    }
}

可选地，您也可以在按下某个键时重新启动该过程(例如 return):

function keyPressed() {
    if (keyCode == RETURN) {
        start();
    }
}

看例子:

let py, spd, gravity, start_time;

function start() {
    py = 100 // postion y
    spd = 5 // speed
    gravity = 0.1
    start_time = millis()
}

function setup() {
    createCanvas(400, 400);
    start();
}

function keyPressed() {
    if (keyCode == RETURN) {
        start();
    }
}

function draw() {
    background(0);
    fill('red');
    stroke('blue');
    ellipse(width/2, py, 25, 25);
    py = py + spd;
    spd = spd + gravity;

    if (py > 400 || py < 0) {
        spd = -0.95 * spd;
    }

    let current_time = millis();
    let timespane = 10 * 1000; // 10 seconds
    if (current_time > start_time + timespane) {
        start();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>