New wiki-page
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(224 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


document.addEventListener('DOMContentLoaded',domloaded,false);
function randomName(template, name, list){
function domloaded(){


class FogParticle {
var input = document.getElementsByName(template + '[' + name + ']')[0];
var url = 'http://w.ikabodo.se/api.php?action=browsebysubject&subject='+ list + '&format=json'


    constructor(ctx, canvasWidth, canvasHeight) {
$.getJSON(url, function(data) {
        this.ctx = ctx
        this.canvasWidth = canvasWidth
        this.canvasHeight = canvasHeight
        this.x = 0
        this.y = 0
    }


    setPosition(x, y) {
var listan = [];
        this.x = x
$.each(data.query.data[0].dataitem, function(index, element)  
         this.y = y
{
    }
listan.push(element);
});
var randomgrej = listan[Math.floor( Math.random() * listan.length)].item.replace("#0#", "");
         input.value = randomgrej;
});


    setVelocity(x, y) {
};
        this.xVelocity = x
        this.yVelocity = y
    }


    setImage(image) {
function randomNameToken(template, name, list){
        this.image = image
    }


    render() {
var input = template + '[' + name + ']';
        if (!this.image) return
var dataOld = $('[name="' + input + '"]').val();


        this.ctx.drawImage(
var url = 'http://w.ikabodo.se/api.php?action=browsebysubject&subject='+ list + '&format=json'
            this.image,
            this.x - this.image.width / 2,
            this.y - this.image.height / 2,
            400,
            400
        )


        this.x += this.xVelocity
$.getJSON(url, function(data) {
        this.y += this.yVelocity


        // Check if has crossed the right edge
var listan = [];
        if (this.x >= this.canvasWidth) {
$.each(data.query.data[0].dataitem, function(index, element)  
            this.xVelocity = -this.xVelocity
{
            this.x = this.canvasWidth
listan.push(element);
         }
});
        // Check if has crossed the left edge
var randomgrej = listan[Math.floor( Math.random() * listan.length)].item.replace("#0#", "");
         else if (this.x <= 0) {
         $('[name="' + input + '"]').val('').trigger("change");
            this.xVelocity = -this.xVelocity
         $('[name="' + input + '"]').val(dataOld + ' , ' + randomgrej).trigger("change");
            this.x = 0
});
        }


        // Check if has crossed the bottom edge
};
        if (this.y >= this.canvasHeight) {
            this.yVelocity = -this.yVelocity
            this.y = this.canvasHeight
        }
        // Check if has crossed the top edge
        else if (this.y <= 0) {
            this.yVelocity = -this.yVelocity
            this.y = 0
        }
    }
}


class Fog {


    constructor({ selector, density = 50, velocity = 2, particle, bgi } = {}) {
$('.clickable').bind('click', function (ev) {
        const canvas = document.querySelector(selector)
    var svg = document.getElementById("svgBritain");
        const bcr = canvas.parentElement.getBoundingClientRect()
    var $div = $(ev.target);
        this.ctx = canvas.getContext('2d')
    var $display = $div.find('.display');
        this.canvasWidth = canvas.width = bcr.width
    var pt = svg.createSVGPoint();
        this.canvasHeight = canvas.height = bcr.height
   
    var offset = $div.offset();
    pt.x = ev.clientX;
    pt.y = ev.clientY;


        this.particleCount = density
    var cx = document.getElementsByClassName("cx")[0];
        this.maxVelocity = velocity
    var cy = document.getElementsByClassName("cy")[0];
        this.particle = particle
        this.bgi = bgi


        this._createParticles()
    var marker = document.getElementById('marker')
        this._setImage()


        if (!this.bgi) return
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse())


        const img = new Image()
    marker.setAttribute('cx', cursorpt.x + 'px');
        img.onload = () => {
    marker.setAttribute('cy', cursorpt.y + 'px');
            const size = coverImg(img, this.canvasWidth, this.canvasHeight)
            this.bgi = { img, w: size.w, h: size.h }
            this._render()
        }
        img.src = this.bgi
    }


     _createParticles() {
     cx.value = cursorpt.x;
        this.particles = []
    cy.value = cursorpt.y;
});


        const random = (min, max) => Math.random() * (max - min) + min
//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;


        for (let i = 0; i < this.particleCount; i++) {
fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
            const particle = new FogParticle(this.ctx, this.canvasWidth, this.canvasHeight)
picture.id = "pic";
picture.src=image.src;


            particle.setPosition(
function fogPart(){
                random(0, this.canvasWidth),
this.x=0;
                random(0, this.canvasHeight)
this.y=0;
            )
this.xVel=0;
            particle.setVelocity(
this.yVel=0;
                random(-this.maxVelocity, this.maxVelocity),
this.radius=5;
                random(-this.maxVelocity, this.maxVelocity)
this.draw=function(){
            )
context.drawImage(this.image,this.x-100,this.y-100);


            this.particles.push(particle)
};
        }
this.update=function(){
    }


    _setImage() {
this.x += this.xVel;
         if (!this.particle) return
         this.y += this.yVel;


        const img = new Image()
        img.onload = () => this.particles.forEach(p => p.setImage(img))
        img.src = this.particle
    }


    _render() {
         if (this.x >= canvasWidth) {
         if (this.bgi) {
             this.xVel = -this.xVel;
             this.ctx.drawImage(this.bgi.img, 0, 0, this.bgi.w, this.bgi.h)
            this.x = canvasWidth;
         } else {
         }
            this.ctx.fillStyle = "rgba(0, 0, 0, 1)"
 
             this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
        else if (this.x <= 0) {
             this.xVel = -this.xVel;
            this.x = 0;
         }
         }


        this.particles.forEach(p => p.render())


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


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


     constructor({ bgCanvas, brushCanvas, bgi, radius = 120 } = {}) {
        bgCanvas = this.bgCanvas = document.querySelector(bgCanvas)
     this.setVel = function(x, y) {
         this.brushCanvas = document.querySelector(brushCanvas)
         this.xVel = x;
         this.bgCtx = this.bgCanvas.getContext('2d')
         this.yVel = y;
        this.brushCtx = this.brushCanvas.getContext('2d')
    };


        this.parentElement = this.bgCanvas.parentElement
        const bcr = this.parentElement.getBoundingClientRect()
        this.canvasWidth = this.bgCanvas.width = this.brushCanvas.width = bcr.width
        this.canvasHeight = this.bgCanvas.height = this.brushCanvas.height = bcr.height


        this.brushRadius = radius
};


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


        this.utils = {
             fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
             distanceBetween(point1, point2) {
   
                return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
             fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
            },
             fogs.push(fog);           
             angleBetween(point1, point2) {
                return Math.atan2(point2.x - point1.x, point2.y - point1.y)
             },
            getMousePos(e) {
                const bcr = bgCanvas.getBoundingClientRect()
                return {
                    x: e.clientX - bcr.left,
                    y: e.clientY - bcr.top
                }
            }
         }
         }
     }
     }
 
     else {
     _attachEvents() {
         alert("UN-supported browser");
         this.parentElement.addEventListener('mousemove', this._onMouseMove.bind(this))
        this.parentElement.addEventListener('mouseleave', this._onMouseLeave.bind(this))
     }
     }
};


    _onMouseMove(e) {
fog.onload=function(){
        const currentPoint = this.utils.getMousePos(e)
        this.lastPoint = this.lastPoint || currentPoint
 
        const dist = this.utils.distanceBetween(this.lastPoint, currentPoint)
        const angle = this.utils.angleBetween(this.lastPoint, currentPoint)
 
        for (let ii = 0; ii < dist; ii += 5) {
            const x = this.lastPoint.x + (Math.sin(angle) * ii)
            const y = this.lastPoint.y + (Math.cos(angle) * ii)
 
            const brush = this.brushCtx.createRadialGradient(x, y, 0, x, y, this.brushRadius)
            brush.addColorStop(0, 'rgba(0, 0, 0, 1)')
            brush.addColorStop(.3, 'rgba(0, 0, 0, .1)')
            brush.addColorStop(1, 'rgba(0, 0, 0, 0)')


            this.brushCtx.fillStyle = brush
fogs.forEach(function(part){
            this.brushCtx.fillRect(
part.setImage(fog);
                x - this.brushRadius,
});
                y - this.brushRadius,
                this.brushRadius * 2,
                this.brushRadius * 2
            )
        }


        this.lastPoint = currentPoint
};


        this.bgCtx.globalCompositeOperation = 'source-over'
function draw(){
        const size = coverImg(this.bgi, this.canvasWidth, this.canvasHeight)
        this.bgCtx.drawImage(this.bgi, 0, 0, size.w, size.h)
        this.bgCtx.globalCompositeOperation = 'destination-in'
        this.bgCtx.drawImage(this.brushCanvas, 0, 0)
    }
 
    _onMouseLeave() {
        this.lastPoint = null
    }
}
 
const coverImg = (img, width, height) => {
    const ratio = img.width / img.height
    let w = width
    let h = w / ratio
    if (h < height) {
        h = height
        w = h * ratio
    }
    return { w, h }
}


// const bgi = 'http://saijogeorge.com/test/assets/images/mybackground.png'
    context.drawImage(
const bgi = 'http://www.wallpaperup.com/uploads/wallpapers/2013/02/20/42433/big_thumb_a4789e7543f7b7467e6b1efcba41eaa0.jpg'
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();
    });


