2d:null 2e:["$","title",null,{"children":"JPEG Compression Using Discrete Cosine Transform | Curtis Hu | Observable"}] 33:T5d7,view2 = p5(s => { var w; s.setup = function() { w = Math.min(400, width) s.createCanvas(w, 400, s.WEBGL); s.background(240); s.rotateX(s.PI/4); s.rotateZ(s.PI/6); s.scale(frequencyRange*0.1); var block = w/16; for (var x = -w/4, i = 0; i < grid.length; x+=block, i++) { for (var y = -w/4, j = 0; j < grid[0].length; y+= block, j++) { s.fill(grid[i][j]); s.square(x, y, block); } } s.beginShape(s.TRIANGLE_STRIP); s.noFill(); var det = 20; var total = block * grid.length; for (var scr_x = -w/4, x = 0; scr_x < total; scr_x += total/det, x += grid.length / det ) { for (var scr_y = -w/4, y = 0; scr_y < total; scr_y += total/det, y += grid.length / det) { // everytime it tries to calculate a point it needs to sum over all the frequencies? // inverse dct // is there a faster way? var VAL_xy = 0; for (var f_i = 0; f_i < frequencyRange; f_i++) { for (var f_j = 0; f_j < frequencyRange; f_j++) { var comp = finalGrid[f_i][f_j] * Math.cos((2*x + 1) * f_i * Math.PI/16) * Math.cos((2*y + 1) * f_j * Math.PI/16); if (f_i == 0) comp *= 1/Math.sqrt(2); if (f_j == 0) comp *= 1/Math.sqrt(2); VAL_xy += comp; } } VAL_xy = VAL_xy * 2 / frequencyRange; console.log("val", VAL_xy); s.vertex(scr_x, scr_y, VAL_xy); } } s.endShape(); } })34:[{"id":"7406be81ff8e8cbca5af6636fd441ef93f0994e8a47b9bc6e570c6ecaa2b07777bd44179121574ac9570f6998ac9bd7ccb7fb8433ca4c5537d5f681fba38a4df","href":"https://static.observableusercontent.com/files/7406be81ff8e8cbca5af6636fd441ef93f0994e8a47b9bc6e570c6ecaa2b07777bd44179121574ac9570f6998ac9bd7ccb7fb8433ca4c5537d5f681fba38a4df","name":"Lange-MigrantMother02-1.jpg","type":"image/jpeg","lastModified":1704598958737.802,"size":5835684},{"id":"b0511cc6f26ebfadb7561fa57d2cda43112f6b8fbf4ff0143cbf0ad4a5e51858b6c530bc9d3d2ef34687a41f2269ea6e1a1aaa05e01e0c37fd222acf9da96282","href":"https://static.observableusercontent.com/files/b0511cc6f26ebfadb7561fa57d2cda43112f6b8fbf4ff0143cbf0ad4a5e51858b6c530bc9d3d2ef34687a41f2269ea6e1a1aaa05e01e0c37fd222acf9da96282","name":"cropped.jpg","type":"image/jpeg","lastModified":1704599331166.253,"size":154898},{"id":"c1cff5bb67b8de5396ea2e0623e0fb3edd340827a05bfbbc5f1656730edfe1b9645dd84c6311420364ff267e872524d9969d157a03f3b66fc1d308379624e547","href":"https://static.observableusercontent.com/files/c1cff5bb67b8de5396ea2e0623e0fb3edd340827a05bfbbc5f1656730edfe1b9645dd84c6311420364ff267e872524d9969d157a03f3b66fc1d308379624e547","name":"DCT-8x8.png","type":"image/png","lastModified":1704599757660.624,"size":28184},{"id":"9c1ceb20192f4aae4aa52d4588c08ba6b0fc47104e888a67da74a5fec912da583dc43c2c1b5c97519d5c4dc337406b75689c54d1d2c40df4cb276352cc80da5d","href":"https://static.observableusercontent.com/files/9c1ceb20192f4aae4aa52d4588c08ba6b0fc47104e888a67da74a5fec912da583dc43c2c1b5c97519d5c4dc337406b75689c54d1d2c40df4cb276352cc80da5d","name":"images.png","type":"image/png","lastModified":1704784535161.992,"size":8058},{"id":"51069c52df2c8fe90acbb9f6a27819c5af4fef96ad684d3a6f4875c50e3a3a0e251f6a632f32fc267a185172846a9a066ee76410eaabf045dca4c01c146d8971","href":"https://static.observableusercontent.com/files/51069c52df2c8fe90acbb9f6a27819c5af4fef96ad684d3a6f4875c50e3a3a0e251f6a632f32fc267a185172846a9a066ee76410eaabf045dca4c01c146d8971","name":"1_bXE-JYgDbIVkTB6VKqFsfw.jpg","type":"image/jpeg","lastModified":1704786021593.905,"size":62231},{"id":"6a987ff895c1cbd2083865d35e91e68c8f40107852b193a7dbb7c9bf53054d42d17ca563a6bdc787d47f059c0ce774bfa5c7781f399b4c3693598207f31c0a75","href":"https://static.observableusercontent.com/files/6a987ff895c1cbd2083865d35e91e68c8f40107852b193a7dbb7c9bf53054d42d17ca563a6bdc787d47f059c0ce774bfa5c7781f399b4c3693598207f31c0a75","name":"stuff.png","type":"image/png","lastModified":1704786355420.443,"size":126135}] 31:{"id":"5a757b3291fa11ab","slug":"dct","title":"JPEG Compression Using Discrete Cosine Transform","thumbnail":"452765d99516c3fe2d064a9fff818763650ad3bde8496300cc738c3723dd8140","access_level":"unlisted","create_time":"$D2023-12-23T19:43:14.311Z","update_time":"$D2024-01-22T19:40:39.159Z","view_time":null,"first_public_time":"$D2023-12-23T19:43:14.311Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36cfebe167a11b5a","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":"starter_2024"},"version":451,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null}],"members":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"JPEG Compression Using Discrete Cosine Transform","cells":[{"id":0,"value":"# JPEG Compression Using Discrete Cosine Transform\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"langeMigrantmother021 = FileAttachment(\"Lange-MigrantMother02-1.jpg\").image({\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Let's first divide this up into 8x8 pixelated blocks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"cropped = FileAttachment(\"cropped.jpg\").image({\n width:300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"P5 = await require(\"p5\").then(async (P5) => {\n // newer versions of p5 sound don't work with es6 modules\n await require(\"p5@0.9.0/lib/addons/p5.sound.min.js\");\n await require(\"https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js\");\n return P5;\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"p5 = {\n return function* (_sketch) {\n const parent = DOM.element(\"div\");\n yield parent;\n const instance = new P5((p) => _sketch(p, P5), parent);\n try {\n while (true) yield parent;\n } finally {\n instance.remove();\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"Edit the following grid!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"grid = {\n return [\n [ 104, 100, 100, 100, 100, 100, 60, 60 ],\n [ 107, 95, 100, 100, 100, 100, 80, 90 ],\n [ 108, 90, 108, 100, 80, 80, 100, 120 ],\n [ 120, 100, 118, 100, 90, 100, 110, 130 ],\n [ 116, 115, 128, 120, 120, 140, 130, 140 ],\n [ 126, 116, 133, 140, 140, 150, 130, 170 ],\n [ 120, 118, 132, 140, 150, 160, 170, 190 ],\n [ 114, 119, 130, 140, 160, 170, 180, 200 ],\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"grid","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"The following grid pattern is the 8x8 block we've isolated","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"p5(s => {\n s.setup = function() {\n var side = 200;\n s.createCanvas(side, side);\n\n var block = side/8;\n for (var x = 0, i = 0; i < grid.length; x+=block, i++) {\n for (var y = 0, j = 0; j < grid[0].length; y+= block, j++) {\n console.log(grid[i][j])\n s.fill(grid[i][j]);\n s.square(x, y, block);\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Note: the lines above / the 8x8 block above are not accurate. Only meant to demonstrate visually what we are doing.\n\nFor demonstration purposes, let's visualize these blocks as a 3 dimensional surface. You can imagine a smooth curve fitting the datapoints, horizontally and vertically. This smooth curve can be decomposed into a series of cosines using discrete cosine transform in the following cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"viewof resetBtn = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"view = p5(s => {\n resetBtn;\n var w;\n s.setup = function() {\n w = Math.min(400, width)\n s.createCanvas(w, 400, s.WEBGL); \n \n }\n\n s.draw = function() {\n s.background(240);\n s.rotateX(s.PI/3);\n s.rotateZ(s.millis()/6000);\n \n var block = w/16;\n for (var x = -w/4, i = 0; i < grid.length; x+=block, i++) {\n for (var y = -w/4, j = 0; j < grid[0].length; y+= block, j++) {\n s.fill(grid[i][j]);\n s.square(x, y, block);\n\n s.line(x + block/2, y + block/2, 0, x + block/2, y + block/2, grid[i][j]);\n s.point(x + block/2, y + block/2, grid[i][j])\n }\n } \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"p5(s => {\n var w;\n s.setup = function() {\n w = Math.min(400, width)\n s.createCanvas(w, 400, s.WEBGL); \n }\n\n s.draw = function() {\n\n s.background(240);\n s.rotateX(s.PI/4);\n s.rotateZ(s.millis()/6000);\n \n var block = w/16;\n for (var x = -w/4, i = 0; i < grid.length; x+=block, i++) {\n s.beginShape();\n for (var y = -w/4, j = 0; j < grid[0].length; y+= block, j++) {\n s.fill(grid[i][j]);\n s.square(x, y, block);\n\n s.noFill();\n s.curveVertex(x + block/2, y + block/2, grid[i][j]);\n }\n s.endShape();\n }\n\n for (var y = -w/4, j = 0; j < grid[0].length; y+= block, j++) {\n s.beginShape();\n for (var x = -w/4, i = 0; i < grid.length; x+=block, i++) {\n s.noFill();\n s.curveVertex(x + block/2, y + block/2, grid[i][j]);\n }\n s.endShape();\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"Note that the dataset outlines horizontal and vertical curves. Let's transform these into a series of cosines waves. First in the \"horizontal\" then the \"vertical\".\n\nLet's use Discrete Cosine Transform (a sibling of discrete fourier transform - you can see my other observable post https://observablehq.com/@funnyscar/fourier-series) to reduce these waves into only frequencies. (Look at https://www.mathworks.com/help/images/discrete-cosine-transform.html)\n\n${tex.block`X[f] = \\beta(f) \\sum_{n=0}^{N-1} x_n \\cdot \\cos \\left(\\frac{(2n + 1) \\pi f}{2 N} \\right), \\beta(f) = \\begin{cases} \\sqrt{\\frac{1}{N}} \\text{ where } f = 0 \\\\ \\sqrt{\\frac{2}{N}} \\end{cases} `}\n\nIntuitively, this is like using dot product for a measure of \"similarity.\" Hence, we can find the frequencies ${tex`f`} that are most \"similar\" to the dataset.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"viewof row = Inputs.range([0, 7], {label: \"ROW\", step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"p5(s => {\n resetBtn;\n var w;\n s.setup = function() {\n w = Math.min(400, width)\n s.createCanvas(w, 400, s.WEBGL); \n \n }\n\n s.draw = function() {\n s.background(240);\n s.rotateX(s.PI/3);\n s.rotateZ(s.PI/2);\n \n var block = w/16;\n for (var x = -w/4, i = row; i < row+1; x+=block, i++) {\n for (var y = -w/4, j = 0; j < grid[0].length; y+= block, j++) {\n s.fill(grid[i][j]);\n s.square(x, y, block);\n\n s.line(x + block/2, y + block/2, 0, x + block/2, y + block/2, grid[i][j]);\n s.point(x + block/2, y + block/2, grid[i][j])\n }\n } \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"We can calculate ${tex`X[f]`} for frequencies ${tex`0,1,2,...,N-1`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"p5(s => {\n s.setup = function() {\n var side = 250;\n s.createCanvas(side, side);\n\n var block = side/8;\n\n s.text(\"row from 8x8 grid\", 0, 10);\n for (var x = 0, i = 0; i < grid.length; x+=block, i++) {\n s.fill(grid[row][i]);\n s.square(x, 20, block); \n }\n\n s.text(\"resulting value of X[f], for f=0,1,2...7\", 0, side/2-10)\n for (var f = 0, x = 0; f < grid.length; f++, x+= block) {\n var X_f = 0;\n for (var n = 0; n < grid.length; n++) {\n var x_n = grid[row][n]; \n X_f += x_n * s.cos((2*n + 1) * s.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/grid.length) : Math.sqrt(2 / grid.length);\n\n s.fill(255);\n s.square(x, side/2, block);\n s.fill(0);\n s.text(s.round(X_f), x, side/2+block/2)\n }\n \n\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"All ${tex`X[f], f=0,1,2...N-1`} for each row in the 8x8","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"p5(s => {\n s.setup = function() {\n var side = 250;\n s.createCanvas(side, side);\n\n var block = side/8;\n var padding = 0;\n\n for (var r = 0; r < grid.length; r ++) {\n for (var f = 0, x = 0; f < grid.length; f++, x+= block) {\n var X_f = 0;\n for (var n = 0; n < grid.length; n++) {\n var x_n = grid[r][n]; \n X_f += x_n * s.cos((2*n + 1) * s.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/grid.length) : Math.sqrt(2 / grid.length);\n\n \n s.fill(255);\n s.square(x, padding + r * block, block);\n s.fill(0);\n s.text(s.round(X_f), x, padding+block/2+r*block)\n }\n }\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"dctGrid = {\n var retGrid = JSON.parse(JSON.stringify(grid));\n for (var r = 0; r < grid.length; r ++) {\n for (var f = 0; f < grid.length; f++) {\n \n var X_f = 0;\n for (var n = 0; n < grid.length; n++) {\n var x_n = grid[r][n]; \n X_f += x_n * Math.cos((2*n + 1) * Math.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/grid.length) : Math.sqrt(2 / grid.length);\n\n retGrid[r][f] = X_f;\n }\n }\n return retGrid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"Now let's apply a DCT to the columns of this newly created matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"viewof column = Inputs.range([0, 7], {label: \"COLUMN \", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"p5(s => {\n s.setup = function() {\n var side = 250;\n s.createCanvas(side, side);\n\n var block = side/8;\n\n s.text(\"cols\", block+10, 15);\n for (var x = 0, i = 0; i < grid.length; x+=block, i++) {\n s.fill(255);\n s.square(0, x, block);\n s.fill(0);\n s.text(s.round(dctGrid[i][column]), 0, x + block)\n }\n\n s.text(\"apply DCT\", side/2 + block + 10, 10)\n for (var f = 0, x = 0; f < dctGrid.length; f++, x+= block) {\n var X_f = 0;\n for (var n = 0; n < dctGrid.length; n++) {\n var x_n = dctGrid[n][column]; \n X_f += x_n * s.cos((2*n + 1) * s.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/dctGrid.length) : Math.sqrt(2 / dctGrid.length);\n\n s.fill(255);\n s.square(side/2, x, block);\n s.fill(0);\n s.text(s.round(X_f), side/2, x+block)\n }\n \n\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"p5(s => {\n s.setup = function() {\n var side = 250;\n s.createCanvas(side, side);\n\n var block = side/8;\n var padding = 0;\n\n for (var c = 0; c < dctGrid.length; c++) {\n for (var f = 0, x = 0; f < dctGrid.length; f++, x+= block) {\n var X_f = 0;\n for (var n = 0; n < dctGrid.length; n++) {\n var x_n = dctGrid[n][c]; \n X_f += x_n * s.cos((2*n + 1) * s.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/dctGrid.length) : Math.sqrt(2 / dctGrid.length);\n\n s.fill(255);\n s.square(c*block, x, block);\n s.fill(0);\n s.text(s.round(X_f), c*block, x+block)\n }\n }\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"finalGrid = {\n var retGrid = JSON.parse(JSON.stringify(dctGrid));\n for (var c = 0; c < dctGrid.length; c++) {\n for (var f = 0; f < dctGrid.length; f++) {\n var X_f = 0;\n for (var n = 0; n < dctGrid.length; n++) {\n var x_n = dctGrid[n][c]; \n X_f += x_n * Math.cos((2*n + 1) * Math.PI * f / 16);\n }\n\n X_f *= f == 0 ? Math.sqrt(1/dctGrid.length) : Math.sqrt(2 / dctGrid.length);\n\n retGrid[f][c] = X_f;\n }\n }\n return retGrid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"Now our cosine waves are both horizontal and vertical. We can visually see this in the following image. Basically, low frequencies at the top left. High frequencies at the bottom right. These frequencies increase in both directions and result in a superimposed pattern of both vertical and horizontal waves.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"dct8x8 = FileAttachment(\"DCT-8x8.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"### Condensed formula\n\n#### DCT Transform\n\n${tex.block`B_{uv} = \\alpha(u) \\alpha(v) \\frac{2}{N} \\sum_{x=0}^{N-1} \\sum_{y=0}^{N-1} A_{xy} \\cos \\left( \\frac{(2x+1) u \\pi}{2N}\\right) \\cos\\left( \\frac{(2y+1) v \\pi}{2N} \\right)`}\n\n${tex`\\alpha(u) = \\begin{cases} \\frac{1}{\\sqrt{2}} \\text{ where } u = 0 \\\\ 1 \\end{cases}`}\n\nWhere ${tex`B_{uv}`} are the coefficient in the DCT matrix.\n\n#### Inverse DCT Transform\n\n${tex.block`A_{xy} = \\sum_{x=0}^{N-1} \\sum_{y=0}^{N-1} \\alpha(u) \\alpha(v) B_{uv} \\cos \\left( \\frac{(2x+1) u \\pi}{2N}\\right) \\cos\\left( \\frac{(2y+1) v \\pi}{2N} \\right)`}\n\nWhere ${tex`A_{xy}`} are the pixel values in the 8x8 block image\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"### Resulting Matrix\nThe result from applying DCT on the vertical and horizontal directions is the following pattern. These are the coefficients for the \"cosines\" waves that make up our entire 8x8 block.\n\nNote: I'm using absolute value of the actual coefficient. The idea is that the higher the magnitude, the stronger we see this frequency in the 8x8 block.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"viewof shadows = Inputs.range([255, Math.max(...finalGrid.map(e => Math.max(...e.map(r => Math.abs(r)))))], {label: \"Highlights\", step: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"p5(s => {\n s.setup = function() {\n var side = 200;\n s.createCanvas(side, side);\n var block = side/8;\n var maxEl = Math.max(...finalGrid.map(e => Math.max(...e.map(r => Math.abs(r)))));\n var minEl = Math.min(...finalGrid.map(e => Math.min(...e.map( r => Math.abs(r)))));\n console.log(maxEl, minEl)\n \n for (var x = 0, i = 0; i < finalGrid.length; x+=block, i++) {\n for (var y = 0, j = 0; j < finalGrid[0].length; y+= block, j++) {\n s.fill(s.map(Math.abs(finalGrid[i][j]), minEl, maxEl, 0, shadows));\n s.square(x, y, block);\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"Here I'm turning our coefficients into the superposition of cosine waves. As you turn the slider, you change the number of cosine waves we include.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"viewof frequencyRange = Inputs.range([0, 7], {label: \"Frequency Range\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"**Now, here's the exploitation we'll make to compress our image.**\n\nWe've already turned our 8x8 block into its frequency representation using the DCT methods above. \n\nNow since most of the image is simply low frequencies - as represented by the bright tiles on the top left corner of the \nimage above - we can focus on these frequencies while minimizing information loss.\n\nHigh frequencies = high details = eyes care less about this information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"## Huffman encoding review \n\nIntuitively, more common phrases/characters get assigned a shorter bitstring symbol. As an analog, \"laugh out loud\" is commonly compressed as \"lol\" since it is so common.\n\nIn Huffman encoding, we assign a bitstring based on a binary tree. For example:\n\ncharacter | frequency\n--- | ---\na | 3\nb | 1\nc | 18\nd | 4\n\nWe can create the prefix tree:\n```\n\n (26)\n / \\\n (8) c\n / \\\n (4) d\n / \\\na b\n```\n\nBy assigning left branch 0, right branch 1. We've derived the following symbolic representation using the frequency of symbols.\n\ncharacter | code\n--- | ---\na | 000\nb | 001\nc | 1\nd | 01","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"### Huffman encoding Usage\n\nHigher frequencies are more detailed and less important. We can remove these or at least remove redundant information.\n\nIf you remember huffman encoding compressed repeated or redundant information based on frequency.\n\n- Lossless compression would need to encode all of the 8x8 block\n- Lossy compression would mean we could remove some of the high frequency information. Pretend it is 0 or ignore if below a threshold, etc.\n\nSince most of the 8x8 block is 0s or low numbers, by using huffman encoding and snaking the 8x8 block in the following way, we maximize the likelihood of getting redundant information in our array of numbers. For example, [15, 6, 2, 3, 0, 0, 0, 0, 0, 0, 0 ] is ideal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"images = FileAttachment(\"images.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"## Lossless vs Lossy\n\nFor better perspective of lossless, you can look this demo (https://demonstrations.wolfram.com/JPEGCompressionAlgorithm/). The image below also shows how the high frequencies are squeezed to zero.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"stuff = FileAttachment(\"stuff.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Ultimately, we get a compressed version of our image by using a compressed version of the frequency representation.\n\nImage Before >> Image after","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"