如何使用可以在 p5js 中消失和重新出现的点制作 2D 图案？

Question

我想做一个受吃豆人影响的时钟。 现在看起来像这样：
每列是小时（从 12 开始），每个点代表 2 分钟，每个收盘和开盘代表秒。

我希望这些点在吃豆人通过时消失，看起来像这样：
我的代码现在看起来像这样：

 let pm = { //pm stands for PacMan x: 0, y: 0, w: 50, h: 50, } let dot = { w: 6, h: 6 } let rectX = 0; function setup() { createCanvas(960, 800); angleMode(DEGREES); rectMode(CENTER); } function draw() { background(0); let hr = hour(); let mn = minute(); let sc = second(); scale(0.9); translate(10,50); let rectDist = width / 12; let XdotDist = width / 12; let YdotDist = height / 30; //ROUNDED RECTANGLES for (let i = 0; i <= width; i += rectDist) { noFill(); strokeWeight(2); stroke("#0000FF"); rect(i + 40, height / 2, 10, height - 20, 20); } //DOTS push(); translate(0, -10); noStroke(); for (let x = XdotDist; x <= width; x += XdotDist) { for (let y = YdotDist; y <= height; y += YdotDist) { fill(255); ellipse(x, y, dot.w, dot.h); } } pop(); //PAC-MAN ACTION YEAAAAH let mouth = map(sc, 0, 60, 0, 45); let minutePosition = map(mn, 0, 60, height, 0); let hourPosition = map(hr % 12, 0, 12, width, 0); noStroke(); fill("#FFFF00"); if (sc % 2 == 0) { mouth = 315; } else { mouth = 360; } push(); translate(hourPosition, minutePosition); //Puts PacMan at the correct position on the screen rotate(-90); //Points the PacMan upwards arc(pm.x, pm.y, pm.w, pm.h, -mouth, mouth, PIE); pop(); //PacMan Action finished //Temporary digital clock fill(255); //noStroke(); text(hr + ":" + mn + ":" + sc, width / 2, height / 2); }

有人能帮助我吗？

Answer 1

你只需要写一个简单的条件来找到它们相对于吃豆人位置的位置。 `

let minutePosition = map(mn, 0, 60, height, 0);
let hourPosition = map(hr % 12, 0, 12, width, 0);
//DOTS
push();
translate(0, -10);
noStroke();
for (let x = XdotDist; x <= width; x += XdotDist) {
    for (let y = YdotDist; y <= height; y += YdotDist) {
      if(x <= hourPosition || y < minutePosition){
        fill(255);
        ellipse(x, y, dot.w, dot.h);
      }
    }
}
pop();

`

Answer 2

一种方法是折磨编译器。

我的意思是，每次敲击钥匙并且包装工吃掉食物时，您都必须清除所有东西。

然后将除被吃掉的点之外的所有内容都渲染回来。