Hi, first time posting here. Hope I'm in the right section. I'm currently developing a very simple interactive animation that could be easily turned into a game once I'm done with the basic structures. The main characters is a candle in a bird eye view of a dungeon jail.

What i want to learn how to do is to create a black overlay of the entire screen and have 3 or 5 ellipse connected to the mouse subtract from this black ovenrlay to give the illusion of the candle lighting up the room which is a background image.

I will be using some collision detections and arrays to create creatures (a simple black ellipse with eyes) that is afraid of the candle and would skirts the edge of the lights cast from the candle.

One of my concerns is that I do not understand how collision detection, arrays (producing multiple creatures, each with own seperate movements), and alpha overlay. I hope that maybe some of you could point me to a good guide on these three particular items because I seems to be a little confused in general by the stuff I've found online so far. I could see how I can use the codes provided but I do not know HOW it works so I can use the code properly.

Here is the beginning of my code so far. This consist of only the candle and the room's outline (I have a roughtly drawn room to be scanned and uploaded into the background later on).

void setup() {
  size(500,500);
  colorMode(RGB);
  smooth();
  noCursor();
}

void draw() {
  background(255);
  stroke(0);
  rect(50,50, 400, 400);
  line(0, 0, 50, 50);
  line(500, 0, 450, 50);
  line(0, 500, 50, 450);
  line(500, 500, 450, 450);
  fill(255, 0, 0);
  ellipse( mouseX + random(3), mouseY + random(3), 30, 30 );
  fill(255, 255, 0);
  ellipse( mouseX + random(2), mouseY + random(2), 20, 20 );
  fill(255, 255, 255);
  ellipse( mouseX + random(2), mouseY + random(2), 10, 10 );
}


Thanks