Fire JS Bin - SAKURA

var canvas = document.getElementById('world');
var windowSize_x = 465;
var windowSize_y = 465;
var N_SAKURA = 100;
var wind_x=0;
var sakuraAry= new Array(N_SAKURA);
var ctx;
var fallNumber=0;

window.onload=function(){
    init();
    setInterval("update()",30);
};

//桜の初期位置をセット
function init(){
    windowSize_x = window.innerWidth;
    windowSize_y = window.innerHeight;
    for(i=0;i<N_SAKURA;i++){
        sakuraAry[i] = new sakura((Math.random()+Math.random())/2);
    }
    aryCheck();
}

function update(){
    canvas = document.getElementById('world');
    canvas.width = windowSize_x;
    canvas.height = windowSize_y;
    ctx = canvas.getContext('2d');
    for(i=0;i<N_SAKURA;i++){
        //桜の描画
        sakuraAry[i].draw(ctx);
        //桜の向き、速度などの更新
        sakuraAry[i].fall();
        //桜の回転速度の更新
        sakuraAry[i].axisVUpdate();
    }
    aryCheck();
    //風速・風向の更新
    windUpdate();
}

var sakura = function(inputSize){
    this.x = windowSize_x*Math.random();//Math.random()*windowSize_x;
    this.y = -windowSize_y*Math.random();
    this.size = inputSize;
    this.axis_x = Math.random()*Math.PI*2;
    this.axis_y = Math.random()*Math.PI*2;
    this.axis_z = 0;
    this.axisV_x = Math.random()*Math.PI*0.05;//
    this.axisV_y = Math.random()*Math.PI*0.05;//
    this.axisV_z = 0;//Math.random()*Math.PI*0.05;//
    this.countWave=0;
    this.isWave=false;
    this.waveCenter_x = 0;
    this.waveCenter_y = 0;
    this.nextAxisV_x = 0;
    this.nextAxisV_y = 0;
    this.nextAxisV_z = 0;
    this.drawNumberIndicator = 0;
};

sakura.prototype.draw = function(ctx){
    ctx.translate(+this.x,this.y);
    ctx.rotate(this.axis_x);
    ctx.scale(Math.cos(this.axis_y),Math.cos(this.axis_z));
    ctx.translate(-this.x,-this.y);
    var img = new Image();
    img.src = "http://jsrun.it/assets/a/3/N/f/a3NfF.png";
    ctx.drawImage(img, this.x-25*this.size, this.y-25*this.size, 50*this.size, 50*this.size);
    //桜の光芒の表現部分
    if(this.size > 0.35){
        for(j=0;j<10;j++){
            ctx.beginPath();
            ctx.arc(this.x, this.y, 30*this.size-j,-2*Math.PI,0, false);
            ctx.fillStyle = "rgba(255,255,255, 0.05)";
            ctx.fill();
        }
    }
    //桜が徐々に消えていく表現
    if(this.isWave === true){
        ctx.beginPath();
        setFillStyle(ctx,this.countWave);
        ctx.arc(this.x, this.y, 30*this.size,-2*Math.PI,0, false);
        ctx.fill();
    }
    
    ctx.translate(this.x,this.y);
    ctx.scale(1/Math.cos(this.axis_y),1/Math.cos(this.axis_z));
    ctx.rotate(-this.axis_x);
    ctx.translate(-this.x,-this.y);
    
    //水面の波紋の表現部分
    if(this.isWave === true){
        ctx.translate(this.x,this.y);
        ctx.scale(1,0.5);
        ctx.translate(-this.x,-this.y);
        ctx.beginPath();
        setStrokeStyle(ctx,this.countWave);
        ctx.arc(this.waveCenter_x,this.waveCenter_y,this.countWave*this.size*2,Math.PI*2,false);
        ctx.stroke();
        ctx.translate(this.x,this.y);
        ctx.scale(1.0,2.0);
        ctx.translate(-this.x,-this.y);
    }
};

sakura.prototype.fall = function(){
    if(this.isWave === false){
        this.x += wind_x*this.size;
        this.y += 5*this.size;//
        this.axis_x += this.axisV_x;
        this.axis_y += this.axisV_y;
        this.drawNumberIndicator = this.size + fallNumber + N_SAKURA;
        //this.axis_z += this.axisV_z;
        //桜の角度によって一瞬消失する点を回避
        if(Math.abs(Math.cos(this.axis_y))<0.1){
            if(this.axisV_y<0){
                this.axis_y -= 0.2;
            }
            else{
                this.axis_y += 0.2;
            }
        }
        if(this.y>windowSize_y*Math.sqrt(this.size)*1.2){
            this.isWave=true;
            this.waveCenter_x = this.x;
            this.waveCenter_y = this.y;
            fallNumber++;
            this.drawNumberIndicator = fallNumber;
        }
        if(this.x< -20){
            this.x += (windowSize_x+20);
        }
        else if(this.x>windowSize_x + 20){
            this.x -= (windowSize_x+20);
        }
    }
    else if(this.isWave === true){
        this.countWave += 1;
        this.axis_y = 0.5;
        this.y += (this.countWave)/60*this.size;
        if(this.countWave>waveDeadLimit){
            this.countWave = 0;
            this.isWave = false;
            this.x = windowSize_x*Math.random();
            this.y = 0;
            this.size = (Math.random()+Math.random())/2;
        }
    }
};

sakura.prototype.axisVUpdate = function(){
    if(countWU >= windUpdateLimit){//countWUはwindUpdateで更新される
        this.nextAxisV_x = Math.random()*Math.PI*0.05;
        this.nextAxisV_y = Math.random()*Math.PI*0.05;
        //this.nextAxisV_z = 0;//Math.random()*Math.PI*0.05;
    }
    if(countWU < windUpdateLimit){
        this.axisV_x += (this.nextAxisV_x-this.axisV_x)/(windUpdateLimit-countWU);
        this.axisV_y += (this.nextAxisV_y-this.axisV_y)/(windUpdateLimit-countWU);
        //this.axisV_z += (this.nextAxisV_z-this.axisV_z)/(50-countWU);
    }
};

var countWU = 0;
var nextWindGoal = 0;
var windUpdateLimit = 50;
//風力・風向の更新
function windUpdate(){
    if(countWU >= windUpdateLimit){
        countWU = 0;
        nextWindGoal = (Math.random()+Math.random()+Math.random()-1)*10;
        //正規分布の乱数生成
    }
    wind_x += (nextWindGoal-wind_x)/(windUpdateLimit-countWU);
    countWU++;
}

var waveDeadLimit = 60;
function setFillStyle(ctx,n){
    var transpalent = n/waveDeadLimit;
    var color = "rgba(0,0,0," + transpalent + ")";
    ctx.fillStyle = color;
}

function setStrokeStyle(ctx,n){
    var transpalent = 1-n/waveDeadLimit;
    if(transpalent<0){
        transpalent = 0;
    }
    var color = "rgba(255,255,255," + transpalent + ")";
    ctx.strokeStyle = color;
}