使用 p5js 循环 gif n 次

问题描述

我正在尝试构建一个简单的交互，用户输入两个数字，让 gif 循环的次数等于这些数字的总和，然后在第一帧上冻结 gif（可以选择重置）过程）。我想我已经想出了如何在 p5 中完成所有这些，除了 gif 循环。

有没有办法在 p5js 中控制 gif 的循环？有没有更好的方法来完成这项任务？如果这是一种更明智的方法，那么动画精灵或其他东西将在很大程度上实现相同的目标。

谢谢！

let input,button,greeting;

function setup() {
  // create canvas
  createCanvas(710,400);

  //creates the first value input Box
  input1 = createinput();
  input1.position(20,65);
  
  //creates the second value input Box
  input2 = createinput();
  input2.position(200,65);

  //creates the 'go' button
  go_button = createButton('calculate');
  go_button.position(input2.x + input2.width,65);
  //pressing the button triggers the greet() function
  go_button.mousepressed(greet);
  
  //creates the reset button
  reset_button = createButton('reset');
  reset_button.position(20,height - 30);
  //immediately hides it 
  reset_button.hide();
  //press the button and reset the screen
  reset_button.mousepressed(reset);
  

  //initial text
  greeting = createElement('h2','what numbers do you want to add?');
  greeting.position(20,5);

  textAlign(CENTER);
  textSize(50);
}

function greet() {
  //hides the inputs and the go button
  input1.hide();
  input2.hide();
  go_button.hide();
  
  //does the math
  const total = input1.value() + input2.value();
  //updates the text
  greeting.html('hello ' + total + '!');
  
  //resets the input values for next time
  input1.value('');
  input2.value('');
  
  //reveal the reset button
  reset_button.show();
  

  //just a thing to show the total
  for (let i = 0; i < 200; i++) {
    push();
    fill(random(255),255,255);
    translate(random(width),random(height));
    rotate(random(2 * PI));
    text(total,0);
    pop();
  }
}

function reset() {
  //hides the old stuff
  rect(-1,-1,width+5,height+5);
  
  //shows the inputs and the go button
  input1.show();
  input2.show();
  go_button.show();
  
  //hides the reset button
  reset_button.hide();
  
  //updates the text
  greeting.html('what numbers do you want to add?');  
  
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）