Transparency

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(100);

  // We can add a fourth parameter (ALPHA) to our fill which will set the transparency

  //  value transparency

  //  0   completely transparent...can't see it

  //  128   half transparent...can see it, but also see through it

  //  255   opaque...see it completely, can't see through it at all

  // R=255, G=255, B=255, Alpha=255

  fill(255,255,255,255);  // White color, opaque

  rect(200,200,300,300);

  ////////// RED CIRCLES /////////////////////////////

  // R=255, G=0, B=0, Aplha = 255

  fill(255,0,0,255);    // red, opaque

  ellipse(200,200,100,100);

  // R=255, G=0, B=0, Aplha = 192

  fill(255,0,0,192);    // red, a little bit transparent

  ellipse(500,200,100,100);

  // R=255, G=0, B=0, Aplha = 128

  fill(255,0,0,128);    // red, half transparent

  ellipse(500,500,100,100);

  // R=255, G=0, B=0, Aplha = 64

  fill(255,0,0,64);   // red, mostly transparent

  ellipse(200,500,100,100);

  // R=255, G=0, B=0, Aplha = 0

  fill(255,0,0,0);    // red, completely transparent

  ellipse(350,350,100,100);   // in the center of the rectangle

​

}