//               Interactive Graphic                        //
//                        By Melinne Hay                           //

//Sets the window to a 400 pixel wide by 400 pixels
void setup() {
  size(400, 400);
}
void draw() {
  background(0);
  smooth();

  //setting the rect and the circle mode to center
  ellipseMode(CENTER);
  rectMode(CENTER);

  //first backround flame

  fill(206, 90, 12, 127); //adding an orange colour and transparency
  ellipse((mouseX/25)+180, 140, (mouseX/25)+240, 260); 
  //MouseX moves the flame a little bit in relation to the mouse X position while keeping the same 
  //general postion of the flame

  //candle stick
  fill(#F5F0DE);
  rect(180, 160, 40, 40);

  //second backround flame
  fill(#F5AD11, 191);
  ellipse((mouseX/20)+180, 110, (mouseX/20)+80, 100);
  //Same as code as before but lowered the value to the flame so it moves a little bit more then the big flame

  //final inner flame
  fill(#FA0800);
  ellipse(180, 130, 60, 60);

  //wax droplet
  fill(255);
  ellipse(130, 245, 30, 30);

  //wax droplet 2
  ellipse(130, 360, 30, 30);

  //Base of candle
  fill(255);
  rect(180, 270, 100, 180);

  //eyes
  fill(0);
  ellipse(150, 270, 5, 5);

  //eye number 2
  ellipse(210, 270, 5, 5);

  //mouth
  ellipse(180, 290, 10, 10);
  fill(255);
  stroke(255);
  ellipse(180, 285, 10, 10);

  //the candle base
  stroke(0);
  fill(#E8CD60);
  rect(200, 370, 160, 20);

  //handle circle 1
  ellipse(310, 350, 100, 100);

  //handle center
  fill(0);
  ellipse(310, 350, 70, 70);

  //candle details
  fill(255);
  stroke(0);
  ellipse(140, 185, 30, 30);
}