在 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)，它初始化参数并获取自 millis() 启动草图 (start_time) 以来的毫秒数（千分之一秒）。这是动画的开始时间：

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>