将椭圆的颜色记录到文件 p5.js

Question

我想做一个简单的项目，用户必须 select 哪种文本颜色在特定背景下看起来更好。单击正确的背景颜色后，我应该将颜色和相应的文本颜色（黑色为 0，白色为 1）记录到文件中。

这是我目前拥有的：

function setup(){
  createCanvas(1200, 600);
}
function draw(){
  background(51);
  fill(0);
  wBol = ellipse(300, 300, 350, 350);
  fill(0);
  bBol = ellipse(900, 300, 350, 350);
  textSize(64);
  fill(0);
  text('text', 250, 320);
  fill(255);
  text('text', 850, 320);
}

function mousePressed(){
  var d1 = dist(300, 300, mouseX, mouseY);
  var d2 = dist(900, 300, mouseX, mouseY);
  if(d1 <= 350/2){
    console.log(wBol.fill());
    wBol.fill(random(0,255), random(0,255), random(0,255));
    bBol.fill(random(0,255), random(0,255), random(0,255));
  }
  if(d2 <= 350/2){
    console.log(wBol.fill());
    wBol.fill(random(0,255), random(0,255), random(0,255));
    bBol.fill(random(0,255), random(0,255), random(0,255));
  }
}

这行不通，我知道 'fill' 不应该这样工作，但我不知道该如何处理。

提前致谢。

Answer 1

在 p5.js 中，椭圆（和其他形状）不是对象。 ellipse() 函数没有输出，它只是在屏幕上绘制一个椭圆。与 fill() 类似，该函数没有输出，它只是为您接下来绘制的内容设置填充颜色。所以如果你想保存填充颜色，你应该在另一个变量中进行。你可以这样做：

let wBol = { xpos: 300, ypos: 300, xwid: 350, ywid: 350, fill: 0};
let bBol = { xpos: 900, ypos: 300, xwid: 350, ywid: 350, fill: 0};

function draw() {
  background(51);
  fill(wBol.fill);
  ellipse(wBol.xpos, wBol.ypos, wBol.xwid, wBol.ywid);
  fill(bBol.fill);
  ellipse(bBol.xpos, bBol.ypos, bBol.xwid, bBol.ywid);
  //... the rest
}

将椭圆的颜色记录到文件 p5.js

Log the color of an ellipse to a file p5.js

javascript

p5.js