diff --git a/index.html b/index.html index 0451558..671fa30 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + diff --git a/script.js b/script.js index 15e7a23..0eb08b0 100644 --- a/script.js +++ b/script.js @@ -11,6 +11,8 @@ canvas.width = 1024; canvas.height = 682; +// canvas.width = 1200; +// canvas.height = 675; class Cell { @@ -20,15 +22,55 @@ 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.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); - context.strokeRect(this.x, this.y, this.width, this.height); + if (this.grayValue === undefined) { + context.drawImage(this.image, this.x, this.y, this.width, this.height + , this.x, this.y, this.width, this.height); + context.strokeRect(this.x, this.y, this.width, this.height); + // if (this.x === 0 && this.y === 0) { + + 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); + // console.log('Gray value: ' + this.grayValue); + + // } + } + + if (this.grayValue !== undefined) { + // console.log('Here...'); + // const paletteIndex = Math.floor(this.grayValue / 50); + // console.log('(' + this.x + ', ' + this.y + ') palIndex:' + paletteIndex); + // context.fillStyle = '#' + this.palette[paletteIndex]; + context.fillStyle = "rgb(" + this.redAvg + "," + this.greenAvg + "," + this.blueAvg + ")"; + 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 { @@ -42,8 +84,6 @@ this.cellHeight = this.height / this.numRows; this.imageGrid = []; this.createGrid(); - - console.log(this.imageGrid); } createGrid() { @@ -54,12 +94,6 @@ } } - 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); - } - render(context) { this.imageGrid.forEach(cell => {