javascript - 将 HTML 输入页面与 p5.js 连接

Question

我想从输入标签获取数据并在方程中使用它们。我尝试了很多很多解决方案，但没有任何效果。我希望它在单击一个按钮后开始设置，并在按另一个按钮后开始动画。

1. 按下按钮1
2. 从 html 加载数据
3. 使用这些数据设置 Canvas
4. 永远执行draw()。

我没有找到太多文档。

这是我的 html:

<label class="col-lg-2" for="n4" id="m2">mass sq 2</label>
<input class=" col-lg-2" name="n4" type="number" id="m2" label="mass sq 2" />
<label class="col-lg-2" for="n5" id="r">Ratio</label>
<input class="ana col-lg-2" name="n5" type="number" id="r" label="Ratio" />
<button class="col-lg-2 btn btn-danger" style="margin-left: 10%; 
                        height:30px;"> <h3> change </h3> </button>

这是 p5.js 代码:

button1 = CreateButton('submit1');
button2 = CreateButton('submit2');

let digits = document.getElementById('m2').Value;
const timeSteps = 10 ** (digits - 1);
let m1 = document.getElementById('m1').Value;

function preload() {
  blockImg = loadImage('block.png');
  clack = loadSound('clack.wav');
}

function setup() {
  button2.mousePressed(start);
}

function draw() {
  button2.mousePressed(finish);
}

function start() {
  createCanvas(windowWidth, 200);
  block1 = new Block(100, 20, m1, 0, 0);
  const m2 = pow(100, digits - 1);
  block2 = new Block(300, 100, m2, -1 / timeSteps, 20);
  countDiv = createDiv(count);
  countDiv.style('font-size', '72pt');
}

Answer 1

此答案使用实例模式创建一个 Canvas ，其宽度和高度根据用户输入设置。这允许我们在setup内部调用createCanvas()。该代码只允许我们创建一个 Canvas ，但修改起来并不难，以便可以创建多个 Canvas ，但是，我们永远不应该为 p5 的每个实例多次调用 createCanvas 。

var canvas = null;
function createP5 (){
  let canvasWidth = document.getElementById("widthInput").value;
  let canvasHeight = document.getElementById("heightInput").value;
  if (canvas === null){
    canvas = new p5(function (p) {
      p.setup = function (){
        p.createCanvas(canvasWidth, canvasHeight);
      }
      p.draw = function(){
        p.background(55);
        p.stroke(0);
        p.rect(p.width/5, p.height/5, p.width/5 * 3, p.height/5 * 3);
     }
    }, "canvas-div");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<div id="canvas-div">
</div>
<input type="button" value="create canvas" onclick='createP5()'/>
<textarea id="widthInput"></textarea>
<textarea id="heightInput"></textarea>