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

Question

我想从输入标签中获取数据并在方程式中使用它们。我尝试了很多解决方案，但没有任何效果。我希望它在单击一个按钮后开始设置，并在按下另一个按钮后开始动画。按下按钮1从html加载数据使用这些数据设置画布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草图。一步一步地工作，而不是一次全部尝试。