javascript - Reset sketch in p5js

Question

so i'm playing around with p5js and made a ball bounce while at the same time lose momentum after each bounce. I want to be able to make the ball reset after 30 seconds or a minute has passed. So i'm basically resetting the sketch after a minute, does anyone how to go about that? i know i have to use minute() or millis() but can't quite figure it out. Here's my code:

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>

标签： javascriptprocessingresetp5.js

Answer 1

添加一个函数 ( )，该函数初始化参数并获取自草图 ( )start开始以来的毫秒数（千分之一秒）。这是动画的开始时间：start_timemillis()

let py, spd, gravity, start_time;

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

来电：start()_setup()

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>