將橢圓的顏色記錄到文件 p5.js

Question

我想做一個簡單的項目，用戶必須在其中選擇在特定背景下看起來更好的文本顏色。 單擊正確的背景顏色后，我應該將顏色和相應的文本顏色（黑色為 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));
  }
}

這不起作用，我知道“填充”不應該像這樣工作，但我沒有關於我應該如何去做的任何線索。

提前致謝。

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
}