2c:null 2d:["$","title",null,{"children":"Writing in Emoji | Evan Dorsky | Observable"}] 32:T411,function getMetric(im) { let im_g = new cv.Mat() let im_th = new cv.Mat() cv.cvtColor(im, im_g, cv.COLOR_BGR2GRAY) cv.adaptiveThreshold(im_g, im_th, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 15, 6) cv.bitwise_not(im_th, im_th) // let skel = new cv.Mat.zeros(im_g.size().width, im_g.size().height, cv.CV_8U) // skeletonize(im_th, skel) let S = Matrixf.fromArray(im_th.data, [im_g.size().width, im_g.size().height], new Promise(() => {})) let svd = S.bdcSVD(Eigen.ComputeThinU | Eigen.ComputeThinV, invalidation) let svs = svd.singularValues(invalidation) // get largest eigenvector and normalize let U = svd.matrixU(invalidation) let Ua = ndarray(U.buffer, U.shape, U.offset, U.stride) let Ucol0a = Ua.pick(0, null) let Ucol0 = Matrixf.columnVector(Ucol0a.data, invalidation) let Ucol0norm = Ucol0.norm() let v1 = ndarray(Ucol0.buffer, Ucol0.shape, Ucol0.offset, Ucol0.stride) for (let i = 0; i < v1.length; ++i) { // v1[i] = v1[i] / Ucol0norm } return v1.data }33:T44d,function getMetricEigenVecVal(im, convertMethod=cv.COLOR_BGR2GRAY) { let im_g = new cv.Mat() let im_th = new cv.Mat() cv.cvtColor(im, im_g, convertMethod) console.log('img after grayscale conversion') console.log(im_g) cv.adaptiveThreshold(im_g, im_th, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 15, 6) cv.bitwise_not(im_th, im_th) let skel = new cv.Mat.zeros(im_g.size().width, im_g.size().height, cv.CV_8U) skeletonize(im_th, skel) let S = Matrixf.fromArray(im_th.data, [im_g.size().width, im_g.size().height], invalidation) let eig = Eigen.ensure(invalidation, () => S.selfAdjointEigenSolver(Eigen.ComputeEigenvectors) ) let eVal = eig.eigenvalues(invalidation) // let eVala = ndarray(eVal.buffer, eVal.shape, eVal.offset, eVal.stride) let eVec = eig.eigenvectors(invalidation) // let eVeca = ndarray(eVec.buffer, eVec.shape, eVec.offset, eVec.stride) // let eig0idx = indexOfMax(eVala) console.log("SUM") // console.log(eig0idx) // let v1 = eVeca.pick(0, null) console.log('v1') // console.log(v1) return eVec.show() }34:T7bb,function Drawer({ width = 118, height = 118, curve: Curve = d3.curveBasis, stroke = "black", strokeWidth = 1.5, lineCap = "round", lineJoin = "round", } = {}) { const context = DOM.context2d(width, height, 1); const strokes = context.canvas.value = []; const curve = Curve(context); const redo = []; context.lineJoin = lineJoin; context.lineCap = lineCap; // Render and report the new value. function render() { var imageData = null context.clearRect(0, 0, width, height); for (const stroke of strokes) { context.strokeStyle = stroke.stroke; context.lineWidth = stroke.strokeWidth; context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); context.stroke(); imageData = context.getImageData(0, 0, width, height); } context.canvas.value = imageData; context.canvas.dispatchEvent(new CustomEvent("input")); } d3.select(context.canvas).call(d3.drag() .container(context.canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render)); context.canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; context.canvas.redo = stroke => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const currentStroke = []; currentStroke.stroke = typeof stroke === "function" ? stroke() : stroke; currentStroke.strokeWidth = typeof strokeWidth === "function" ? strokeWidth() : strokeWidth; strokes.push(currentStroke); redo.length = 0; return currentStroke; } // Add to the stroke when dragging. function dragged({subject, x, y}) { subject.push([x, y]); } return context.canvas; }35:[{"id":"6874f2c0785d44bd1772c2781b0957b56b54fd36c771e5833456bc5026e8c1c415d8dd1e7a9f6b962ed567ec1e8ceb13ad99c93ebef5a03b7260336cbcb945e3","href":"https://static.observableusercontent.com/files/6874f2c0785d44bd1772c2781b0957b56b54fd36c771e5833456bc5026e8c1c415d8dd1e7a9f6b962ed567ec1e8ceb13ad99c93ebef5a03b7260336cbcb945e3","name":"angry.png","type":"image/png","lastModified":1687306742917.818,"size":6715},{"id":"833f96213d648b267f974da1c334039a5a7c5b0e7db572b0eec03ed973b6180cf00b5f75f2c37e19c90b20ec65853c17e5e26502b18d1b464a18b838cb1091ce","href":"https://static.observableusercontent.com/files/833f96213d648b267f974da1c334039a5a7c5b0e7db572b0eec03ed973b6180cf00b5f75f2c37e19c90b20ec65853c17e5e26502b18d1b464a18b838cb1091ce","name":"love.png","type":"image/png","lastModified":1687306742941.197,"size":9528},{"id":"be7cb925efffeb140da8870f7677a9090091a3dbe80926c56f47d15015e294a77fe91cdca6fd5aaede2f388cc1855599a0e2fd3b55a9ea819f7935b0ea9f014a","href":"https://static.observableusercontent.com/files/be7cb925efffeb140da8870f7677a9090091a3dbe80926c56f47d15015e294a77fe91cdca6fd5aaede2f388cc1855599a0e2fd3b55a9ea819f7935b0ea9f014a","name":"smile3.png","type":"image/png","lastModified":1687307152854.611,"size":5529},{"id":"b27a57f9e1ff9bf40707d5cbcd74209ba753759ce04c8c0d0dc072f78280d62260deb2e0e13bf5c391653d354511b0b0247241107e8c12f08e91cb73f3aac807","href":"https://static.observableusercontent.com/files/b27a57f9e1ff9bf40707d5cbcd74209ba753759ce04c8c0d0dc072f78280d62260deb2e0e13bf5c391653d354511b0b0247241107e8c12f08e91cb73f3aac807","name":"smile2.png","type":"image/png","lastModified":1687307152872.036,"size":5607},{"id":"3baafdfad450b09674db5e3ba733a7b44b78e6d8bf2daa7a579f89a47eafde2ed052d49f5ae4b6488cc206a16fc9608f2853fc55f004ace90eb88382c673291b","href":"https://static.observableusercontent.com/files/3baafdfad450b09674db5e3ba733a7b44b78e6d8bf2daa7a579f89a47eafde2ed052d49f5ae4b6488cc206a16fc9608f2853fc55f004ace90eb88382c673291b","name":"frown@4.png","type":"image/png","lastModified":1687358864564.082,"size":2385},{"id":"6431a44d4f49fe1acd4ec0649b68f35c58b2e469643403e41c01c1146aee36e09532c33538da44d310c6ae9d92cc6cc0714c8879a58150dbab770fbbb01eee79","href":"https://static.observableusercontent.com/files/6431a44d4f49fe1acd4ec0649b68f35c58b2e469643403e41c01c1146aee36e09532c33538da44d310c6ae9d92cc6cc0714c8879a58150dbab770fbbb01eee79","name":"hearteyes.png","type":"image/png","lastModified":1687358935390.419,"size":6534},{"id":"cdec0e99dedd73cf6109f3bf995d4ba393ce1ff5a4e11c7153f33fa86d96088428af1a2c04fed67637dab394e2e5e1145972f7a7cd29045e5705c8a6e0eef399","href":"https://static.observableusercontent.com/files/cdec0e99dedd73cf6109f3bf995d4ba393ce1ff5a4e11c7153f33fa86d96088428af1a2c04fed67637dab394e2e5e1145972f7a7cd29045e5705c8a6e0eef399","name":"Emoji-Count-in-2023.jpg.webp","type":"image/webp","lastModified":1687803491489.023,"size":26998},{"id":"33fc6e8f673c47d2adb10c749bbfd40d038acf2fd9052ebb0e40c6911dc27efc0799c2702e87dd6bb9211cf4aec7c458449792bfcd34cda7b56c0d33dd2961a6","href":"https://static.observableusercontent.com/files/33fc6e8f673c47d2adb10c749bbfd40d038acf2fd9052ebb0e40c6911dc27efc0799c2702e87dd6bb9211cf4aec7c458449792bfcd34cda7b56c0d33dd2961a6","name":"image.png","type":"image/png","lastModified":1687802768780.427,"size":579383},{"id":"2c1fa39e5d25e3417c4ec1cb15960136dad2a1aa815c08491a2d220d8adc0d3d99bcce715fd44ccdad06d8d57b4d32addb9ac38f7b2f45162ec8b74ef34e85a4","href":"https://static.observableusercontent.com/files/2c1fa39e5d25e3417c4ec1cb15960136dad2a1aa815c08491a2d220d8adc0d3d99bcce715fd44ccdad06d8d57b4d32addb9ac38f7b2f45162ec8b74ef34e85a4","name":"surprise.png","type":"image/png","lastModified":1687306742908.197,"size":7486},{"id":"12acdd7ebfb6efe95689df8d9c4eeb284977d25256a74a86c5520780330e405a826db6e9ef18681c9b2d101c55e5de09845f914c761c14b44ee5b9bb8fdad712","href":"https://static.observableusercontent.com/files/12acdd7ebfb6efe95689df8d9c4eeb284977d25256a74a86c5520780330e405a826db6e9ef18681c9b2d101c55e5de09845f914c761c14b44ee5b9bb8fdad712","name":"flat@2.png","type":"image/png","lastModified":1687358878851.83,"size":1566},{"id":"d5b2cd2d10fc0ab311e063b4390545f0a360a199e006bc26fc0bb6076d769f0236d1f521d6ac5c503fd687d36ac52eedbf45c6afebb3c97ff99ced422abeeaf8","href":"https://static.observableusercontent.com/files/d5b2cd2d10fc0ab311e063b4390545f0a360a199e006bc26fc0bb6076d769f0236d1f521d6ac5c503fd687d36ac52eedbf45c6afebb3c97ff99ced422abeeaf8","name":"frown2.png","type":"image/png","lastModified":1687307189330.646,"size":5596},{"id":"8703f61f87e73a610ca579d1984d247c887a0bf9345d0c060c68ab1e77616da904209f2c040cd0ad8220422d985d7514dbd03d83ca3e1a5e46d8b0ff7b761b08","href":"https://static.observableusercontent.com/files/8703f61f87e73a610ca579d1984d247c887a0bf9345d0c060c68ab1e77616da904209f2c040cd0ad8220422d985d7514dbd03d83ca3e1a5e46d8b0ff7b761b08","name":"smile@3.png","type":"image/png","lastModified":1687358878797.365,"size":2612}] 30:{"id":"34ff5ae9cce96990","slug":"emoji-entry","title":"Writing in Emoji","thumbnail":"31049badf823e2a2556c942dfad346514d77e6e0fe66b4345843b4a642ab6c41","access_level":"public","create_time":"$D2023-06-20T14:24:01.907Z","update_time":"$D2024-03-04T03:18:07.384Z","view_time":null,"first_public_time":"$D2023-06-20T14:24:01.907Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":"starter_2024"},"version":1004,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6265215c119b2156","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":null}],"members":[{"type":"individual","id":"6265215c119b2156","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Writing in Emoji","cells":[{"id":0,"value":"# Writing in Emoji","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":940,"value":"I find the practice of scrolling through a list of Emoji – looking for the one that best represents the feeling I want to convey to my friend – bizarre and dissociating.\n\nTapping on a yellow circle in a sea of near-identical yellow circles doesn't look or feel like expressing an emotion. My mirror neurons are going crazy. Why do we still do it this way?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":943,"value":"## A brief and incomplete history of emoji entry interfaces\n\nThe history of emoji themselves is well documented by [WIRED](https://www.wired.com/story/guide-emoji/) and others.\n\nI'm more interested in the way we _enter_ emoji into our devices. For simplicity I'm starting the history with the introduction of image-based emoji.\n\n### 1999: The Keyboard\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"{\n console.log('get metric for smile2')\n let sm2 = getMetric(cv.imread(await FileAttachment(\"smile2.png\").image()))\n console.log('get metric for smile3')\n let sm3 = getMetric(cv.imread(await FileAttachment(\"smile3.png\").image()))\n console.log('get metric for frown2')\n let fr2 = getMetric(cv.imread(await FileAttachment(\"frown2.png\").image()))\n\n let test = cv.imread(await FileAttachment(\"smile2.png\").image())\n\n console.log('get metrics for reference')\n let metrics = {\n 'flat': getMetric(cv.imread(await FileAttachment(\"flat@2.png\").image())),\n 'smile': getMetric(cv.imread(await FileAttachment(\"smile@3.png\").image())),\n 'frown': getMetric(cv.imread(await FileAttachment(\"frown@4.png\").image())),\n 'hearteyes': getMetric(cv.imread(await FileAttachment(\"hearteyes.png\").image()))\n }\n \n const mat = new cv.Mat(118, 118, cv.CV_8UC3);\n\n canvasMat(mat)\n\n let drawing_met = getMetric(mat)\n\n mat.delete()\n\n let res = pick(drawing_met, metrics)\n\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof canvas.redo();\n else viewof canvas.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof canvas.redo();\n form.undo.onclick = () => viewof canvas.undo();\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"viewof canvas = Drawer({\n width: 118,\n height: 118,\n stroke: \"#000\",\n strokeWidth: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"function dot(a, b) {\n let l = a.length\n let sum = 0\n for (let i = 0; i < l; ++i) {\n sum += a[i]*b[i]\n }\n return sum\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"function pick(val, metrics) {\n let rs = {}\n for (let m in metrics) {\n let metric = metrics[m]\n\n rs[m] = dot(metric, val)\n }\n\n let running_max = -1000\n let running_max_name = \"\"\n for (let m in rs) {\n let r = rs[m]\n console.log(`dot for ${m}: ${r}`)\n if (running_max < r) {\n running_max = r\n running_max_name = m\n }\n }\n\n return running_max_name\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"function canvasMat(mat) {\n let data = canvas.data\n let width = canvas.width\n let height = canvas.height\n\n const matDataLength = mat.data.length;\n for (let i = 0, j = 0; i < matDataLength; i += 3, j += 4) {\n mat.data[i] = 255-data[j+3]; // blue channel\n mat.data[i + 1] = 255-data[j + 3]; // green channel\n mat.data[i + 2] = 255-data[j + 3]; // red channel\n }\n \n //nestedImageArray is the correct shape to be converted to matrix.\n\n\n //openCV often defaults to BGR-type image matrix, so lets color convert the pixel order\n \n // const BGRAmat = RGBAmat.cvtColor(cv.COLOR_RGBA2BGRA);\n \n // let im = new cv.Mat(cv.CV_8U)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"function dologs(mat) {\n console.log(mat.matSize)\n console.log(mat.rows)\n console.log(mat.cols)\n console.log(mat.step)\n console.log(mat.data.length)\n console.log(mat.type())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"// https://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array\nfunction indexOfMax(arr) {\n if (arr.length === 0) {\n return -1;\n }\n\n var max = arr[0];\n var maxIndex = 0;\n\n for (var i = 1; i < arr.length; i++) {\n if (arr[i] > max) {\n maxIndex = i;\n max = arr[i];\n }\n }\n\n return maxIndex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function skeletonize(im, skel) {\n let im2 = new cv.Mat()\n\n cv.threshold(im, im2,127,255,0)\n const ksize = new cv.Size (3,3)\n const element = cv.getStructuringElement(cv.MORPH_CROSS, ksize)\n\n let done = false\n\n let temp = new cv.Mat()\n let t2 = new cv.Mat()\n let eroded = new cv.Mat()\n \n let runs = 0\n while (!done) {\n cv.erode(im2, eroded, element)\n cv.dilate(eroded, temp, element)\n cv.subtract(im2, temp, temp)\n \n // workaround for strange bug where\n // bitwise_or seems to only work if dst and second arg are the same\n temp.copyTo(t2)\n cv.bitwise_or(skel, temp, temp)\n temp.copyTo(skel)\n t2.copyTo(temp)\n \n eroded.copyTo(im2)\n\n let zeros = cv.countNonZero(eroded)\n \n runs += 1\n if (zeros == 0) {\n done = true\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function imdisp(image, height=400) {\n const im_resized = new cv.Mat();\n\n const ar = image.cols / image.rows;\n const size = new cv.Size(parseInt(ar*height), height);\n \n cv.resize(image, im_resized, size, 0, 0, cv.INTER_AREA);\n \n const canvas = DOM.canvas(im_resized.cols, im_resized.rows);\n cv.imshow(canvas, image);\n im_resized.delete();\n \n canvas.style.cssText += `max-height:${height}px;`\n return html`

${canvas}

\n `; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"### Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":985,"value":"https://www.wired.com/story/guide-emoji/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":949,"value":"### Includes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {cv, handleError, registerFile} from \"@mootari/opencv-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"import { ndarray } from 'f181985b512ab7f4'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { Matrixf, Eigen } from \"@rreusser/eigen\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"