2a:null 2b:["$","title",null,{"children":"Image processing: point operations | Jake Low | Observable"}] 30:[] 2e:{"id":"6b8459215491cba4","slug":"image-processing-point-operations","title":"Image processing: point operations","thumbnail":"1b640ba4ead4564d50396a4d79b2aa0117dda15827942eb24bc59433cee06fc8","access_level":"public","create_time":"$D2019-09-05T04:54:08.811Z","update_time":"$D2021-03-15T05:41:14.760Z","view_time":null,"first_public_time":"$D2019-09-26T05:12:20.882Z","has_unpublished_edits":null,"fork":false,"stars":27,"starred":false,"owner":{"type":"team","id":"cbb2b32473d3e648","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":"starter_2024"},"version":334,"publish_version":334,"role":null,"authored":false,"authors":[{"type":"individual","id":"e30eca3d7ea0ab2c","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":null}],"members":[{"type":"individual","id":"e30eca3d7ea0ab2c","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Image processing: point operations","cells":[{"id":0,"value":"md`# Image processing: point operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`\nIn image processing, a point operation is an image transformation in which the new value of each pixel depends only on the previous value of that pixel, and not on that pixel's position in the image or the values of its neighbors.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof operation = {\n let choices = radio({\n title: 'Image operation',\n options: [\n {\n label:\n 'Brightness (pixel += delta)',\n value: 'brightness'\n },\n {\n label:\n 'Multiplication (pixel *= factor)',\n value: 'multiplication'\n },\n {\n label:\n 'Contrast (pixel = (pixel - middle gray) * factor + middle gray)',\n value: 'contrast'\n },\n {\n label:\n 'Gamma (pixel = Math.pow(pixel, gamma))',\n value: 'gamma'\n }\n ],\n value: 'brightness'\n });\n\n choices.setAttribute(\"class\", \"radio-buttons\");\n\n return choices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof amount = {\n const operations = {\n brightness: { min: -100, max: 100, step: 1 },\n multiplication: { min: 0, max: 2, step: 0.01 },\n contrast: { min: 0, max: 2, step: 0.01 },\n gamma: { min: 0, max: 3, value: 1, step: 0.01 }\n };\n\n return slider(operations[operation]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"canvas = {\n const canvas = DOM.canvas(image.naturalWidth, image.naturalHeight);\n const context = canvas.getContext(\"2d\");\n canvas.style = \"width: 100%\";\n\n context.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);\n\n const imageData = context.getImageData(\n 0,\n 0,\n image.naturalWidth,\n image.naturalHeight\n );\n\n const operations = { brightness, multiplication, contrast, gamma };\n\n operations[operation](imageData.data, amount);\n\n context.putImageData(imageData, 0, 0);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"html`Image credit: Bernd Thaller, Licensed CC-BY`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function brightness(data, delta) {\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] = data[i + 0] + delta;\n data[i + 1] = data[i + 1] + delta;\n data[i + 2] = data[i + 2] + delta;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function multiplication(data, factor) {\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] *= factor;\n data[i + 1] *= factor;\n data[i + 2] *= factor;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function contrast(data, factor) {\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] = (data[i + 0] - 127) * factor + 127;\n data[i + 1] = (data[i + 1] - 127) * factor + 127;\n data[i + 2] = (data[i + 2] - 127) * factor + 127;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"function gamma(data, power) {\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] = 255 * Math.pow(data[i + 0] / 255, power);\n data[i + 1] = 255 * Math.pow(data[i + 1] / 255, power);\n data[i + 2] = 255 * Math.pow(data[i + 2] / 255, power);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"url = \"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Cappuchin_Bridge_(30706076020).jpg/1079px-Cappuchin_Bridge_(30706076020).jpg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"image = d3.image(url, { crossOrigin: \"anonymous\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import { radio, slider } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"