(P5js)试图将两个草图结合在一起，但一直失败

我正在尝试制作一个最终的草图，最终目标基本上是有一个输入框，在其中提交一个单词，并逐个字母地获得单词的拼写。我做了两个草图，一个是输入框，另一个是拼写框，但我试了很多次，似乎无法将两个草图组合在一起。值得一提的是，这里有代码。

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

用于拼写可视化。

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

另外请注意，在设置函数中，我使用noLoop，它可以防止draw()函数每秒执行60次。通过使用noLoop((，draw()函数将只执行一次！使用静态画布时，最好使用noLoop()函数。在您的情况下，您希望输入位于画布内，因此必须使用此选项来防止在画布上重新加载，并允许系统捕获您的输入。

带有按钮stop loop的矩形仅用于测试目的！你可以移除它，或者进行实验并了解它是如何工作的！请记住，draw()函数只调用一次，因此在执行程序时，矩形具有随机颜色。

现在，visualize()函数使用loop((函数，默认情况下，该函数可以在60FPS上执行draw()函数！这是必需的，因为您希望在添加新信件后更新画布！你可以选择自己的算法来实现这一点，但这是如何解决你的问题的主要思想！此函数将使用setInterval((&clearInterval((，它由代码顶部定义的毫秒控制！

PS:

在实现此功能时，请考虑使用大文本，因为它将脱离画布。您可以检查文本位置是否大于canvas_width并防止这种情况发生(即将文本位置重置为新行(
考虑无效输入
请考虑在显示文本中没有添加空格字符。您可以使用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>

相关内容

最新更新

热门标签：