let transparency = 0;

let alpha = 100;

let showGhost = true;

const alphaChange = 3;

let lastKey;

​

// whether the ghost should be shown or not

let ghostShowState = [false, false, false];

// alphas on the ghost covers 

// 100 = obscured, 0 = transparent

let showAlpha = [100, 100, 100];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  ghostColor = color(255, 204, 0);

}

​

function createCircles() {

  ellipse(50,50,80,80); //ghost0

  ellipse(200,100,100,100); //ghost1

  ellipse(350,50,80,80); //ghost2

}

​

function keyPressed() {

  // TODO: convert to turn 1-3 keypresses into on/off

  if (keyCode === 49) {

    ghostShowState[0] = !ghostShowState[0];

  }

  if (keyCode === 50) {

    ghostShowState[1] = !ghostShowState[1];

  }

  if (keyCode === 51) {

    ghostShowState[2] = !ghostShowState[2];

  }

​

  lastKey = keyCode;

}

​

function draw() {

  background(color(220, 220, 220));

  fill(ghostColor);

  noStroke();

  createCircles();

  handleGhosts();

  handleCovers();

  textSize(32);

  fill('black');

  text('key pressed: ' + String.fromCharCode(lastKey), 20, 250);

}

​

function handleGhosts() {

  // for each of the ghosts: 

  // handle show state 

  for (i = 0; i < 3; i++) {

    handleShowState(i);

  }

}

​

function handleShowState(num) {

  currentAlpha = showAlpha[num];

  if (ghostShowState[num]) {

    if (currentAlpha > 0) {

      currentAlpha -= alphaChange; //slowly fade out

    }

  } else {

    if (currentAlpha < 255) {

      currentAlpha += alphaChange; //slowly fade in

    }

  }

  showAlpha[num] = Math.min(255, Math.max(0, currentAlpha)); //clamp to 0-255

}

​

function handleCovers() {

  coverColor = color(220, 220, 220, showAlpha[0]);

  fill(coverColor);

  rect(0, 0, 100, 100);

  coverColor = color(220, 220, 220, showAlpha[1]);

  fill(coverColor);

  rect(150, 50, 100, 100);

  coverColor = color(220, 220, 220, showAlpha[2]);

  fill(coverColor);

  rect(310, 10, 80, 80);

}