使用p5.js连接HTML输入页面

Question

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

1. 按下按钮1

2. 从html加载数据

3. 使用这些数据设置画布

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

您在问几个不同的问题：用户按下按钮时如何运行代码？有几种方法可以执行此操作，但是听起来您正在寻找onclick属性。您可以通过Google“ JavaScript onclick”获得大量资源。如何从JavaScript代码运行P5.js草图？为此，您可能希望使用实例模式来更精确地控制草图的创建时间。请参阅此页面以获取更多信息。我能给你的最好的建议是从小做起。从一个简单的页面开始，该页面显示一个按钮，单击该按钮可以在控制台上打印一些内容。然后使用实例模式添加一个简单的P5.js草图。一步一步地工作，而不是一次全部尝试。