将 HTML 输入页面与 p5.js 连接起来

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 草图？

为此，您可能希望使用 实例模式 来更好地控制草图的创建时间。有关详细信息，请参阅 this page。

我能给你的最好建议是start smaller。从一个简单的页面开始，该页面显示一个按钮，当您单击它时，它会向控制台打印一些内容。然后使用实例模式添加一个简单的 P5.js 草图。小步前进，而不是试图一次完成所有事情。

祝你好运。

Answer 2

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

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>

将 HTML 输入页面与 p5.js 连接起来

Connecting the HTML input page with p5.js

javascript

jquery

p5.js