FinalProject-wildFire

sketch-koalaDownload
//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D


//fire
var fireAnim = [];
var fireArr = [];

//particles
var drag = 0.0002;    
var gravity = 0.3;
var particles = [];

//koala
var koalaImg;
var koala;

//var counter
var counter = 5;


function preload(){
 
    //fire animation image
    var filenames = [];
    filenames[0] = "https://i.imgur.com/31vYPuX.png";
    filenames[1] = "https://i.imgur.com/ZhfTftF.png";
    filenames[2] = "https://i.imgur.com/iGSBFBe.png";
    filenames[3] = "https://i.imgur.com/GCq7AjU.png";
    filenames[4] = "https://i.imgur.com/zZGdjbN.png";
    
 
    for (var i = 0; i < filenames.length; i++) {
        fireAnim[i] = loadImage(filenames[i]);
    }

    koalaImg = loadImage("https://i.imgur.com/Xm5QW4o.png");

}

function setup(){
    createCanvas(480,480);
    frameRate(24);
    imageMode(CENTER);

    koala = koalaMake(45,420);
       
}   


function draw(){
    background(144,232,232);  

    //background trees
    var  col = 0; 
    var  row= 0;
    
    var  r = 0;
    for( col = 0; col < 18; col++){ //tree coloe gradation
        var  g = 200;
        var  b = 50;
        for( row = 3; row < 12; row++ ){
           fill(r,g,b);
           b +=5;
           treeDraw(col*28+12,row*38); 
        }
    r +=10;
    }    

    //counter

    textSize(15);
    fill(200,50,0);
    text("fire count ",15,25);
    text(counter.toString(),80,25);

    //intro text
    if(frameCount>0 & frameCount < 24){
        textSize(50);
        fill(255);
        text("Click Mouse",150,200);
    }

    if(frameCount>=24 & frameCount < 48){
        textSize(50);
        fill(255);
        text("Hit Key w",150,200);
    }

    //fire

    if(frameCount % 72 == 0){
        //print(startCount);
        var fire = makeFire(480,410);
        fireArr.push(fire);
    }

    for(var i = 0; i < fireArr.length; i++){
        var f = fireArr[i]
        f.drawFunction();
        f.stepFunction();

        print(f.size);
        //print(counter);

        if (f.size <= 0.2 || f.x <= 0.2){
            print(f.x);
            counter = counter - 1;

        }

        if (f.size<=0.2|| f.x <= 0.2 ){ //Here I choose 0.2 is because 0 is not working, the condition can not run
            fireArr.splice(i,1);
            print("test splice");
        }


 
    }   

     //sun
    fill(223,242,136);
    circle(400,50,50);

    // add new particle to the object
    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();

    //particle vanishes
        if (p.age < 200) {
            newParticles.push(p);
        }
    }

    particles = newParticles;

   //trunck
    noStroke()
    fill(82,62,41);
    rect(30,280,12,200);

    //koala
    koala.drawFunction();
    koala.stepFunction();

    //ground
    fill(181,170,156);
    rect(0,450,480,30);

    //game ending, win or loose

    if(counter == 0){
        //background (255);
        textSize(40);
        fill(0,100,200,150);
        rect(0,0,width,height);
        fill(255);  
        image(koalaImg,width/2,height/2-100,150,150);           
        text("KOALA SAVED ! ",width/2-130,height/2);
        
        noLoop();
        
    } 

    for(var i = 0; i < fireArr.length; i++){
        var f = fireArr[i]

        if (dist(f.x,f.y,koala.x,koala.y) <= 50){
        background (255,50,0,150);
        textSize(40);
        fill(255);
        text("MISSION FAILED ! ",width/2-150,height/2);

        noLoop();
        }
    }



}


