diff --git a/best_time_of_day_for_outdoor_photography_1024x682.webp b/best_time_of_day_for_outdoor_photography_1024x682.webp
new file mode 100644
index 0000000..ecb5049
--- /dev/null
+++ b/best_time_of_day_for_outdoor_photography_1024x682.webp
Binary files differ
diff --git a/deadpool_1200x675.jpg b/deadpool_1200x675.jpg
new file mode 100644
index 0000000..d589549
--- /dev/null
+++ b/deadpool_1200x675.jpg
Binary files differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0451558
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Posterization
+
+
+
+
+
+ 
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..15e7a23
--- /dev/null
+++ b/script.js
@@ -0,0 +1,90 @@
+// Frank's Lab Image Effects
+// https://www.youtube.com/watch?v=UeZ1pTg_nMo
+
+// color palette: https://coolors.co/palettes/popular/5%20colors
+
+// ["264653","2a9d8f","e9c46a","f4a261","e76f51"]
+// https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51
+
+const canvas = document.getElementById('canvas1');
+const ctx = canvas.getContext('2d');
+canvas.width = 1024;
+canvas.height = 682;
+
+
+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.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);
+ }
+
+}
+
+class Effect {
+ constructor(canvas) {
+ this.canvas = canvas;
+ this.width = this.canvas.width;
+ this.height = 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();
+
+ console.log(this.imageGrid);
+ }
+
+ 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));
+ }
+ }
+ }
+
+ 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 => {
+ cell.draw(context);
+ })
+ }
+
+}
+
+const effect = new Effect(canvas);
+console.log(effect);
+effect.render(ctx);
+
+// function animate() {
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+// 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
+*/
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1e0d597
--- /dev/null
+++ b/style.css
@@ -0,0 +1,19 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+#canvas1 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: white;
+ border: 1px solid black;
+ /* width: 1024px;
+ height: 682px; */
+}
+
+#projectImage {
+ display: none;
+}
\ No newline at end of file