let fireMove = false;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220, 30);

  let fp = new FireBending();

  fireParticles.push(fp);

  for(let i = fireParticles.length -1; i>= 0; i--){

    fireParticles[i].update();

    fireParticles[i].show();

    fireParticles[i].shrink();

​

    if(fireParticles[i].size <= 0){

      fireParticles.splice(i, 1);

    }

  }

}

​

function mousePressed() {

  if(fireMove == true) {

    fireMove = false;

  }

  else {fireMove = true;}

}

​

//This is a class which controls particles 

class FireBending {

  //Constructor to initialize the particle based on initial variables

  constructor() {

    this.x = 200;

    this.y = 300;

    this.size = random(30,50);

    this.assignColor();

  }

  assignColor() {

    let r = random(3);

    if(r < 1){

      this.color = color(255,100,20,50); 

    } 

    else if(r >= 1 && r < 2 ){

      this.color = color(255, 200, 10, 50); 

    } 

    else if(r >= 2 ){

      this.color = color(255, 80, 5, 50); 

    }

  }

  shrink(){    

   this.size -= 0.4;

  }

​

  //This function updates the velocities and alpha value of the particles

  update() {

    if(fireMove) {

      this.x += random(-15, 15);

      this.y += random(-10, -15); 

    }

    else {

      this.x += random(-7, 7);

      this.y += random(-1, -3); 

    }

  }

​

  //This function draws the particles

  show() {

    noStroke();

    fill(this.color);

    ellipse(this.x, this.y, this.size);

  }

}