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

Question

我想制作一个受 PacMan 影响的时钟。现在看起来像这样：
每列是小时（从 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

一种方法是折磨编译器。

我的意思是你必须在每次按下键并且 packman 吃掉食物时清除所有东西。

然后渲染所有东西，除了被吃掉的点。

Answer 2

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

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

`

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

How can I make a 2D pattern with dots that can dissapear and reappear in p5js?

javascript

arrays

multidimensional-array

p5.js