如何将文本添加到 P5.js视觉对象?(在特定时刻出现/消失)

Question

我正在寻找添加文本(出现在乞求中，在矩形的黑色部分内，并在白色滑入时消失，然后当黑色再次超过粉红色时重新出现) 居中，2 行文本，共 3 个单词(例如)

Project One
Diary

我以前没有在 P5 中使用文本的经验，但在线浏览教程，我找不到它出现在序列开头然后不久消失的示例。 任何包含字体也会有所帮助，因为我将尝试一些！

var rectWidth = 1000;
var rectHeight = 600;
var colourlapse;
var rx = 60;
var ry = 60;
var inc = 0.005;

let colors = [[0, 0, 0], [255, 255, 255], [255, 9, 236]]
let cur_col1 = 1;
let cur_col2 = 0;
function setup() {
frameRate(49);
createCanvas(1100, 1100);
colourlapse = 0.0;
}
function draw() {
var w = colourlapse * rectWidth;
var sx1 = (inc > 0) ? rx : rx + rectWidth - w;
var sx2 = (inc > 0) ? rx + w : rx;
background(255);
stroke(255);
fill(0);
fill(...colors[cur_col1 % colors.length]);
rect(sx1, ry, w, rectHeight);
fill(...colors[cur_col2 % colors.length]);
rect(sx2, ry, rectWidth-w, rectHeight);
colourlapse += inc;
if (colourlapse >= 1) {
colourlapse = 1;
inc *= -1;
cur_col2 += 2;
} else if (colourlapse <= 0) {
colourlapse = 0;
inc *= -1;
cur_col1 += 2;
}
}

Answer 1

您可以查看text()函数，只需将要显示的字符的文本字符串以及要显示文本的 x，y 坐标传递到该函数即可。

如何更改填充颜色和文本坐标以达到您想要实现的效果取决于您。

下面是一个基于您的代码的非常粗略的示例：

var rectWidth = 1000;
var rectHeight = 600;
var colourlapse;
var rx = 60;
var ry = 60;
var inc = 0.005;
let colors = [[0, 0, 0], [255, 255, 255], [255, 9, 236]]
let cur_col1 = 1;
let cur_col2 = 0;
let textContents = ["text number one","text number two","text number three"];
function setup() {
frameRate(49);
createCanvas(1100, 1100);
colourlapse = 0.0;
}
function draw() {
var w = colourlapse * rectWidth;
var sx1 = (inc > 0) ? rx : rx + rectWidth - w;
var sx2 = (inc > 0) ? rx + w : rx;
background(255);
stroke(255);
let index1 = cur_col1 % colors.length;
let index2 = cur_col2 % colors.length;
fill(colors[index1]);
rect(sx1, ry, w, rectHeight);
// text
fill(127);
text(textContents[index1],sx2,ry);

fill(colors[cur_col2 % colors.length]);
rect(sx2, ry, rectWidth-w, rectHeight);
colourlapse += inc;
if (colourlapse >= 1) {
colourlapse = 1;
inc *= -1;
cur_col2 += 2;
} else if (colourlapse <= 0) {
colourlapse = 0;
inc *= -1;
cur_col1 += 2;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>