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

Question

I want to make a PacMan influenced clock. It looks now like this:
Each column is the hour (starting from 12 somehow), each dot represents 2 Minutes and each closing and opening represents the seconds.

I want that the dots dissapear if PacMan passed them so that it looks like this:
My code looks at the moment like this:

 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); }

Can someone help me please?

Answer 1

You just need to write a simple condition to find their position relative to the pacman's position. `

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

One way to do is to torture the compiler.

I mean you have to wipe out every thing every time a key has hit and the packman has eaten the food.

Then render everything back except the dot which has been eaten.