Clearing text but keeping existing graphics

Question

I am making this random little sketch where you can click and drop coins and there is a count of how many coins you have in the top left.

The problem I am running into is, whenever you run this you will notice that the amount label just continuously stacks on top of itself whenever it updates. I have read other posts that say that we need to redraw the background to clear the text but when I do this, it also removes any coins that have been generated on the canvas. How can I update this to keep the coins visible but remove and redraw the amount?

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

You have a couple of options available:

1. You store where the coins are so you can redraw them after you clear the background
2. You use multiple "layers" using createGraphics() so you can clear the background, but not the coins PGraphics

For option 1 you can do something like this:

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>

The idea is you would initialise an array to store the data you would need to redraw the coins (x,y, and size (if it varies)). Bare in mind the more coins you'd add, the more memory you'd use. If you simply need the rendered image and don't need the coin position data, option 2 will be more efficient.

For option 2 the main idea, as you can see in the documentation, is that you can have another graphics layer to draw into. Once initialised simply use dot notion on the instance and use the typical p5 drawing calls on it. To render it use image()

Here's a demo for the PGraphics option:

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>