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 https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary */

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()和loop()指令。
noLoop()阻止p5.js继续执行draw()，loop()继续执行。

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

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

向loop()添加computeSelection()指令，这将导致循环恢复。抽签中的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？

4 个答案: