2d:null 2e:["$","title",null,{"children":"Color transformations | Michiel Dral | Observable"}] 33:T6cf,viewof options = { return compose.html`

	Red	Green	Blue	Alpha	X
Red	${compose.viewof({ rr: multiplier_slider(1) })}	${compose.viewof({ rg: multiplier_slider(0) })}	${compose.viewof({ rb: multiplier_slider(0) })}	${compose.viewof({ ra: multiplier_slider(0) })}	${compose.viewof({ rx: absolute_slider() })}
Green	${compose.viewof({ gr: multiplier_slider(0) })}	${compose.viewof({ gg: multiplier_slider(1) })}	${compose.viewof({ gb: multiplier_slider(0) })}	${compose.viewof({ ga: multiplier_slider(0) })}	${compose.viewof({ gx: absolute_slider() })}
Blue	${compose.viewof({ br: multiplier_slider(0) })}	${compose.viewof({ bg: multiplier_slider(0) })}	${compose.viewof({ bb: multiplier_slider(1) })}	${compose.viewof({ ba: multiplier_slider(0) })}	${compose.viewof({ bx: absolute_slider() })}
Alpha	${compose.viewof({ ar: multiplier_slider(0) })}	${compose.viewof({ ag: multiplier_slider(0) })}	${compose.viewof({ ab: multiplier_slider(0) })}	${compose.viewof({ aa: multiplier_slider(1) })}	${compose.viewof({ ax: absolute_slider() })}

`; }34:T660,{ let better = Array.from(originals.querySelectorAll('canvas')).map(canvas => { let width = canvas.width; let height = canvas.height; let imageData = canvas.getContext('2d').getImageData(0, 0, width, height); let data = imageData.data; // let rgb = 1; // let alpha = 3; // let matrix = [ // [rgb, rgb, rgb, alpha, 0], // [rgb, rgb, rgb, alpha, 0], // [rgb, rgb, rgb, alpha, 0], // [0, 0, 0, 1, 0] // ]; // let matrix = [ // [1, 0, 0, 0, 0], // [0, 1, 0, 0, 0], // [0, 0, 1, 0, 0], // [0, 0, 0, 1, 0] // ]; let matrix = [ [options.rr, options.rg, options.rb, options.ra, options.rx], [options.gr, options.gg, options.gb, options.ga, options.gx], [options.br, options.bg, options.bb, options.ba, options.bx], [options.ar, options.ag, options.ab, options.aa, options.ax] ]; let matrix_fast_questionmark = matrix.flat(); if (FAST_MODE) { for (var i = 0; i < data.length; i = i + 4) { transform_color_fast(i, data, matrix); } } else { for (var i = 0; i < data.length; i = i + 4) { let [r, g, b, a] = transform_color(data.slice(i, i + 4), matrix); data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = a; } } let context = DOM.context2d( width / window.devicePixelRatio, height / window.devicePixelRatio ); // drawCheckeredBackground(context.canvas, 8, 8); context.putImageData(imageData, 0, 0); return context.canvas; }); return html`

${better}

`; }35:T48c,html``36:[{"id":"52b8998038cb50c3a6fb4bd0bae496e9bfe74d299efa07ebfd9cfe7193c5f8724c8b3e4338e0f575989a8cc038c00c6e905ea0f1aee0a6088d41992357081026","href":"https://static.observableusercontent.com/files/52b8998038cb50c3a6fb4bd0bae496e9bfe74d299efa07ebfd9cfe7193c5f8724c8b3e4338e0f575989a8cc038c00c6e905ea0f1aee0a6088d41992357081026","name":"Play Store.png","type":"image/png","lastModified":1582948709714.422,"size":21096},{"id":"60d290c3b961e6cc2053f1c0179e370e997763377fa8e6bb37b56e0dda154b27cd97a82682a3be0522b7a9030cd14542aaf30b379374c03d7fd1030314ed8c7d","href":"https://static.observableusercontent.com/files/60d290c3b961e6cc2053f1c0179e370e997763377fa8e6bb37b56e0dda154b27cd97a82682a3be0522b7a9030cd14542aaf30b379374c03d7fd1030314ed8c7d","name":"Whatsapp.png","type":"image/png","lastModified":1582948712798.014,"size":21961},{"id":"8d461cb898d713c6393029f4398a3e5bd15e1c76d019d46843d700d891a3e3e063a77f17d71144e74973c8fda43f5a760eeb0672926bd95921be0a6c884f5bc1","href":"https://static.observableusercontent.com/files/8d461cb898d713c6393029f4398a3e5bd15e1c76d019d46843d700d891a3e3e063a77f17d71144e74973c8fda43f5a760eeb0672926bd95921be0a6c884f5bc1","name":"Snapchat.png","type":"image/png","lastModified":1582948876301.493,"size":13160}] 31:{"id":"cdaf3f344e60abe7","slug":"color-transformations","title":"Color transformations","thumbnail":"06fe31594c688aabaef98b03a60f317f72e344109a37c0790bbf1f9e5601003c","access_level":"public","create_time":"$D2020-02-22T20:46:49.492Z","update_time":"$D2020-06-14T19:13:34.148Z","view_time":null,"first_public_time":"$D2020-02-29T05:08:30.199Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":"starter_2024"},"version":410,"publish_version":410,"role":null,"authored":false,"authors":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null}],"members":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"c4100d8d7e85bf3f","slug":"these-make-me-proud","title":"These make me proud","owner":{"id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral"}},"type":"notebook","body":{"title":"Color transformations","cells":[{"id":0,"value":"md`# Color transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n let file_input = html``;\n file_input.oninput = () => {\n mutable files = [...files, file_input.files[0]];\n };\n\n return dedent(md)`\n #### Add image\n ${file_input}\n *Just drag and drop from your desktop onto the button*\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof IMAGE_HEIGHT = slider({\n title: 'Image height',\n min: 100,\n max: 500,\n value: 150,\n description: 'This is only for show, does not affect the color matrix'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"originals = {\n let images = await Promise.all(\n files.map(async file => {\n return new Promise(resolve => {\n let image = new Image();\n image.src = URL.createObjectURL(file);\n image.onload = () => resolve(image);\n });\n })\n );\n\n let WIDTH = 200;\n\n let canvasen = images.map(image => {\n let ratio = image.width / image.height;\n let context = DOM.context2d(IMAGE_HEIGHT * ratio, IMAGE_HEIGHT);\n context.drawImage(\n image,\n 0,\n 0,\n image.width,\n image.height,\n 0,\n 0,\n IMAGE_HEIGHT * ratio,\n IMAGE_HEIGHT\n );\n return context.canvas;\n });\n\n return html`\n

\n ${canvasen.map(\n (canvas, index) => html.fragment`\n {\n mutable files = [\n ...files.slice(0, index),\n ...files.slice(index + 1)\n ];\n }}>${canvas} \n `\n )}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"options","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mutable files = [\n await FileAttachment(\"Whatsapp.png\").blob(),\n await FileAttachment(\"Snapchat.png\").blob(),\n await FileAttachment(\"Play Store.png\").blob()\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"FAST_MODE = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"multiplier_slider = value => compose.html`\n

\n ${compose.default(\n slider({\n value: value,\n min: 0,\n max: 3,\n step: 0.1\n })\n )}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"absolute_slider = () => compose.html`\n

\n ${compose.default(\n slider({\n value: 0,\n min: -255,\n max: 255,\n step: 1\n })\n )}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"transform_color = (color, matrix) => {\n let [r, g, b, a] = color;\n let [\n [rr, rg, rb, ra, rx],\n [gr, gg, gb, ga, gx],\n [br, bg, bb, ba, bx],\n [ar, ag, ab, aa, ax]\n ] = matrix;\n\n return [\n r * rr + g * rg + b * rb + a * ra + rx,\n r * gr + g * gg + b * gb + a * ga + gx,\n r * br + g * bg + b * bb + a * ba + bx,\n r * ar + g * ag + b * ab + a * aa + ax\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"transform_color_fast = (index, data, matrix) => {\n let r = data[index + 0];\n let g = data[index + 1];\n let b = data[index + 2];\n let a = data[index + 3];\n let [\n [rr, rg, rb, ra, rx],\n [gr, gg, gb, ga, gx],\n [br, bg, bb, ba, bx],\n [ar, ag, ab, aa, ax]\n ] = matrix;\n\n let new_r = r * rr + g * rg + b * rb + a * ra + rx;\n let new_g = r * gr + g * gg + b * gb + a * ga + gx;\n let new_b = r * br + g * bg + b * bb + a * ba + bx;\n let new_a = r * ar + g * ag + b * ab + a * aa + ax;\n\n data[index + 0] = new_r;\n data[index + 1] = new_g;\n data[index + 2] = new_b;\n data[index + 3] = new_a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"import { compose } from \"@dralletje/compose-viewof\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import { dedent } from \"@dralletje/dedent-for-template-strings\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"