Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

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

class FogParticle {

    constructor(ctx, canvasWidth, canvasHeight) {
        this.ctx = ctx
        this.canvasWidth = canvasWidth
        this.canvasHeight = canvasHeight
        this.x = 0
        this.y = 0
    }

    setPosition(x, y) {
        this.x = x
        this.y = y
    }

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

    setImage(image) {
        this.image = image
    }

    render() {
        if (!this.image) return

        this.ctx.drawImage(
            this.image,
            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 >= this.canvasWidth) {
            this.xVelocity = -this.xVelocity
            this.x = this.canvasWidth
        }
        // Check if has crossed the left edge
        else if (this.x <= 0) {
            this.xVelocity = -this.xVelocity
            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 } = {}) {
        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() {
        if (!this.particle) return

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

    _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))
    }
}

class Eraser {

    constructor({ bgCanvas, brushCanvas, bgi, radius = 120 } = {}) {
        bgCanvas = this.bgCanvas = document.querySelector(bgCanvas)
        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
                }
            }
        }
    }

    _attachEvents() {
        this.parentElement.addEventListener('mousemove', this._onMouseMove.bind(this))
        this.parentElement.addEventListener('mouseleave', this._onMouseLeave.bind(this))
    }

    _onMouseMove(e) {
        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
            this.brushCtx.fillRect(
                x - this.brushRadius,
                y - this.brushRadius,
                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) => {
    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'
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,
})