Есть ли способ запустить p5.js только после события? - PullRequest
Новая
       22

Есть ли способ запустить p5.js только после события?

2 голосов
/ 18 июня 2019

Я хотел бы запускать функции 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, все содержат некоторый текст и Кнопка результата нажата. Как я могу это сделать?

Ответы [ 3 ]

2 голосов
/ 18 июня 2019

Для того, что вы хотите сделать, вы можете использовать инструкцию noLoop() и loop().
noLoop() останавливает p5.js от непрерывного выполнения draw() и loop() возобновляет его.

Добавьте инструкцию noLoop() к draw().Это приводит к остановке цикла после 1 выполнения. 

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

Добавление инструкции loop() к computeSelection(), что приводит к возобновлению цикла.noLoop() в розыгрыше остановит его снова после 1 выполнения: 

function computeSelection() {
    // [...]
    loop()
}
1 голос
/ 18 июня 2019

Другой подход заключается в использовании режима экземпляра .

Вы можете узнать больше здесь , но общий подход будет выглядеть так: 

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 экземпляра, пока не будете готовы.

0 голосов
/ 19 июня 2019

Я нашел другое решение для себя.В течение setup() я сделал: 

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

, чтобы установка выполнялась только при нажатии.

...