Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//**Gareth Hudson**
//Fireball
//991393170 - P01
//Nicolas Hesler
//Interactive Object Oriented Toy
//Introduction to Media Computation

/* 
Psuedo code
Draw background
Initialize fireball, initialize all embers
display embers
update movement
display fireball
*/

Fireball fire;

//creates the ember array
//allows 100 embers to spawn
Ember[] embers = new Ember[200];

void setup() {
  frameRate(60);
  size(400, 600);
  
  //constructs the fireball class and passes mouse values and width
  fire = new Fireball(120);
  //constructs the ember array and passes mouse values 
  for (int i = 0; i < embers.length; i++) {
    embers[i] = new Ember(mouseX,mouseY);
  }
}


void draw() {
  noStroke();
  background(0);

  //displays each ember and updates their position
  for (int i = 0; i < embers.length; i++) {
    embers[i].display();
    embers[i].move();
  }
  
  //displays the fireball on the mouse
  fire.display();
}
/* 
Psuedo code
Grab mouse values
add random x/y value once to give intial position
draws ember ellipse
adds velocity
x value updates randomly to simulate wiggling
y value moves up constantly
color becomes redder
alpha levels lower based on random value
when alpha levels hit 0 grab current mouse value once
add random x/y value once
repeat
*/

//Declares embers class
class Ember {
  
  
  float mX, mY;
  //declares ember color variables
  float r = 255;
  float g = 234;
  float b = 53;
  float a = 255;
  //declares the range in which embers can spawn
  float locAlt = 50;
  //randomizes the inital location
  float locAltX = random(-locAlt,locAlt);
  float locAltY = random(-locAlt,locAlt);
  //randomizes the initial spawning size
  float w = random(15,30);
  //randomizes the inital value in which alpha levels decrease
  //couldn't put just random(-9,-1) for some reason so I had to add a 1 separately
  //Broke the code if I did it otherwise
  float ar = 1 - random(-10,-2);
  
  //grabs initial mouse value
  Ember(float tempX, float tempY) {
    mX = tempX;
    mY = tempY;
  }

  //takes the mouse value and adds a random number between -50 and 50 to give its initial spawning location
  PVector loc = new PVector(mX + locAltX, mY + locAltY);
  //sets the speed and how the location will update
  //x values flucuate which causes wiggling
  //y values pick between -4 and -1 once initially and move at that pace constantly upwards
  PVector vel = new PVector(random(-3,3),random(-4,-1));

  void display() {
    
    //reddens embers
    g -= 8;
    //descreases alpha levels by a value randomly picked once at the start of the program
    a -= ar;
    
    //once the ember's alpha level hits 0 and essentially disappears run this
    if (a <= 0){
      //reset alpha level to max
      a = 255;
      //resets color back to orange
      g = 234;
      
      //reaquires current mouse position once
      mX = mousePosX();
      mY = mousePosY();
      
      //creates a new random location to reset the ember to
      locAltX = random(-locAlt,locAlt);
      locAltY = random(-locAlt,locAlt);
      
      //resets ember position 
      loc.x = mX+locAltX;
      loc.y = mY+locAltY;
      
    }
    
    //declares color variables used for the glow on each ember
    float r2 = 255;
    float b2 = 134;
    float g2 = 53;
    float a2 = 15;
    
    
    fill(r2,b2,g2,a2);
    //draws glow ellipse
    //width is the inital width of the ember plus 20
    //ellipse position updates in tandem with ember
    ellipse(loc.x, loc.y, w+10, w+10);
    
    //declares the color variable so it can adjust over time
    color emberColor = color(r, g, b, a);
    fill(emberColor);
    //draws ember ellipse
    //ellipse position updates
    ellipse(loc.x, loc.y, w, w);
    
    
  }

  void move() {
    //constantly adds or subtracts random values from the x value
    //causes a wiggling effect
    vel.x=random(-3,3);
    //adds the new vector value to the position
    loc.add(vel);
  }
  
  //used to grab the mouse value once when needed
  //generally I used this to reset the ember positon to something new
  float mousePosX(){
    return(mouseX);
  }
  float mousePosY(){
    return(mouseY);
  }
}
/* 
Psuedo code
Grabs mouse values constantly
draws 10 ellipses, each bigger than the last to create glow
each iteration has less opacity and becomes redder
draws two ellipses the first bigger and orange, the second smaller and yellow
adds random value to radiuses of each ellipse once per frame to simulate flickering
*/

//Declares fireball class
class Fireball {
  //declares variables
  float mX;
  float mY;
  float w;


  //grabs ellipse size
  Fireball(float tempW) {
    w = tempW;
  }


  void display() {
    
    //constantly updates ellipse position
    mX = mouseX;
    mY = mouseY;
    //declares vector for fireball position
    PVector position = new PVector(mX, mY);
    
    //This variable is used to create the flickering
    float alt = random(-10, +10);
  
    //declares variables needed to create the glow
    //initial width
    int w2 = 50;
    //space between each iteration
    int spacing = 20;
    //color values
    int r = 255;
    int g = 234;
    int b = 53;
    int a = 100;
  
    //draws 10 ellipses on mouse position
    for (int i = 0; i <= 100; i += 10) {
      fill(r, g, b, a);
      
      //reddens the ellipses
      g -= 19;
      
      //lowers opacity with each iteration
      a -= 10;
      
      //draws ellipse, width fluctuates each frame
      ellipse(position.x, position.y, w2+alt, w2+alt);
      
      //adds to the size (creates the spacing)
      w2 = w2 + spacing;
    }
    //resets variables for the next frame
    w2 = 50;
    g = 234;
    a = 100;
  
    //draws the orange ellipse of the fireball
    fill(255+alt, 177+alt, 53+alt);
    ellipse(position.x, position.y, w+alt, w+alt);
    
    //draws the core of the fireball
    fill(255+alt+5, 234+alt+5, 53+alt+5);
    ellipse(position.x, position.y, w-20+alt, w-20+alt);
  }
}