（P5js）试图将两个草图相互组合但一直失败

Question

我正在尝试制作最终草图，最终目标基本上是有一个输入框，在其中提交一个单词，然后逐个字母地获取单词的拼写。 我已经制作了两个草图，一个输入框和一个拼写，但我已经尝试了多次，我似乎无法将两个草图结合起来。 无论如何，这里的代码是值得的。

let input, button, visualization;
var img;

function setup() {
  // create canvas
  createCanvas(600 , 600);
  

  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);
  button.mousePressed(visualize);

  visualization = createElement('h2', 'Type a word to get its spelling');
  visualization.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

function visualize() {
  const word = input.value();
  visualization.html('This is the spelling of ' + word + '!');
  input.value('');
}

对于输入框。

var sourceText = 'word';
var curIndex = 0;
function setup() {
  createCanvas(400, 400);
  frameRate(3);
}
function draw() {
  background(50);
  fill(255);
  textSize(144);
  textAlign(CENTER, CENTER);
  text(
    sourceText.substring(curIndex, curIndex+1),
    width/2, height/2);
  curIndex++;
  if (curIndex > sourceText.length) {
    curIndex = 0;
  }
}

用于拼写可视化。

Answer 1

与其使用两个画布，不如创建图形缓冲区！ 下面的代码将只创建一个 canvas 具有两个width = canvas_width和height = canvas_height/2的缓冲区！ 这些缓冲区被绘制为图像对象！

另请注意，在设置 function 中，我使用noLoop来防止draw() function 每秒执行 60 次。 通过使用noLoop() ， draw() function 将只执行一次！ 当您使用 static 画布时，使用noLoop() function 是一种很好的做法。 在您的情况下，您希望输入位于 canvas 内部，因此您必须使用它来防止重新加载 canvas 并允许系统捕获您的输入。

带有按钮stop loop的矩形仅用于测试目的，您可以将其删除，或进行实验并了解它的工作原理！ 请记住draw() function 只调用一次，因此当程序执行时，矩形具有随机颜色。

现在， visualize() function 使用loop() function 使draw() function 默认以 60FPS 执行！ 这是必需的，因为您想在添加新字母后更新 canvas！ 您可以选择自己的算法来实现这一点，但这是解决问题的主要思想！ 这个 function 将使用setInterval() 和 clearInterval()并且它由代码顶部定义的毫秒控制！

PS：

• 实现时考虑大文本，因为它将 go 脱离 canvas。 您可以检查文本 position 是否大于 canvas_width 并防止这种情况发生（即将文本 position 重置为新行）
• 考虑无效输入
• 考虑在显示文本中未添加空格字符。 您可以使用\s来解决这个问题。
• ...和更多

 var topBuffer; var botttomBuffer; let input; let displayDiv; var secondsPerLetter = 1 * 1000; //1 second * 1000 milliseconds function setup() { noLoop(); //FPS = 0 (draw function is used once only after setup()) textAlign(CENTER); textSize(50); // create canvas and buffers const canvas = createCanvas(800, 600); topBuffer = createGraphics(width, height/2); botttomBuffer = createGraphics(width, height/2); // Draw on your buffers however you like drawTopBuffer(); drawBottomBuffer(); // Paint the off-screen buffers onto the main canvas image(topBuffer, 0, 0); image(botttomBuffer, 0, 300); } function draw(){ fill(random(255),random(255),random(255)) rect(width-100,height/2-100,100,100) } function drawTopBuffer() { topBuffer.background(200); topBuffer.fill(0); topBuffer.textSize(32); topBuffer.text("Input a word to be spelled:", 50, 50); input = createInput(); input.position(20, height/4-60); input.style("width","740px"); input.style("height","40px"); input.style("font-size","40px"); var button = createButton('submit'); button.position(20, 145); button.style("width","750px"); button.style("height","40px"); button.style("font-size","30px"); button.mousePressed(visualize); var button2 = createButton('Stop loop()'); button2.position(width-90, 240); button2.mousePressed(noLoop); } function drawBottomBuffer() { botttomBuffer.background(160); botttomBuffer.fill(0); botttomBuffer.textSize(32); botttomBuffer.text("Spelling word:", 50, 50); displayDiv = createElement("div"); displayDiv.id = "myDisplayDiv"; displayDiv.position(20, height/2+100); displayDiv.style("width", "10px"); displayDiv.style("height","500px"); displayDiv.style("font-size","40px"); displayDiv.style("display","inline-flex"); } function visualize() { loop(); var infoLabel = createElement('h2', 'You typed: \"' + input.value() + '\"'); infoLabel.position(20, 205); let str = input.value().split(''); const interval = setInterval(() => { var p = createElement("p", str[0] + " "); p.parent(displayDiv); str = str.slice(1); //Move to next letter if (.str;length) { clearInterval(interval); noLoop(), //STOP LOOP } }; secondsPerLetter); }

 html, body { margin: 0; padding: 0; } canvas { display: block; }

 <:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>