var canvas = document.querySelector('.cnv');
var startingPixel = Math.floor((Math.random() * 255));
var ctx = canvas.getContext('2d');
var color;
//var pixels = [];
var a = [];
var inc = 0.001;
getPixels();

function getPixels() {
    for (var i = 0; i < canvas.height; i++) {
        a[i] = [];
        for (var j = 0; j < canvas.width; j++) {
            a[i][j] = j;
            drawPixels(i, j);

        }
    }


    //console.log(a);
}


function drawPixels(x, y) {
    ctx.beginPath();
    ctx.rect(x, y, 1, 1);
    ctx.fillStyle = smooth(x, y);
    ctx.fill();
    ctx.closePath();
}



function getHeight(x, y) {
    startingPixel += Math.floor((Math.random() * 50) - 25);

    //console.log(startingPixel);
    if (startingPixel >= 255) {
        startingPixel = 255;
    }
    if (startingPixel <= 0) {
        startingPixel = 0;
    }
    //return 'rgb(' + startingPixel + ',' + startingPixel + ',' + startingPixel + ')';
    return startingPixel;
}

function smooth(x, y) {
    var corners = parseInt((getHeight(x - 1, y - 1) + getHeight(x + 1, x + 2) + getHeight(x + 1, y - 1) + getHeight(x + 1, y + 1)) / 20);

    var sides = parseInt((getHeight(x, y - 1) + getHeight(x, y + 1) + getHeight(x - 1, y) + getHeight(x + 1, y)) / 10);

    var center = parseInt((getHeight(x, y)) / 4);

    var total = parseInt(center + sides + corners);
    //console.log(total);
    //console.log(total);
    if (total < 30) {
        return '#3388ff';
    }
    if (total < 50) {
        return '#55aaff';
    }
    if (total < 70) {
        return '#77ccff';
    }
    if (total < 100) {
        return '#ffdd99'
    }
    if (total < 140) {
        return '#ccff77';
    }
    if (total < 180) {
        return '#44cc33';
    }
    if (total < 220) {
        return '#aaa';
    }
    if (total < 255) {
        return '#666';
    }

    //return 'rgb(' + total + ',' + total + ',' + total + ')';
}