Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Flame is an interactive toy by Keita Lorente.
 magical flames of destiny-(not really)
 The player controls a match which they can light by clicking
 Before clicking, the player asks a yes or no question
 The flame will light up a word in the background that answers the question
 to reset, wave the mouse and the flame will go out
 */

boolean matchLit = false; //Fire or no fire-
int i = 0;//for the for loops(50)
int j = 0;//for the for loops(15*17=255)
float flameWidth = 20;//the size of the flame
float answer = 0;//what is the answer to the question-

void setup() {
  //set size of canvas
  size(400, 400);
  //we are not carressing the shapes. but seriously, no outlines on the shapes.
  noStroke();
  //make the match look less choppy
  smooth(8);
  //animation time for framerate to still look nice but also makes it easier to put out the match at will
  frameRate(29.97);
  //decide an answer for when it gets lit up
  answer=random(1, 612);
}

void draw() {
  //refresh background each time
  background(0);
  
  //update if the flame is lit or not
  updateFlame();
  
  //draw the stuff
  drawGlow();
  drawAnswer();
  drawFlame();
  drawMatch();
}

//-----------------------------------------------------------------------
//-----------------------------------------------------------------------

void updateFlame() {
  //click to light the flame and update the background
  if (mousePressed==true) {
    matchLit=true;
  }
  //wave the match too fast and the flame will go out
  if ((mouseX-pmouseX>50)||(mouseX-pmouseX<-50)||(mouseY-pmouseY>50)||(mouseY-pmouseY<-50)) {
    matchLit=false;
    //resets answer to potentially be different for the next round
    answer=random(1, 612);
  }
}
//-----------------------------------------------------------------------
void drawMatch() {
  //for statement to draw multiple circles so that the match can have a gradient and taper off to a point
  for (int i = 0; i<50; i++) {
    //when the match is lit, a gradient is there to show it is a light source
    if (matchLit==true) {
      fill(255-i, 255-i, 255-(i*2));
    } 
    //when the match isn't lit, the match is a solid colour
    else {
      fill(255, 255, 200);
    }
    //actually drawing the match
    ellipse(mouseX+(i)-15, mouseY+(i*2)-30, 10-(i/5), 10-(i/5));
  }
}
void drawFlame() {
  if (matchLit==true) {
    //for the size of the flame to flicker, used a randomized variable
    flameWidth=random(15, 30);

    //for statement is to give the flame a gradient from yellow to red.
    for (int j = 0; j<15; j++) {
      //17*15=225
      fill(255, 255-(j*17), 0);
      //drawing the base of the flame
      ellipse(mouseX-15, mouseY-30, (flameWidth)-j, (flameWidth)-j);
      //drawing the tip of the flame.
      //broke it up into the 3 corners because that line was really long and a pain to navigate
      triangle(mouseX-15+(flameWidth/2)-j, mouseY-30, 
        mouseX-15-(flameWidth/2)+j, mouseY-30, 
        mouseX-15-(mouseX-pmouseX), mouseY-random(20, 80)-(j*2));
    }
  }
}
void drawAnswer() {
  //Answers are pure black so that it is hidden
  fill(0);
  if (answer<=306) {
    //N  
    rect(80, 100, 20, 200);
    rect(160, 100, 20, 200);
    quad(80, 100, 100, 100, 180, 300, 160, 300);
    //O
    rect(220, 150, 20, 100);
    rect(300, 150, 20, 100);
    rect(260, 100, 20, 20);
    rect(260, 280, 20, 20);
    quad(260, 100, 280, 100, 240, 150, 220, 150);
    quad(260, 100, 280, 100, 320, 150, 300, 150);
    quad(260, 300, 280, 300, 320, 250, 300, 250);
    quad(260, 300, 280, 300, 240, 250, 220, 250);
  }
  if (answer>=307) {
    //Y
    rect(80, 180, 20, 120);
    quad(80, 180, 100, 180, 70, 100, 50, 100);
    quad(80, 180, 100, 180, 130, 100, 110, 100);
    //E
    rect(160, 100, 20, 200);
    rect(160, 100, 80, 20);
    rect(160, 190, 50, 20);
    rect(160, 280, 80, 20);
    //S
    rect(270, 100, 80, 20);
    rect(270, 100, 20, 100);
    rect(270, 190, 80, 20);
    rect(330, 200, 20, 100);
    rect(270, 280, 80, 20);
  }
}
void drawGlow() {
  //only glowing if there is fire
  if (matchLit==true) {
    //for statement to gradient into a fade off and yellower further away
    for (int j = 0; j<15; j++) {
      fill(255, 255, 255-(j*17), 16-(j));
      //the actual glow
      ellipse(mouseX-15, mouseY-40, flameWidth+(j*20), flameWidth+(j*25));
    }
  }
}