How to reset the background of a Graphic completely (every pixel should be 100% transparent)?

Last_Hero

Hi everyone! I need to clear a graphic (createGraphics) in p5, what should i use?

if i use background(0), the graphic will be cleared, however the pixels will be still black, and thats not good beacuase i am using multiple graphics and their background has to be transparent

i tried using clear() but it looks like its not working on a graphic in p5 only in processing :(

any help would be appreciate!

kfrajer

This is my attempt. I think it is easier using an image object. There could be a better way? I let forum goers provide feedback. Relevant code in generatePG().

Kf

var img;
var pg;
var showOff;
function preload() {
  img = loadImage("/static/uploaded_resources/p.23038/figSmall.jpg");
}
function setup() {
  createCanvas(400, 400);
  showOff=false;
}

function draw() {

  image(img, 0, 0, 400, 400);
  var d = pixelDensity();
  var halfImage = 4 * (img.width * d) *(img.height/2 * d);

  loadPixels();
  for (var i = 0; i < halfImage; i++) {
    pixels[i+halfImage] = 0x0;//pixels[i];
  }
  updatePixels();

  text("Below "+showOff, width/2, height*0.85);
  generatePG(showOff);
}

function mousePressed() {
  showOff=!showOff;
}

function generatePG(show) {
  let val=0;
  if (show)
    val=255;
  pg = createGraphics(200, 200);
  pg.background(0, val);
  pg.noStroke();
  pg.fill(255, val);
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  image(pg, 50, 50);
}

marzinp

Use pg.clear(); pg.background(0,0);