如何向 P5.js 视觉对象添加文本？（在特定时刻 appear/disappear）

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>

如何向 P5.js 视觉对象添加文本？（在特定时刻 appear/disappear）

How to add text to P5.js visual? (to appear/disappear at specific moments)

javascript

text

p5.js

如何向 P5.js 视觉对象添加文本？ （在特定时刻 appear/disappear）

How to add text to P5.js visual? (to appear/disappear at specific moments)

javascript

text

p5.js

如何向 P5.js 视觉对象添加文本？（在特定时刻 appear/disappear）