Question

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

按下button1
从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

此答案使用实例模式创建一个画布，该画布的宽度和高度由用户输入设置。这使我们可以在createCanvas()内部调用setup。该代码仅允许我们创建一个画布，但修改起来并不难，因此可以创建多个画布，但是，对于每个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>

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

2 个答案: