25:["$","title",null,{"children":"Extra Credit Assignment | Chiamaka | Observable"}] 49:T457,{ const canvas = DOM.canvas(width, 1); const context = canvas.getContext("2d"); canvas.style.width = `${width}px`; canvas.style.height = `${Math.round(width / 16)}px`; let mousedown = false; context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = event => { if (!mousedown) return; const rect = event.target.getBoundingClientRect(); render(event.clientX - rect.left); }; context.canvas.onmouseup = event => { mousedown = false; }; function render(x) { x = Math.min(x, width) context.clearRect(0, 0, width, 1); for (let l = 0; l < width; ++l) { context.fillStyle = l === x ? isReadable(contrastRatio(luminance(createRgb(xy[0], xy[1], l / width)), 0)) ? "black" : "white" : `hsl(${viewof hsl.value[0]}, ${viewof hsl.value[1] * 100}%, ${l / width * 100}%)`; context.fillRect(l, 0, 1, 1); } viewof hsl.value = [viewof hsl.value[0], viewof hsl.value[1], x / width]; } render(viewof hsl.value[2] * width); return context.canvas; }4a:T4c7,{ const image = await FileAttachment("splay_test6@1.jpeg").image() const canvas = DOM.canvas(image.width, image.height); const img = cv.imread(image); const data = img.clone(); cv.cvtColor(data, data, cv.COLOR_RGB2HLS); const ksize = {width : 2, height : 2}; var rgb = hexToRgb(color) // NOTE THESE VALUES ARE BGR NOT RGB // Lower-bound Skin Color const l_skin = cv.matFromArray(1,3, cv.CV_8UC1, [0, 30, 50]) // Upper-bound Skin Color const u_skin = cv.matFromArray(1,3, cv.CV_8UC1, [165,218,246]) // Computing skin threshold const skin_threshold = new cv.Mat(); // Selecting all pixels in that threshold cv.inRange(data, l_skin, u_skin,data) // Blurring the hand cv.blur(data,data, ksize) // ----------------------- NEW ----------------------- const offset = cv.Point(0,0) let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); // Extracting the contours cv.findContours(data,contours,hierarchy,cv.RETR_TREE, cv.CHAIN_APPROX_SIMPLE) // Drawing them on photo for visual representation cv.drawContours(img, contours, -1, [255,0,0,255], 10, cv.LINE_8, hierarchy, 100) cv.imshow(canvas,img) data.delete(); return sideBySide(image,canvas) }4b:[{"id":"4bf9d06116b5b3098bbb997ce65a45f24e7ed93f02aa55f09483e6e2003f0edc1e9b0f61f1b3c5f0b7ceb38c2dc19a9370667d36a4addcef1bab35295c9e8a0f","href":"https://static.observableusercontent.com/files/4bf9d06116b5b3098bbb997ce65a45f24e7ed93f02aa55f09483e6e2003f0edc1e9b0f61f1b3c5f0b7ceb38c2dc19a9370667d36a4addcef1bab35295c9e8a0f","name":"Screenshot 2023-04-19 at 12.11.45 AM.png","type":"image/png","lastModified":1681877516770.428,"size":18571},{"id":"2426740ba6a0f7520164ea401231e97899e00e9cccfaaff052df982577b07df01eb435e3138811b5d61a1412cb955f455043e1b4fd7a2e02bd7d693899038c6b","href":"https://static.observableusercontent.com/files/2426740ba6a0f7520164ea401231e97899e00e9cccfaaff052df982577b07df01eb435e3138811b5d61a1412cb955f455043e1b4fd7a2e02bd7d693899038c6b","name":"Screenshot 2023-04-19 at 2.06.30 AM.png","type":"image/png","lastModified":1681884414404.354,"size":403805},{"id":"2ce58ffd37ac87d2516734a25b7c6cc51061a5e2f44e0a32829b476aa8b15d6628d9c2353857d57a12fae12fa071af3e3dae1edf01051a5f591ff7dad1863aa3","href":"https://static.observableusercontent.com/files/2ce58ffd37ac87d2516734a25b7c6cc51061a5e2f44e0a32829b476aa8b15d6628d9c2353857d57a12fae12fa071af3e3dae1edf01051a5f591ff7dad1863aa3","name":"Screenshot 2023-04-18 at 10.30.22 PM.png","type":"image/png","lastModified":1681871438642.727,"size":311065},{"id":"f8415b89b8a0643672ff2247604f129ead769ba0d8a88160ef29b95004c1e210a9d68982ae8cf1fd902ba306428080fdf8c07929f6968af9accef4f27b3233ce","href":"https://static.observableusercontent.com/files/f8415b89b8a0643672ff2247604f129ead769ba0d8a88160ef29b95004c1e210a9d68982ae8cf1fd902ba306428080fdf8c07929f6968af9accef4f27b3233ce","name":"Screenshot 2023-04-18 at 11.36.37 PM.png","type":"image/png","lastModified":1681875413815.979,"size":1491960},{"id":"3f195e7a2424a6978a382a6683a860b540952f3e21e7ad19a1e2f889dc83e3d98eb499912453d51482fcb8e85df2094299f68a4ddb938adffd99634d617d2a13","href":"https://static.observableusercontent.com/files/3f195e7a2424a6978a382a6683a860b540952f3e21e7ad19a1e2f889dc83e3d98eb499912453d51482fcb8e85df2094299f68a4ddb938adffd99634d617d2a13","name":"Screenshot 2023-04-19 at 6.37.44 PM.png","type":"image/png","lastModified":1681943905926.447,"size":194030},{"id":"d802b6b02c6d13cb73e6f4ac17a767ea445df11d221e7aecc08e6f5e2ad5dfd7d31a5bc1620e6bafa0cb3b8f9f43a308f9b15cc9ff52d4b212aa0a4c1fa350c9","href":"https://static.observableusercontent.com/files/d802b6b02c6d13cb73e6f4ac17a767ea445df11d221e7aecc08e6f5e2ad5dfd7d31a5bc1620e6bafa0cb3b8f9f43a308f9b15cc9ff52d4b212aa0a4c1fa350c9","name":"peace sign.jpeg","type":"image/jpeg","lastModified":1681972805284.787,"size":36369},{"id":"7f50fbed53dfca2da73376465ade8815037ae7cc2ce4455f2117ec2c8a5fae552e41bb81971ae3463899521a60e5a5d8960b0049adac5344075d4fb433aa5250","href":"https://static.observableusercontent.com/files/7f50fbed53dfca2da73376465ade8815037ae7cc2ce4455f2117ec2c8a5fae552e41bb81971ae3463899521a60e5a5d8960b0049adac5344075d4fb433aa5250","name":"fist 419.jpeg","type":"image/jpeg","lastModified":1681973212723.847,"size":11851},{"id":"33444cc49995da081764c1dc49758ab218c242d85f592418ffae90bc2f287f9d7c2603ecd4bf3a0181acd54c1cf635eb4f58a4711b555cb146e48bc3c45ce855","href":"https://static.observableusercontent.com/files/33444cc49995da081764c1dc49758ab218c242d85f592418ffae90bc2f287f9d7c2603ecd4bf3a0181acd54c1cf635eb4f58a4711b555cb146e48bc3c45ce855","name":"Screenshot 2023-04-19 at 11.31.45 PM.png","type":"image/png","lastModified":1681961535241.547,"size":1364662},{"id":"4e826c3e78d1f7dbc4b7ef74be7e6c6cc94ff7c2ce38745197b2764fd36e0a163e56d5a84eff8b57270da3af607fc7044776c54f866a21881303be107e6f0164","href":"https://static.observableusercontent.com/files/4e826c3e78d1f7dbc4b7ef74be7e6c6cc94ff7c2ce38745197b2764fd36e0a163e56d5a84eff8b57270da3af607fc7044776c54f866a21881303be107e6f0164","name":"Screenshot 2023-04-19 at 11.37.58 PM.png","type":"image/png","lastModified":1681961893332.094,"size":24537},{"id":"1f18a99105eacb4dd1332ece2da45378f1ce5b128fcf7c5d7047d77374a1ad1bb90b6ae27d33264559aeeebe2c1738f542ad7765689cb199980975f22a8e0297","href":"https://static.observableusercontent.com/files/1f18a99105eacb4dd1332ece2da45378f1ce5b128fcf7c5d7047d77374a1ad1bb90b6ae27d33264559aeeebe2c1738f542ad7765689cb199980975f22a8e0297","name":"splay_test6@1.jpeg","type":"image/jpeg","lastModified":1681962178783.839,"size":53332}] 29:{"id":"a0347ca8a36a85b3","slug":null,"title":"Extra Credit Assignment","thumbnail":"bf608a027f85697ca7c9a15d26858f224ba0658b709edca7dc82464f7e7e2348","access_level":"public","create_time":"$D2023-04-18T19:53:38.089Z","update_time":"$D2023-12-16T03:06:46.430Z","view_time":null,"first_public_time":"$D2023-04-18T19:53:38.089Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a23a34eb5c690fbc","login":"chiamaka","name":"Chiamaka ","avatar_url":"https://avatars-next.observableusercontent.com/f826844aaaa55244fd019a42ec56f66885aced0a3878b0c032c09fec14faeeb7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":594,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"715b4dd40b03b4d2","login":"chiamaka","name":"Chiamaka ","avatar_url":"https://avatars-next.observableusercontent.com/f826844aaaa55244fd019a42ec56f66885aced0a3878b0c032c09fec14faeeb7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"715b4dd40b03b4d2","login":"chiamaka","name":"Chiamaka ","avatar_url":"https://avatars-next.observableusercontent.com/f826844aaaa55244fd019a42ec56f66885aced0a3878b0c032c09fec14faeeb7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Extra Credit Assignment","cells":[{"id":139,"value":"# Extra Credit Assignment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"import {cv, handleError, registerFile,sideBySide} from \"@mootari/opencv-js\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Computer Vision for Beginners:\n# Building a hand gesture recognizer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"In this tutorial you will be learning about how to approach a computer vision problems along with general best practices to use through making a hand gesture recognizer from scratch! Although this may seem daunting, this tutorial includes various interactive components and will you though the process step-by-step.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"# Step 0: Identifying Gaps within knowledge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"FileAttachment(\"Screenshot 2023-04-18 at 10.30.22 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Often the most intimidating part of approaching a computer vision problem is knowing where to begin, or thinking of the best algorithm to use that will produce the best results. And the truth is ... you don't have to have everything figured out! As you'll see in the later sections, just like with any Machine Learning model, you won't have all the answers at the beginning. Experimenting with parameters and making mistakes will allow to create better model over time. It also helps to stop and occasionally ask the question \"has this problem already been solved before?\", chances are there may be a package out there that already handles a issue you've encountered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"For all the examples below we will be using OpenCV which is a common image processing package used that has a myriad of applications.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"# Step 1: Sourcing data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"Using the right set of images in your training set as well as having a diverse set of cases is crucial in a computer vision model because you want to make sure that your algorithm can actually handle a diverse set of real world cases. But as a general practice it's always best to start from a simple base case and adapt the algorithm and add more complex cases over time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"To demonstrate this we'll create a simple fruit classifier that outputs weather or not it thinks a given image is an apple or not based on whether it falls into the shade range of a \"typical apple\". In the following example we will be using the color of the middle-most pixel, and using the RGB value to compute a \"distance score\". Using the formula below. Think of this like it measures the \"different-ness\" of two colors, so the low the score the more similar the colors are.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"FileAttachment(\"Screenshot 2023-04-19 at 12.11.45 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"If a fruit's color exceeds the maximum distance score computed between any two fruits in the training set we will assume it's not an apple, while if the score is under the maximum we will assume it is an apple. We will exclude one image from the training set and see if we can still get an accurate result.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"Choose an \"apple\" to exclude from the training set:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"viewof apple = Inputs.radio([\"Apple 1\", \"Apple 2\", \"Apple 3\",\"Apple 4\"], {label: \"Select: \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"FileAttachment(\"Screenshot 2023-04-18 at 11.36.37 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"# ${apple_result}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"apple_result = {\n // Sampled middle-most colors of each image\n const colors = [[179,63,48],[167,207,103],[252,219,3],[44,42,66]]\n \n const curr = Number(apple[6])-1\n\n // Computing max distance excluding a selected apple\n var max = -1\n for (let i = 0; i < colors.length; i++) { \n if (i != curr){\n for (let j = 0; j < colors.length; j++) {\n if (j != curr && j != i) {\n const val = (colors[i][0]-colors[j][0])**2 + (colors[i][1]-colors[j][1])**2 + (colors[i][2]-colors[j][2])**2\n if (val > max){\n max = val\n }\n }\n }\n }\n}\n // Checking whether or not the test apple falls within the range\n for (let i = 0; i < colors.length; i++){\n const val = (colors[i][0]-colors[curr][0])**2 + (colors[i][1]-colors[curr][1])**2 + (colors[i][2]-colors[curr][2])**2\n\n if (val > max){\n return \"Apple \"+(curr+1)+\" is not an apple.\"\n }\n }\n\n return \"Apple \"+(curr+1)+\" is an apple.\"\n\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"As we should see from this example the Golden Delicious apple was incorrectly classified as not an apple when this example was excluded from the data set because there was not enough of a representation of lighter apples while since red and green were not as contrasting of colors, they were identified correctly even when excluded.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"FileAttachment(\"Screenshot 2023-04-19 at 2.06.30 AM.png\").image()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"For hand gesture recognition, although you may be able to expand your program to recognize a gesture like what is seen in the first image, ideally you want to start more simple like just being able to identify, a fist, from a palm, and a splay or \"high-five\". And you want to tackle a simpler case like the second that has consistent lighting and a head-on view.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"import {width,height,imageData,createRgb,interpolateHue,lerp,luminance,contrastRatio,isReadable,hsl2rgb,rgb2hex,viewof hsl,View} from \"@toja/yes-mum-its-a-color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"# Step 2: Finding the meaningful pixels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":" A common image processing technique used is converting the image to a **binary representation**. In this process we separate unimportant pixels in an image (ex: the background, other objects) from our main subject matter. We assign the unimportant pixels to 0 and the ones we want to 1. In this example that means, we would separate hand pixels from the background. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"FileAttachment(\"Screenshot 2023-04-19 at 6.37.44 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"In the following exercise you'll attempt to find the upper-bound color for a hand using the color picker so that, when converted to binary, only the pixels in the hand appear in white and all other pixels are black. (Be careful, too bright and the binary encoder will not be able to seperate the hand from the background. Too dark and the hand won't be picked up at all.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":460,"value":"(Please refresh if example doesn't load immediately)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"viewof xy = {\n const context = DOM.context2d(width, height, 1);\n let mousedown = false;\n\n context.canvas.onmousedown = event => {\n mousedown = true;\n context.canvas.onmousemove(event);\n };\n\n context.canvas.onmousemove = event => {\n if (!mousedown) return;\n const rect = event.target.getBoundingClientRect();\n render(event.clientX - rect.left, event.clientY - rect.top);\n context.canvas.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n context.canvas.onmouseup = event => {\n mousedown = false;\n };\n \n function render(x, y) {\n context.clearRect(0, 0, width, height);\n context.putImageData(imageData, 0, 0);\n \n context.beginPath();\n context.arc(x, y, 4, 0, 2 * Math.PI);\n context.stroke();\n \n viewof hsl.value = [interpolateHue(x / width), 1 - y / height, viewof hsl.value[2]];\n context.canvas.value = [x, y];\n }\n \n render(width / 2, height / 2);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof color = {\n const rgb = hsl2rgb(hsl);\n const hex = rgb2hex(rgb);\n const div = html`\n

\n ${hex}\n

`\n div.value = hex;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n// Taken from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"{\n const image = await FileAttachment(\"splay_test6@1.jpeg\").image()\n const canvas = DOM.canvas(image.width, image.height);\n \n const data = cv.imread(image);\n cv.cvtColor(data, data, cv.COLOR_RGB2HLS);\n\n const ksize = {width : 2, height : 2};\n\n var rgb = hexToRgb(color)\n\n // NOTE THESE VALUES ARE BGR NOT RGB\n // Lower-bound Skin Color\n const l_skin = cv.matFromArray(1,3, cv.CV_8UC1, [0, 30, 50])\n\n // Upper-bound Skin Color\n const u_skin = cv.matFromArray(1,3, cv.CV_8UC1, [rgb.b,rgb.g+30,rgb.r+30])\n\n // Computing skin threshold\n const skin_threshold = new cv.Mat();\n\n // Selecting all pixels in that threshold\n cv.inRange(data, l_skin, u_skin,data)\n\n // Blurring the hand\n cv.blur(data,data, ksize)\n cv.imshow(canvas,data)\n data.delete();\n\n return sideBySide(image,canvas)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"So how did we compute this? \n\nIf you take a look at the code you'll see we first read in the image, converting it a large matrix where each cell holds an RGB color value. We then we then used the rgb value of dark-brown to use as the lower-bound and left the upper-bound to be determined by the color picker. Once an upper and lower bound were chose we made that our range of skin colors. We then blurred the hand because objects naturally have shadows and highlights that are very dark or very light which is not representative of the \"real\" color of the object. To combat this, if we blur the area with nearby pixels, we have a better chance of highlights and shadows still being recognized as part of the hand despite not being typically hand colored.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"# Step 3: Shape Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"Now you may have thought to yourself in the first example, \"Hey, aren't there green and red grapes as well as other fruits that come in similar shades to apples? Couldn't those be misclassified as apples in the prior example?\" And you'd be correct. Color alone is often times not enough to draw conclusions about classification. An important attribute is also **shape**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"We find the contours in the image by extracting all the pixels from the binary encoding that bordered a background pixel. (i.e. all the cells that were 1s adjacent to a cell that was 0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"But now that we've found the contours, how does this information get us any closer to figuring out that the image seen is of a high-five? This is where we want to start to abstract the idea the thing we're trying to classify / detect. By just looking at the shadow of a hand, how can we tell it's a high-five? There's a myriad of ways you can go about this but the easiest would be to look space between the hands. The angles will differ if someone's high-five versus if they're doing the [\"Vulcan Salute\" from Star Trek](https://api.time.com/wp-content/uploads/2015/04/464967684.jpg).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"FileAttachment(\"Screenshot 2023-04-19 at 11.31.45 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"From the contours created we can find the defects (or the points of concavity) easily and count how many there are to determine whether the fingers are spread out or together. From a set of three points on the points of extrema on the hand, we can determine the angles between the digits using law of cosines and determine if it's a point of concavity, i.e a space between digits in the hand to help us determine the gesture.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"FileAttachment(\"Screenshot 2023-04-19 at 11.37.58 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"import {rangeSlider} from '@mootari/range-slider@1786'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"# Step 4: Defining the algorithim","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"So from the prior step we probably have a good idea about how we would classify an image as a high-five, but what about other gestures like a palm or a fist? In this step we will need to refine our algorithm and choose what features are most important in determining the result. What features besides the quantity concave points can we use to our advantage? How do we tell a rounded fist apart from a the \"stop\" hand gesture (with fingers squeezed together) from shape alone? A great way to do this is using the **aspect ratio**. This classifies how narrow or wide an object is regardless of its orientation. In this case we will use the extrema found from the contour (i.e. coordinates of leftmost, rightmost coords etc..) to find the **minimum bounding region** (think of it as the [smallest rectangle that encases an object](https://www.researchgate.net/publication/220649789/figure/fig2/AS:669080608575516@1536532656975/A-minimum-bounding-rectangle-and-its-parameters.png)) to compute the aspect ratio.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"In the following example you should try to use your own hands to determine the number of concave points for each gesture as well as use a ruler to approximate an optimal \"hand ratio\" for each case (the height of the hand gesture / the width of the hand gesture )","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"Choose the # of concave points hand ratio that distinguishes a **HIGH-FIVE**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"viewof points1 = Inputs.radio([0,1,2,3,4,5], {label: \"Number of points of concavity: \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"viewof range1 = rangeSlider({\n min: 0,\n max: 1,\n step: .05,\n value: [0, 8],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"{\n const image = await FileAttachment(\"splay_test6@1.jpeg\").image()\n const canvas = DOM.canvas(image.width, image.height);\n\n \n const img = cv.imread(image);\n const data = img.clone();\n\n var range = range1.value\n\n if (range1[0] < 0.2 || range1[1] > 0.65 || points1 != 5 ){\n cv.putText(img,'WRONG',new cv.Point(Number(image.width*0.5),120),cv.FONT_HERSHEY_SIMPLEX,5,[255,0,0,255],5,cv.LINE_AA,false)\n } else {\n cv.putText(img,'CORRECT',new cv.Point(Number(image.width*0.5-100),120),cv.FONT_HERSHEY_SIMPLEX,5,[0,255,0,255],5,cv.LINE_AA,false)\n }\n cv.imshow(canvas,img)\n data.delete();\n\n const css = 'max-width:100%';\n canvas.style.cssText += css;\n \n return html`

${canvas}

`; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":539,"value":"Choose the # of concave points hand ratio that distinguishes a **PEACE-SIGN**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":522,"value":"viewof points2 = Inputs.radio([0,1,2,3,4,5], {label: \"Number of points of concavity:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"viewof range2 = rangeSlider({\n min: 0,\n max: 1,\n step: .05,\n value: [0, 8],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"{\n const image = await FileAttachment(\"peace sign.jpeg\").image()\n const canvas = DOM.canvas(image.width, image.height);\n\n \n const img = cv.imread(image);\n const data = img.clone();\n\n var range = range2.value\n\n if (range2[0] < 0.9 || points2 != 2 ){\n cv.putText(img,'WRONG',new cv.Point(Number(image.width*0.5-200),120),cv.FONT_HERSHEY_SIMPLEX,4,[255,0,0,255],5,cv.LINE_AA,false)\n } else {\n cv.putText(img,'CORRECT',new cv.Point(Number(image.width*0.5-250),120),cv.FONT_HERSHEY_SIMPLEX,3,[0,255,0,255],5,cv.LINE_AA,false)\n }\n cv.imshow(canvas,img)\n data.delete();\n\n const css = 'max-width:100%';\n canvas.style.cssText += css;\n \n return html`

${canvas}

`; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"Choose the # of concave points hand ratio that distinguishes a **FIST**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"viewof points3 = Inputs.radio([0,1,2,3,4,5], {label: \"Number of points of concavity:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"viewof range3 = rangeSlider({\n min: 0,\n max: 1,\n step: .05,\n value: [0, 8],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"{\n const image = await FileAttachment(\"fist 419.jpeg\").image()\n const canvas = DOM.canvas(image.width, image.height);\n\n \n const img = cv.imread(image);\n const data = img.clone();\n\n var range = range3.value\n\n if (range3[0] < 0.2 || range3[1] > 0.65 || points3 != 0 ){\n cv.putText(img,'WRONG',new cv.Point(Number(image.width*0.5-100),100),cv.FONT_HERSHEY_SIMPLEX,2,[255,0,0,255],5,cv.LINE_AA,false)\n } else {\n cv.putText(img,'CORRECT',new cv.Point(Number(image.width*0.5-80),90),cv.FONT_HERSHEY_SIMPLEX,1,[0,255,0,255],5,cv.LINE_AA,false)\n }\n cv.imshow(canvas,img)\n data.delete();\n\n const css = 'max-width:100%';\n canvas.style.cssText += css;\n \n return html`

${canvas}