Revision as of 18:28, 17 July 2017

/* Any JavaScript here will be loaded for all users on every page load. */

//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. 
var context=document.getElementById("canvas"); 
var image=document.getElementById('picture');
var canvasWidth=context.width;
var canvasHeight= context.height;
var imageWidth=image.width;
var imageHeight= image.height;
var fogCount=10;
var fog=new Image();
var picture=new Image();
var fogs=[];
var FPS=20;
var maxVel=1;

fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
picture.id = "pic";
picture.src=image.src;

function fogPart(){
	this.x=0;
	this.y=0;
	this.xVel=0;
	this.yVel=0;
	this.radius=5;
	this.draw=function(){
		context.drawImage(this.image,this.x-100,this.y-100);

	};
	this.update=function(){

		this.x += this.xVel;
        this.y += this.yVel;


        if (this.x >= canvasWidth) {
            this.xVel = -this.xVel;
            this.x = canvasWidth;
        }
   
        else if (this.x <= 0) {
            this.xVel = -this.xVel;
            this.x = 0;
        }


        if (this.y >= canvasHeight) {
            this.yVel = -this.yVel;
            this.y = canvasHeight;
        }
        
      
        else if (this.y <= 0) {
            this.yVel = -this.yVel;
            this.y = 0;
        }
	};

	this.setImage=function(img){
	this.image=img;
	};
	 this.setPos = function(x, y) {
        this.x = x;
        this.y = y;
    };

 
    this.setVel = function(x, y) {
        this.xVel = x;
        this.yVel = y;
    };


};

function random(min, max){
    return Math.random() * (max - min) + min;
}
function init() {
    if (canvas.getContext) {
        context = canvas.getContext('2d');
        for(var i=0; i < fogCount; i++){
            var fog = new fogPart();

            fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
     
            fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
            fogs.push(fog);            
        }
    }
    else {
        alert("UN-supported browser");
    }
};

fog.onload=function(){

	fogs.forEach(function(part){
		part.setImage(fog);
	});

};

var ctx = canvas.getContext('2d');

function drawImageScaled(image, ctx) {
   var hRatio = canvas.width  / image.width    ;
   var vRatio =  canvas.height / image.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - image.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - image.height*ratio ) / 2;  
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(image, 0,0, image.width, image.height,
                      centerShift_x,centerShift_y,image.width*ratio, image.height*ratio);  
}

function draw(){

    context.drawImageScaled(null,picture, context); 
    context.globalAlpha = 0.09;
    fogs.forEach(function(part) {
        part.draw();
    });

};
function update(){
fogs.forEach(function(part){
	part.update();
});

};

init();
if (context) {
    setInterval(function() {
        update();draw();
    }, 1000 / FPS);
}