Revision as of 19:35, 9 August 2017

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

RLQ.push(function () {
$('.clickable').bind('click', function (ev) {
    var pt = svg.createSVGPoint(); 
    var $div = $(ev.target);
    var $display = $div.find('.display');
    var $marker= $svg.find('#marker');
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
    
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    var x2 = document.getElementById('marker').getAttribute('cx');
    var y2 = document.getElementById('marker').getAttribute('cy');
    
    $display.text('x: ' + x + ', y: ' + y2 + x2);
    
    $marker.attr('cx', '800')
});

//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. 
var context=document.getElementById("canvas"); 
var image=document.getElementsByClassName('picture')[0];
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);
	});

};

function draw(){

    context.drawImage(
picture, 
(canvasWidth / 2) - image.width / 2,
(canvasHeight / 2)- image.height / 2,
canvasWidth ,
canvasWidth * image.naturalHeight / image.naturalWidth
); 
    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);
}