New wiki-page
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 1: Line 1:
<script>
<script>
class FogParticle {


    constructor(ctx, canvasWidth, canvasHeight) {
//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE.
        this.ctx = ctx
var context=document.getElementById("canvas");
        this.canvasWidth = canvasWidth
var canvasWidth=context.width;
        this.canvasHeight = canvasHeight
var canvasHeight= context.height;
        this.x = 0
var fogCount=15;
        this.y = 0
var fog=new Image();
    }
var mountain=new Image();
var fogs=[];
var FPS=20;
var maxVel=1;


    setPosition(x, y) {
fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
        this.x = x
mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;
        this.y = y
    }


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


    setImage(image) {
function fogPart(){
        this.image = image
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);


    render() {
};
        if (!this.image) return
this.update=function(){


        this.ctx.drawImage(
this.x += this.xVel;
            this.image,
        this.y += this.yVel;
            this.x - this.image.width / 2,
            this.y - this.image.height / 2,
            400,
            400
        )


        this.x += this.xVelocity
        this.y += this.yVelocity


        // Check if has crossed the right edge
         if (this.x >= canvasWidth) {
         if (this.x >= this.canvasWidth) {
             this.xVel = -this.xVel;
             this.xVelocity = -this.xVelocity
             this.x = canvasWidth;
             this.x = this.canvasWidth
         }
         }
        // Check if has crossed the left edge
 
         else if (this.x <= 0) {
         else if (this.x <= 0) {
             this.xVelocity = -this.xVelocity
             this.xVel = -this.xVel;
             this.x = 0
             this.x = 0;
         }
         }


        // Check if has crossed the bottom edge
 
         if (this.y >= this.canvasHeight) {
         if (this.y >= canvasHeight) {
             this.yVelocity = -this.yVelocity
             this.yVel = -this.yVel;
             this.y = this.canvasHeight
             this.y = canvasHeight;
         }
         }
         // Check if has crossed the top edge
          
     
         else if (this.y <= 0) {
         else if (this.y <= 0) {
             this.yVelocity = -this.yVelocity
             this.yVel = -this.yVel;
             this.y = 0
             this.y = 0;
        }
    }
}
 
class Fog {
 
    constructor({ selector, density = 50, velocity = 2, particle, bgi } = {}) {
        const canvas = document.querySelector(selector)
        const bcr = canvas.parentElement.getBoundingClientRect()
        this.ctx = canvas.getContext('2d')
        this.canvasWidth = canvas.width = bcr.width
        this.canvasHeight = canvas.height = bcr.height
 
        this.particleCount = density
        this.maxVelocity = velocity
        this.particle = particle
        this.bgi = bgi
 
        this._createParticles()
        this._setImage()
 
        if (!this.bgi) return
 
        const img = new Image()
        img.onload = () => {
            const size = coverImg(img, this.canvasWidth, this.canvasHeight)
            this.bgi = { img, w: size.w, h: size.h }
            this._render()
        }
        img.src = this.bgi
    }
 
    _createParticles() {
        this.particles = []
 
        const random = (min, max) => Math.random() * (max - min) + min
 
        for (let i = 0; i < this.particleCount; i++) {
            const particle = new FogParticle(this.ctx, this.canvasWidth, this.canvasHeight)
 
            particle.setPosition(
                random(0, this.canvasWidth),
                random(0, this.canvasHeight)
            )
            particle.setVelocity(
                random(-this.maxVelocity, this.maxVelocity),
                random(-this.maxVelocity, this.maxVelocity)
            )
 
            this.particles.push(particle)
         }
         }
    }
};


    _setImage() {
this.setImage=function(img){
         if (!this.particle) return
this.image=img;
};
this.setPos = function(x, y) {
         this.x = x;
        this.y = y;
    };


        const img = new Image()
         img.onload = () => this.particles.forEach(p => p.setImage(img))
    this.setVel = function(x, y) {
         img.src = this.particle
         this.xVel = x;
     }
         this.yVel = y;
     };


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


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


        requestAnimationFrame(this._render.bind(this))
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();


class Eraser {
            fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
 
   
    constructor({ bgCanvas, brushCanvas, bgi, radius = 120 } = {}) {
             fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
        bgCanvas = this.bgCanvas = document.querySelector(bgCanvas)
             fogs.push(fog);           
        this.brushCanvas = document.querySelector(brushCanvas)
        this.bgCtx = this.bgCanvas.getContext('2d')
        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()
        this.bgi.onload = this._attachEvents.bind(this)
        this.bgi.src = bgi
 
        this.utils = {
             distanceBetween(point1, point2) {
                return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
            },
            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)
fogs.forEach(function(part){
        const angle = this.utils.angleBetween(this.lastPoint, currentPoint)
part.setImage(fog);
});


        for (let ii = 0; ii < dist; ii += 5) {
};
            const x = this.lastPoint.x + (Math.sin(angle) * ii)
function draw(){
            const y = this.lastPoint.y + (Math.cos(angle) * ii)


            const brush = this.brushCtx.createRadialGradient(x, y, 0, x, y, this.brushRadius)
    context.drawImage(mountain,0,0);
            brush.addColorStop(0, 'rgba(0, 0, 0, 1)')
    context.globalAlpha = 0.09;
            brush.addColorStop(.3, 'rgba(0, 0, 0, .1)')
    fogs.forEach(function(part) {
            brush.addColorStop(1, 'rgba(0, 0, 0, 0)')
        part.draw();
    });


            this.brushCtx.fillStyle = brush
};
            this.brushCtx.fillRect(
function update(){
                x - this.brushRadius,
fogs.forEach(function(part){
                y - this.brushRadius,
part.update();
                this.brushRadius * 2,
});
                this.brushRadius * 2
            )
        }
 
        this.lastPoint = currentPoint
 
        this.bgCtx.globalCompositeOperation = 'source-over'
        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) => {
init();
     const ratio = img.width / img.height
if (context) {
    let w = width
     setInterval(function() {
    let h = w / ratio
         update();draw();
    if (h < height) {
     }, 1000 / FPS);
         h = height
        w = h * ratio
     }
    return { w, h }
}
}
// const bgi = 'http://saijogeorge.com/test/assets/images/mybackground.png'
const bgi = 'http://www.wallpaperup.com/uploads/wallpapers/2013/02/20/42433/big_thumb_a4789e7543f7b7467e6b1efcba41eaa0.jpg'
new Fog({
    selector: '#fog',
    particle: 'http://asista.pl/f/fog-particle.png',
    density: 80,
    bgi,
})




</script>
</script>


<div class="fog-container">
<canvas id="canvas" width="750" height="390"></canvas>
    <canvas id="fog"></canvas>
    <canvas id="bg"></canvas>
    <canvas id="brush"></canvas>
</div>

Revision as of 14:27, 17 July 2017

<script>

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

fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;


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(mountain,0,0);
   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);

}


</script>

<canvas id="canvas" width="750" height="390"></canvas>

Retrieved from "https://w.ikabodo.se/index.php?title=Widget:Fog&oldid=3635"