How to erase object's trail without 'background' in function draw

p5.js Coding Questions
1

Hello!
I’ve just started learning p5js coding!
Is there any way to erase trail, but without ‘background’?
I’m trying to make a scanning line that will make sounds when it collapses with ellipse.
If I use the background, the ellipses I make by dragging will disappear😭
I’ve tried using Pgraphics, but somehow this won’t work.

I know my coding has lots of problems and fixing to do.
But I hope to solve only this problem for now.
Thankyou!



let trace =[];

let x = 0;
let graphics;
//

var notes = [60, 62, 64, 50, 67, 69, 71]; 

var osc;



function setup() {
  createCanvas(400, 400); 
  graphics = createGraphics(10,400);
  graphics.background(0);

  
colorpalette=[ color(255,0,0), color(0,255,0), color(0,0,255) ]; 

  
  // A triangle oscillator
  osc = new p5.TriOsc();
  // Start silent
  osc.start();
  osc.amp(0);
}


function draw() {
  
  graphics.fill(0);
  graphics.rect(0,0,64);
  image(graphics,x,0);
  x++;

  
  if (mouseIsPressed) {
  trace.push(new ccolor(colorpalette[int(random(colorpalette.length))]));
  
  for(var i=0;i<trace.length;++i){
    trace[i].display(); 
  }
   
  }
  
  
}


function playNote(note, duration) {
  osc.freq(midiToFreq(note));
  // Fade it in
  osc.fade(0.5,0.2);

  // If we sest a duration, fade it out
  if (duration) {
    setTimeout(function() {
      osc.fade(0,0.2);
    }, duration-50);
  }
}




function keyPressed() {
  background(255);//canvas clear
}


function mousePressed() {
  // Map mouse to the key index
    
  var key = floor(map(mouseX, 0, width, 0, notes.length));
  playNote(notes[key]);
  
}

// Fade it out when we release
function mouseReleased() {
  osc.fade(0,0.5);
}



class ccolor{
  
  constructor(cIn){ 
  this.x = mouseX; 
  this.y = mouseY; 
  this.diameter = ((pmouseX-mouseX)+(pmouseY-mouseY));
  this.c=cIn;
  
}
  

  display(){
  fill(this.c); 
  ellipse(this.x,this.y, this.diameter+10*sin(frameCount*0.01),this.diameter);
 
}
}
2

This tutorial video by The Coding Train answers your question. In it two canvases are created and placed on top of each other, where one is drawn on while the other remains untouched. Enjoy!

2 Likes