使用p5.js连接HTML输入页面 [英] Connecting the HTML input page with p5.js

问题描述

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

I want to get the data from input tags and use them in the equation. I have tried a lot a lot of solutions, nothing worked. I want it to start setup after click one button, and start animate after pressing the other button.

1. 按下button1
2. 从html加载数据
3. 使用这些数据设置画布
4. 永远执行draw().

1. press button1
2. load the data from the html
3. set up the canvas using those data
4. execute draw() for ever.

我没有找到太多文档.

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

推荐答案

此答案使用实例模式来创建一个画布，该画布的宽度和高度是根据用户输入设置的.这使我们可以在setup内部调用createCanvas().该代码仅允许我们创建一个画布，但修改它并不难，因此可以创建多个画布，但是，对于每个p5实例，我们都不应多次调用createCanvas.

This answer uses instance mode to create a canvas with width and height set from user inputs. This allows us to call createCanvas() inside of setup. The code only allows us to create one canvas but it would not be hard to modify so that multiply canvases could be created, however, we should never call createCanvas more than once for each instance of 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>

这篇关于使用p5.js连接HTML输入页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！