有没有办法只运行 p5.js 一旦事件发生？

Question

我只想运行 p5.js draw() 和 setup() 函数，一旦三个输入字段都不为空并且单击了一个按钮。

function roundNumber(num, decimal_places) {
  if (!("" + num).includes("e")) {
    return +(Math.round(num + "e+" + decimal_places) + "e-" + decimal_places);
  } else {
    var arr = ("" + num).split("e");
    var sig = ""
    if (+arr[1] + scale > 0) {
      sig = "+";
    }
    return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + decimal_places)) + "e-" + decimal_places);
  }
} /* From  */

function computeSelection() {
  const expr = document.forms[0].mathExpr.value;
  var tempAns = parseFloat(eval(expr));
  var roundedAnswer = roundNumber(tempAns, 10);
  var answer = roundedAnswer;
  document.getElementById("output").textContent = answer;
}

function get_x_min_x_max() {
  const x_min = $("#x_min").value;
  const x_max = $("#x_max").value;
  var x_min_x_max = [x_min, x_max];
  return x_min_x_max;
}

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

function draw() {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <form>
    <label>Graph y=</label>
    <input id="mathExpr" type="text" name="mathExpr" value="">
    <label> from x=</label>
    <input id="x_min" type="text" name="x_min" value="">
    <label> to </label>
    <input id="x_max" type="text" name="x_max" value="">
    <input type="button" name="result" value="Result" onclick="computeSelection();">
  </form>
  <h2>Answer: <span id="output"></span></h2>
</body>

如果这是我的代码，我只希望js代码底部的绘制和设置为运行一次mathExpr、x_min和x_max全部包含 some 文本并单击结果按钮。我该怎么做？

Answer 1

对于您想做的事情，您可以使用 noLoop() and loop() 指令。
noLoop() 停止 p5.js 连续执行 draw() 并且 loop() 恢复它。

向draw()添加noLoop()指令。这导致循环在执行 1 次后停止。

function draw() {
    noLoop()
    // [...]
}

将 loop() 指令添加到 computeSelection() 这会导致循环恢复。 draw中的noLoop()会在执行1次后再次停止：

function computeSelection() {
    // [...]
    loop()
}

Answer 2

另一种方法是使用实例模式。

您可以了解更多信息 here，但一般方法如下所示：

const s = ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

let myp5 = new p5(s);

使用这种方法，您可以在准备好之前推迟创建 p5 实例。

Answer 3

我为自己找到了另一个解决方案。在 setup() 我做了：

$(document).ready(function() {
  document.forms[0].result.click(function() {
    createCanvas(300, 300);
    // Other code in here
  });
});

这样安装程序只会在点击时运行。

Answer 4

例如，如果您需要在单击按钮时启动草图，请公开函数 startSketch() 并将其添加为 onClick 事件。

noLoop() 不会阻止 draw() 函数执行一次，但您可以这样解决：

let firstIteration = true;

function startSketch() {
  loop()
}

function setup() {
  // other setup you might want to load
  noLoop();
}

function draw() {
  if (firstIteration) {
    firstIteration = false;
    return;
  }
}

有没有办法只运行 p5.js 一旦事件发生？

Is there a way to only run p5.js once an event happens?

javascript

processing

function

p5.js

有没有办法只 运行 p5.js 一旦事件发生？

Is there a way to only run p5.js once an event happens?

javascript

processing

function

p5.js

有没有办法只运行 p5.js 一旦事件发生？