Очистка текста, но сохранение существующей графики

Question

Я делаю этот случайный маленький набросок, где вы можете нажимать и бросать монеты, и в левом верхнем углу подсчитано, сколько у вас монет.

Проблема, с которой я сталкиваюсь, заключается в том, что когда вы запускаете при этом вы заметите, что ярлык суммы просто постоянно накладывается на себя при каждом обновлении. Я читал другие посты, в которых говорится, что нам нужно перерисовать фон, чтобы очистить текст, но когда я делаю это, он также удаляет все монеты, которые были сгенерированы на холсте. Как я могу обновить это, чтобы сохранить монеты видимыми, но удалить и перерисовать сумму?

var moneyCount = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
}

function draw() {
    if (mouseIsPressed){
        dropCoins();
        displayCount();
    }
}

function displayCount() {
    textSize(80);
    text('$' + moneyCount, 80, 80);
}

function dropCoins() {

    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(xLoc, yLoc, maxSize);
}

function makeStacks(x, y, size){

    fill(255,215,0);
    ellipse(x, y, size);

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        ellipse(x, y, size);
    }
}

Answer 1

У вас есть несколько вариантов:

1. Вы храните монеты там, где вы можете перерисовать их после очистки фона
2. Вы используете несколько «слоев», используя createGraphics() чтобы вы могли очистить фон, но не монеты PGraphics

Для варианта 1 вы можете сделать что-то вроде этого:

var moneyCount = 0;
var coins = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    textSize(80);
}

function draw() {
    background(100);
    if (mouseIsPressed){
        dropCoins();
    }
    displayCoins();
    displayCount();
}

function displayCount() {
    text('$' + moneyCount, 80, 80);
}

function dropCoins() {
    
    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(xLoc, yLoc, maxSize);
}

function makeStacks(x, y, size){

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        coins.push({x:x,y:y,size:size});
    }
}

function displayCoins(){
  fill(255,215,0);
  for(var i = 0 ; i < coins.length; i++){
    ellipse(coins[i].x,coins[i].y,coins[i].size);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Идея состоит в том, что вы бы инициализировали массив для хранения данных, необходимых для перерисовки монет (x, y и размер (если он варьируется)) , Имейте в виду, что чем больше монет вы добавите, тем больше памяти вы будете использовать. Если вам просто нужно визуализированное изображение и вам не нужны данные позиции монеты, вариант 2 будет более эффективным.

Для варианта 2 основная идея, как вы можете видеть в документации, заключается в том, что вы можете иметь еще один графический слой для рисования. После инициализации просто используйте понятие точки на экземпляре и используйте для него типичные вызовы рисования p5. Чтобы сделать это, используйте image()

Вот демонстрационная версия для опции PGraphics:

var moneyCount = 0;
var coinsLayer;

function setup() {
    createCanvas(windowWidth, windowHeight);
    textSize(80);
    coinsLayer = createGraphics(windowWidth, windowHeight);
}

function draw() {
    background(100);
    // render coins layer
    image(coinsLayer,0,0);
    if (mouseIsPressed){
        dropCoins(coinsLayer);
    }
    displayCount();
}

function displayCount() {
    text('$' + moneyCount, 80, 80);
}

function dropCoins(coinsLayer) {

    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(coinsLayer, xLoc, yLoc, maxSize);
}

function makeStacks(layer, x, y, size){

    layer.fill(255,215,0);
    layer.ellipse(x, y, size);

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        layer.ellipse(x, y, size);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>