How to show permanent afterimage effect in P5.js?

Question

I'm making a new painting app for an assignment. What I want for result is that if a user pressed mouse buttons, then white cream is put on the background images and shapes as permanent afterimage effect, following the movement of the mouse. However when I pressed the mouse buttons, the background images came out as I intended, but the ones with the white cream didn’t work at all.

My current code is:

function setup() {
  createCanvas(600,600);
  frameRate(100);
}

function draw() {
  background(80,30,0);
  var size1 = 500;
  fill(255);
  noStroke();
  ellipse(300, 300, size1, size1);

  var size2 = 450;
  fill(255,217,102);
  noStroke();
  ellipse(300, 300, size2, size2);

  if (mouseIsPressed) {
     fill(255,255,255);
     noStroke();
     triangle(mouseX,mouseY-28,mouseX-24,mouseY+16,mouseX+24,mouseY+16);

     fill(255,255,255);
     stroke(121,67,21);
     strokeWeight(0.1);
     triangle(mouseX-24,mouseY-16,mouseX+24,mouseY-16,mouseX,mouseY+28);
  }
}

I don’t know what the problem is, and how to solve it. Could you help me out? Thank you.

P5.js link of this app is here : https://editor.p5js.org/jwyoon100/full/Kd4JRk87f

Answer 1

You need to move all the background images code into the setup() function, like this:

function setup() {

  createCanvas(600,600);
  frameRate(100);
    
  background(80,30,0);
  var size1 = 500;
  fill(255);
  noStroke();
  ellipse(300, 300, size1, size1);

  var size2 = 450;
  fill(255,217,102);
  noStroke();
  ellipse(300, 300, size2, size2);

}

function draw() {

  if (mouseIsPressed) {
     fill(255,255,255);
     noStroke();
     triangle(mouseX,mouseY-28,mouseX-24,mouseY+16,mouseX+24,mouseY+16);

     fill(255,255,255);
     stroke(121,67,21);
     strokeWeight(0.1);
     triangle(mouseX-24,mouseY-16,mouseX+24,mouseY-16,mouseX,mouseY+28);
  }
    
}