var canv = document.getElementById('canv')
var grid = []

canv.width = 500; 
canv.height = 500;
var ctx = canv.getContext('2d');
//my custom tweens
var easeInCubic= function (x, t, b, c, d) {
    return c*(t/=d)*t*t + b
}

var easeOutBounce= function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b
    }
}

var draw = function() {
    ctx.clearRect(0,0,500,500)
    //create 9x9 grid && add defined easing functions
    for(var j=0; j<9; j++) {
        for(var i=0; i<9; i++) {
        
            var x = i*40+((9-j)*20)-(i*20), y = j*10 + 100 + (i*10)
            
            if(grid[i] && grid[i][j]) {
                t = grid[i][j]
                if(t<50) {
                    t++
                    y = easeInCubic(0, t, y, -50, 50)
                } else if(t<100) {
                    t++
                    y = easeOutBounce(0, t-50, y-50, 50, 50)
                }
                if(t==100) {
                    grid[i][j]=0
                } else {
                    grid[i][j]=t
                }
            }
            //draw blocks > outlines and colors
            //lineTo creates a line from that point to the last specified point, without actually drawing a line
            // moveTo  moves the path to the specified point in the canvas, without creating a line
            //Stroke actually draws the path defined with the moveTo() and lineTo() methods
            //closePath creates a path from the current point back to the starting point
            //fill fills the current drawing (path)
            ctx.beginPath()
            ctx.moveTo(x + 20, y + 20)
            ctx.lineTo(x + 20, y + 100)  
            ctx.moveTo(x + 40, y + 10)  
            ctx.lineTo(x + 40, y + 90)
            ctx.lineTo(x + 20, y + 100)
            ctx.lineTo(x, y + 90)
            ctx.lineTo(x, y + 10)
            ctx.fillStyle = 'rgba(255,' + Math.floor(52-16.5*i) + ',' + Math.floor(255-16.5*j) + ',.8)'
            ctx.fill()
            ctx.stroke()
            ctx.closePath()
        
            ctx.beginPath()
            ctx.moveTo(x, y + 10)
            ctx.lineTo(x + 20, y)
            ctx.lineTo(x + 40, y + 10)
            ctx.lineTo(x + 20, y + 20)
            ctx.lineTo(x, y + 10)
            ctx.fillStyle = 'rgba(35,' + (Math.floor(35-16.5*i)-45) + ',' + (Math.floor(255-16.5*j)-65) + ',.8)'                           
            ctx.fill()
            ctx.stroke()
            ctx.closePath()
        
        }
    }

}
//set x & y axis map for mouse moves
canv.onmousemove = function(e) {  
    xmap = Math.ceil((e.offsetX + 2 * (e.offsetY || e.layerX) - 240 - 200) / 40)
    ymap = Math.ceil((e.offsetX - 2 * (e.offsetY || e.layerY) - 240 + 200) / -40) - 2
    
    if(!grid[xmap]) {
        grid[xmap] = []
    }
    if(!grid[xmap][ymap]) {
    //x, y easing speed on mouseover
        grid[xmap][ymap] = 10 
    }
}

// Go! Draw , Speed
setInterval(draw, 8)