p5js语言和html语言,使用p5.js连接HTML输入页面

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

从html加载数据

使用这些数据设置画布

draw()永远执行。

我没有找到太多文档。

这是我的html：

mass sq 2

Ratio

change

这是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');

}