//make new particles by pressing mouse
function mousePressed() {
    var newp = makeParticle(mouseX, mouseY,
        random(-10, 10), random(-10, 0),color(random(1,255),random(1,255),random(1,255),random(5,15)));
    particles.push(newp);


    for(var j = 0; j < fireArr.length; j ++){
        var fire = fireArr[j];
        if(dist(mouseX,mouseY,fire.x,fire.y)<=  400*0.2*fire.size ){
            fire.size -= 0.2;
        }
        if(abs(fire.size -0.1) <=0.0001  || abs(fire.x-0)<0.0001 ){
            //print(fire.size)
            fireArr.splice(j,1);
        }

    }

}

function keyPressed(){
    if (key === "w"){
        koala.y += koala.dy;
    }
}

function counterUpdate(){
    for(var j = 0; j < fireArr.length; j ++){
        var fire = fireArr[j];
    }

    if (fireArr.length > 0  & fire.size <= 0){
        counter = counter - 1;
    }
    
}


function makeFire(fx,fy){
    var p = {x:fx,
         y:fy,
         dx:-8,
         imageNumber:0,
         size:1.0,
         stepFunction:stepFire,
         drawFunction:drawFire,
         }
    return p;

}

function stepFire(){
    this.imageNumber++;
    //print(this.imageNumber);
    if (this.imageNumber > 4){
        this.imageNumber = 0;
    }   
    this.x+=this.dx;
}

function drawFire(){

    push();
    translate(this.x,this.y);
    scale(0.3*this.size);   
    image(fireAnim[this.imageNumber],0,0);
    pop();

    //print("test", this.x,this.y);
}



function treeMake(tx,ty){
    var t = {x:tx,
         y:ty,
         color:c,     
         //stepFunction:stepFire,
         drawFunction:treeDraw,
         }
    return t;

}


function treeDraw(x,y){
    push();
    translate(x, y);
    triangle(-5,0,5,0,0,-15);
    
    beginShape();
    vertex(0,-35);
    vertex(-8,-20);
    vertex(0,-25);
    vertex(8,-20);
    endShape(CLOSE);

    beginShape();
    vertex(0,-25);
    vertex(-12,-12);
    vertex(0,-15);
    vertex(12,-12);
    endShape(CLOSE);

    pop();
}


//particles

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dx and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    //limit the speed
    d = min(d, 0.9);
    // scale dx and dy to include drag effect
    this.dx *= (0.8 - d);
    this.dy *= (0.9 - d);
    if(this.age % 40 == 0){
    this.size*= (1-0.2);
    } 

}

 
function particleDraw() {
   
    fill(this.pc);
    circle(this.x, this.y,this.psize);
}


// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy,pc,psize) {

    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         pc:color(0,random(100,150),random(150,250)),
         psize:random(5,15),
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}

//koala

function koalaMake(kx,ky){
    var k = {
        x:kx,
        y:ky,
        dy:-40, 
        gravityK:3,
        drawFunction:koalaDraw,
        stepFunction:koalaStep,
    }
    return k;
}

function koalaDraw(){

    image(koalaImg,this.x,this.y,70,70);

}

function koalaStep(){
    this.y += this.gravityK;
    this.y = constrain(this.y,280,423);

}

I am inspired by the wildfire this year which both happened in Australia and California. Till now I still can remember the pictures I saw about wildlives. Those pictures made me sad.
Also I would like to write one project a bit gamy which can bring some of the interesting points of 15104 together.

How to Play:
1 Hit right button on the fire to extinguish them
2 Or hit W key to move the koala when you failed in 1#
3 When you save your koala for 5 fireballs, you win.
4 If the fireball hit the koala, you lose.

Improvement:
1 If I have more time, I would add a start button. Now the program runs automatically. With the start button, the player will feel better.
2 Also, maybe I would add a tutorial before the game begins. Like, first one fireball is burning in the middle of the canvas, and the player needs to extinguish it first to start the game. Then, a fireball is coming toward the koala, the player needs to hit W to help the koala escape from the fire then start the game.

Leave a Reply