diff --git a/index.html b/index.html
index 0451558..671fa30 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
     
     <canvas id="canvas1"></canvas>
     <img src="best_time_of_day_for_outdoor_photography_1024x682.webp" id="projectImage">
+    <!-- <img src="deadpool_1200x675.jpg" id="projectImage"> -->
 	  <script src="script.js" defer></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index a886d22..792c92e 100644
--- a/script.js
+++ b/script.js
@@ -15,9 +15,14 @@
 
 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 {
 
@@ -27,23 +32,52 @@
         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.slideX, this.y + this.slideY, this.width, this.height
-            , this.x, this.y, this.width, this.height);
-        // context.drawImage(this.image, 0, 0);
-        context.strokeRect(this.x, this.y, this.width, this.height);
+            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);
     }
 
-    update() {
-        // this.slideX = Math.random() * 10 - 10;
-        this.slideX -= 5;
+    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 {
@@ -51,15 +85,18 @@
         this.canvas = canvas;
         this.width = this.canvas.width;
         this.height = this.canvas.height;
-        this.numCols = 64;
-        this.numRows = 31;
+
+        // 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();
-        // this.cell = new Cell(this, 0, 0);
-        
-        // console.log(this.imageGrid);
     }
 
     createGrid() {
@@ -70,16 +107,8 @@
         }
     }
 
-    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.cell.draw(context);
         this.imageGrid.forEach(cell=> {
-            // cell.update();
             cell.draw(context);
         })
     }
@@ -87,21 +116,10 @@
 }
 
 const effect = new Effect(canvas);
-// console.log(effect);
-// effect.render(ctx);
 
 function animate() {
     effect.render(ctx);
-    requestAnimationFrame(animate);
+    // requestAnimationFrame(animate);
 }
 
 animate();
-
-/*
-TODO:
-1. For each cell:
-    a. average red, green and blue colors
-    b. calculate gray amount
-    c. determine palette color
-        i.  0 - 50, 51 - 101, 102 - 152, 153 - 203, 204 - 255
-*/