new Fog({
};
    selector: '#fog',
function update(){
    particle: 'http://asista.pl/f/fog-particle.png',
fogs.forEach(function(part){
    density: 80,
part.update();
    bgi,
});
})


};


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

Latest revision as of 19:27, 15 August 2017

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

function randomName(template, name, list){

var input = document.getElementsByName(template + '[' + name + ']')[0];
var url = 'http://w.ikabodo.se/api.php?action=browsebysubject&subject='+ list + '&format=json'

$.getJSON(url, function(data) {

	var listan = [];
	$.each(data.query.data[0].dataitem, function(index, element) 
	{
		listan.push(element);
	});
	var randomgrej = listan[Math.floor( Math.random() * listan.length)].item.replace("#0#", "");
        input.value = randomgrej;
});

};

function randomNameToken(template, name, list){

var input = template + '[' + name + ']';
var dataOld = $('[name="' + input + '"]').val();

var url = 'http://w.ikabodo.se/api.php?action=browsebysubject&subject='+ list + '&format=json'

$.getJSON(url, function(data) {

	var listan = [];
	$.each(data.query.data[0].dataitem, function(index, element) 
	{
		listan.push(element);
	});
	var randomgrej = listan[Math.floor( Math.random() * listan.length)].item.replace("#0#", "");
        $('[name="' + input + '"]').val('').trigger("change");
        $('[name="' + input + '"]').val(dataOld + ' , ' + randomgrej).trigger("change");
});

};


$('.clickable').bind('click', function (ev) {
    var svg = document.getElementById("svgBritain");
    var $div = $(ev.target);
    var $display = $div.find('.display');
    var pt = svg.createSVGPoint();
    
    var offset = $div.offset();
    pt.x = ev.clientX;
    pt.y = ev.clientY;

    var cx = document.getElementsByClassName("cx")[0];
    var cy = document.getElementsByClassName("cy")[0];

    var marker = document.getElementById('marker')

    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());   

    marker.setAttribute('cx', cursorpt.x + 'px');
    marker.setAttribute('cy', cursorpt.y + 'px');

    cx.value = cursorpt.x;
    cy.value = cursorpt.y;
});

//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);
}