时间戳

首页 > 解决方案 > 用 p5.js 连接 HTML 输入页面

javascript - 用 p5.js 连接 HTML 输入页面

问题描述

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

  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');
}

标签： javascriptjqueryp5.js

解决方案

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

推荐阅读