// Frank's Lab Image Effects
//  https://www.youtube.com/watch?v=UeZ1pTg_nMo
//
// Steve's Makerspace - Art using Satellite Maps
// ref: https://www.youtube.com/watch?v=KytAyWVtr_8

// color palette: https://coolors.co/palettes/popular/5%20colors

// ["264653","2a9d8f","e9c46a","f4a261","e76f51"]
// https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51

//
// Firefox seems to have an issue with rendering.  Google works fine.
//

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');

// dessert image...
canvas.width = 1024;
canvas.height = 682;

// deadpool image...
// canvas.width = 1200;
// canvas.height = 675;

class Cell {

    constructor(effect, x, y) {
        this.effect = effect;
        this.x = x;
        this.y = y;
        this.width = this.effect.cellWidth;
        this.height = this.effect.cellHeight;
        this.redAvg = 0;
        this.greenAvg = 0;
        this.blueAvg = 0;
        this.grayValue = undefined;
        this.grayScaleArray = [];
        // this.palette = ["264653","2a9d8f","e9c46a","f4a261","e76f51"];
        // this.palette = ["780116","f7b538","db7c26","d8572a","c32f27"];
        // this.palette = ["220901","621708","941b0c","bc3908","f6aa1c"];  // prettiest - red-orange colors
        // this.palette = ["03045e","0077b6","00b4d8","90e0ef","caf0f8"];  // blues...
        // this.palette = ["386641","6a994e","a7c957","f2e8cf","bc4749"];  // greens with one shade of red
        this.palette = ["00401e","10772a","1db233","ffcc12","ffd712"]; // greens and yellows
        // this.palette = ["172121","444554","7f7b82","bfacb5","e5d0cc"]; // gray scale
        this.slideX = 0;
        this.slideY = 0;
        this.image = document.getElementById('projectImage');
    }

    draw(context) {
            context.drawImage(this.image, this.x, this.y, this.width, this.height
                , this.x, this.y, this.width, this.height);
                
                for(let y = this.y; y < this.y + this.height; y++) {
                    for(let x = this.x; x < this.x + this.width; x++) {
                        const data = context.getImageData(x, y,1, 1);
                        this.redAvg += data.data[0];
                        this.greenAvg += data.data[1];
                        this.blueAvg += data.data[2];
                    }
                }
                const totalPixels = this.width * this.height ;
                this.redAvg = Math.floor(this.redAvg / totalPixels);
                this.greenAvg = Math.floor(this.greenAvg / totalPixels);
                this.blueAvg = Math.floor(this.blueAvg / totalPixels);
                this.grayValue = this.calculateGrayAmount(this.redAvg, this.greenAvg, this.blueAvg);
                
            const paletteIndex = Math.floor(this.grayValue / 50);
            console.log('(' + this.x + ', ' + this.y + ') palIndex:' + paletteIndex);
            context.fillStyle = '#' + this.palette[paletteIndex];
            context.fillRect(this.x, this.y, this.width, this.height);
    }

    calculateGrayAmount(red, green, blue) {
        // determine the grayAmount from the color at the pixel
        // ref: https://www2.cs.uic.edu/~i101/labs/lab8.html
        return Math.floor(red * 0.299 + green * 0.587 + blue * 0.114);
    }
}

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;

        // change cell size ... increase number of 
        // rows and columns creates smoother posterization...
        // 1-for-1 smoothest, cleanest image...
        this.numCols = this.canvas.width;
        this.numRows = this.canvas.height;
        // this.numCols = 64;
        // this.numRows = 31;
        this.cellWidth = this.width / this.numCols;
        this.cellHeight = this.height / this.numRows;
        this.imageGrid = [];
        this.createGrid();
    }

    createGrid() {
        for(let y = 0; y < this.height; y += this.cellHeight) {
            for(let x = 0 ; x < this.width; x += this.cellWidth) {
                this.imageGrid.push(new Cell(this, x, y));
            }
        }
    }

    render(context) {
        this.imageGrid.forEach(cell=> {
            cell.draw(context);
        })
    }

}

const effect = new Effect(canvas);

function animate() {
    effect.render(ctx);
    // requestAnimationFrame(animate);
}

animate();