2f:T43f,viewof operation = { let choices = radio({ title: "Image operation", options: [ { label: 'Brightness (pixel += delta)', value: "brightness" }, { label: 'Multiplication (pixel *= factor)', value: "multiplication" }, { label: 'Contrast (pixel = (pixel - middle gray) * factor + middle gray)', value: "contrast" }, { label: 'Gamma (pixel = Math.pow(pixel, gamma))', value: "gamma" }, { label: 'Mask (pixel = ((pixel >> n) << n))', value: "mask" }, { label: 'Invert low n bits (

pixel = pixel ^ (0xff>>(8-n)',
        value: "xor"
      }
    ],
    value: "brightness"
  });

  choices.setAttribute("class", "radio-buttons");

  return choices;
}30:[]
2d:{"title":"Image processing: point operations","cells":[{"id":0,"value":"md`# Image processing: point operations`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":159,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"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    mask: { min: 0, max: 8, value: 4, step: 1 },\n    xor: { min: 0, max: 8, value: 4, step: 1 }\n  };\n\n  return slider(operations[operation]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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, mask, xor };\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"},{"id":314,"value":"html`Image credit: Bernd Thaller, Licensed CC-BY`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":337,"value":"function mask(data, nbits) {\n  for (let i = 0; i < data.length; i += 4) {\n    data[i + 0] = (data[i + 0] >> nbits) << nbits;\n    data[i + 1] = (data[i + 1] >> nbits) << nbits;\n    data[i + 2] = (data[i + 2] >> nbits) << nbits;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"function xor(data, nbits) {\n  const datamask = ( 0xff) >>(8-nbits);\n  for (let i = 0; i < data.length; i += 4) {\n    data[i + 0] = (data[i + 0] ^ datamask);\n    data[i + 1] = (data[i + 1] ^ datamask);\n    data[i + 2] = (data[i + 2] ^ datamask);\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":349,"value":"url = \"https://pbs.twimg.com/media/F0milJeXsAANd6v?format=jpg&name=small\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"image = d3.image(url, { crossOrigin: \"anonymous\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { radio, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}