2b:null 2c:["$","title",null,{"children":"Making Film Scanning Easier* with OpenCV | Evan Dorsky | Observable"}] 31:Tab0,Above, the 110 Super is pictured on the left next to a Pentax ME Super, itself one of the smallest 35mm interchangeable lens SLRs ever made. The 110 Super occupies about half the volume of the ME Super, and when equipped with a comparable lens it's only one third the weight of the ME Super. It easily slips into a jacket pocket or purse and its weight (under seven ounces) hardly registers. Between its small size and its capabilities (interchangeable lenses, precise manual focus, autoexposure with manual exposure compensation, even a self timer!), the 110 Super seems like the perfect travel camera for a serious amateur film photographer. However, the 110 Super had plenty of disadvantages over a 35mm SLR even in the heyday of 110 film, and in the 21st century it has all of those disadvantages and more: 1. Images on 110 film occupy 1/4 the area of images on 35mm film, so scans and enlargements are significantly grainer and lower resolution 2. 110 film cartridges have only 24 exposures while most 35mm rolls have 36+ 3. In the 21st century, 110 film is more expensive to purchase, process, and scan compared to 35mm film (for a format that was introduced in 1972 in a line of cheaper 35mm-alternative formats!) 4. Scanning 110 film at home is more painful than scanning 35mm film, as film holders are harder to come by and there are no high quality dedicated/automated 110 film scanners on the market (unless you count [this thing](https://www.amazon.com/KODAK-Scanner-Convert-Negatives-Resolution/dp/B084NVRHYQ/ref=sr_1_3?keywords=110+negative+scanner&qid=1661294357&sr=8-3)) There's nothing I can do about disadvantages 1-3. But, I did shoot 4 rolls on my trip, so I was committed, and I thought I could do something about disadvantage 4. ## Scanning 110 Film at Home I scan my film at home for a lot of reasons, but saving time is not one of them. However, scanning 110 film on my flatbed scanner would be too time consuming even for me. Here's the process: 1. Cut strips of 24 into 3 strips of 8 images each, or 4 strips of 6 2. Tape those strips to the flatbed glass, or a standalone piece of glass 3. Scan the entire bed into one big file 4. Crop out each frame by hand 5. Rotate each frame to correct for me not taping the strips perfectly straight There's room for variation in steps 4 and 5. I could scan each strip, rotate the strip, and then not have to worry about rotating each image. Or I could crop strips out of the big image, rotate them, and then crop out each image. The important part is that all variants of this process are a big bummer, and I couldn't face manually cropping 96 frames out of 12 strips of film – especially when each crop operation is slow because the full bed scan is so large.32:T961,// Open the scan and read it into OpenCV function process(image, step) { // open the image file // allocate memory for OpenCV images const im_orig = cv.imread(image) let im = new cv.Mat() let im_c = new cv.Mat() if (step == 0) { return checkpoint(im_orig) } // 1. create a grayscale copy of the image step1Gray(im_orig, im) if (step == 1) { return checkpoint(im) } // 2. invert, threshold, and reinvert the image step2Thresh(im, im) if (step == 2) { return checkpoint(im) } // 3. dilate the image step3Dilate(im, im) if (step == 3) { return checkpoint(im) } // 4. find contours const conts = new cv.MatVector() step4Contour(im, im_c, conts) if (step == 4) { return checkpoint(im_c) } // 5. find the contours representing perfs let perfs = step5Perfs(im_c, im_c, conts) conts.delete() if (step == 5) { return checkpoint(im_c) } // 6. sort the perfs into strips const strip_perfs = splitPerfsToStrips(perfs) step6StripPerfs(im_c, im_c, strip_perfs) if (step == 6) { return checkpoint(im_c) } // 7. make frames from the perfs (draw the lines to show how we make the frames) // note: calling this function creates a tiny memory leak since OpenCV data structures // are created inside of `strip_frames` and never freed // should write a strip_frames_free function to free them let strip_frames = step7StripFrames(im_c, im_c, strip_perfs) if (step == 7) { return checkpoint(im_c) } // 8. draw the frames made from the perfs let strip_frame_conts = new cv.MatVector() contsFromPerfs(strip_frames, strip_frame_conts) step8DrawFrames(im_c, im_c, strip_frame_conts) if (step == 8) { return checkpoint(im_c) } // 9. label all the frames step9LabelFrames(im_c, im_c, strip_frames) if (step == 9) { return checkpoint(im_c) } // 10. let's see the frames superimposed on the original image step10SuperimposeFrames(im_orig, im_c, strip_frames) strip_frame_conts.delete() if (step == 10) { return checkpoint(im_c) } return checkpoint(im_c) // free images function free() { im_orig.delete() im.delete() im_c.delete() } // "checkpoint" to safely return at any processing step // without causing memory leaks function checkpoint(im) { const canvas = imdisp(im) free() return canvas } }33:T473,function step6StripPerfs(src, dst, strip_perfs, do_desc=false) { if (do_desc) { return "Sort the perfs by strip and within each strip. The contour finding algorithm finds contours in no particular order. To make our cropping program useful, it should not only find each frame but output the frames in the correct order. Here we use an algorithm that relies on the strips being reasonably (but not perfectly) straight to associate perfs with strips. Once the perfs are associated with strips it is easy to sort them left-to-right, and to sort strips top-to-bottom." } for (let i = 0; i < strip_perfs.length; ++i) { let strip = strip_perfs[i] for (let j = 0; j < strip.length; ++j) { let p = strip[j] let x_or = p['com'].x-dim('frame_height') let y_or = p['com'].y+dim('frame_height')/4 cv.putText(dst, `Strip ${i}`, {x: x_or, y:y_or}, cv.FONT_HERSHEY_SIMPLEX, dim('font_size'), [0,255,0,0], dim('line_weight'), cv.LINE_AA) cv.putText(dst, `Perf ${j}`, {x: x_or, y:y_or+dim('frame_height')/4}, cv.FONT_HERSHEY_SIMPLEX, dim('font_size'), [0,255,0,0], dim('line_weight'), cv.LINE_AA) } } }34:T503,function step7StripFrames(src, dst, strip_perfs, do_desc=false) { if (do_desc) { return "Draw lines between adjacent perforations along each strip. The perf positions tell us the orientation of each strip, allowing us to find frames without requiring perfectly straight strips. Drawing lines between each strip (cyan) is the first step towards building the rectangle that will surround each image frame on each strip." } let strip_frames = [] for (let i = 0; i < strip_perfs.length; ++i) { let strip = strip_perfs[i] for (let j = 1; j < strip.length; ++j) { let c0 = strip[j-1]['com'] let c1 = strip[j]['com'] cv.line(dst, c0, c1, [0,255,255,0], dim('line_weight'), cv.LINE_AA) let perfline = subtract(c1, c0) // for the first perf, make another frame before it let frame = null if (j == 1) { frame = makeValidFrame(subtract(c0, perfline), c0) strip_frames.push(frame) } // make the frame between these two perfs frame = makeValidFrame(c0, c1) strip_frames.push(frame) // make another frame after the last perf if (j == strip.length-1) { frame = makeValidFrame(c1, add(c1, perfline)) strip_frames.push(frame) } } } return strip_frames }35:[{"id":"25d765e6bf354152750bc172b0b24ff2356f9825aecf82fbfaffbba4d2600c19e6d508542e166adbce06bbbe58826051d27d4de4bd9d6c81dab569f2da084444","href":"https://static.observableusercontent.com/files/25d765e6bf354152750bc172b0b24ff2356f9825aecf82fbfaffbba4d2600c19e6d508542e166adbce06bbbe58826051d27d4de4bd9d6c81dab569f2da084444","name":"110_strips.jpeg","type":"image/jpeg","lastModified":1661281656547.537,"size":4479607},{"id":"bdbe5daeb9a50c43aacc9815f4dc90c2e35505a319003cde32c1661f8a2a7618443e89d006ead586646c635d944a8c18325746c1579a030b539a7df11791e2c9","href":"https://static.observableusercontent.com/files/bdbe5daeb9a50c43aacc9815f4dc90c2e35505a319003cde32c1661f8a2a7618443e89d006ead586646c635d944a8c18325746c1579a030b539a7df11791e2c9","name":"IMG_1402.jpeg","type":"image/jpeg","lastModified":1661291231281.108,"size":2579365},{"id":"335ee61f498e4cff6611fb4104c95cc638fd7716c78048b9876edec25c8f10a5b2b2ac0995462e6a991c74cdd086f6e3102c85f380d64f41e88bdd4c49f4f5dd","href":"https://static.observableusercontent.com/files/335ee61f498e4cff6611fb4104c95cc638fd7716c78048b9876edec25c8f10a5b2b2ac0995462e6a991c74cdd086f6e3102c85f380d64f41e88bdd4c49f4f5dd","name":"110_strips@1.jpeg","type":"image/jpeg","lastModified":1661372261800.125,"size":1237691}] 2f:{"id":"246e2273fd7b0220","slug":"digitizing-110-film","title":"Making Film Scanning Easier* with OpenCV","thumbnail":"952cbcee61b183f4b5f7d96131d9e392a96c93e9907a101aa6d78293406de91a","access_level":"public","create_time":"$D2022-08-17T17:40:09.351Z","update_time":"$D2023-06-26T17:57:37.219Z","view_time":null,"first_public_time":"$D2022-10-27T00:48:53.598Z","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":1744,"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,"subscribed":null,"forks":0,"collection":{"id":"000c9933325442a9","slug":"published","title":"Published","owner":{"id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky"}},"type":"notebook","body":{"title":"Making Film Scanning Easier* with OpenCV","cells":[{"id":0,"value":"# Making Film Scanning Easier* with OpenCV\n\n\\* you may agree or disagree with this, depending on your definition of \"easy\"\n\nLast November, I shot a lot of 110 film.\n\nWhat is 110 film? Why did I shoot it? Let's dive in.\n\nIn November 2021, I took a trip to RI, MA, and PA to visit friends and family. Among the cameras I brought with me was a [Pentax Auto 110 Super](https://en.wikipedia.org/wiki/Pentax_Auto_110#Auto_110_Super), a \"subminiature\" interchangeable lens SLR manufactured by Asahi Pentax and sold between 1982 and 1985.\n\nSubminiature is not just a marketing term. This camera is _small_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1328,"value":"FileAttachment(\"IMG_1402.jpeg\").image({\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1560,"value":"### Working the process\n\nTo figure out how to improve this process, I had to go back to what I value. I realized that when it came to this process, I valued:\n1. A simple and forgiving _physical_ workflow (i.e. the steps when I'm touching the film should be easy and require little thought)\n2. Minimal rote work and waiting in the digital workflow\n\nSteps 1-3 aren't too bad when evaluated against these values. But steps 4 and 5 involve lots of manual rote work. And there are ways to address the rote digital work that would make the _physical_ workflow more demanding (say, building a jig to align all the frames perfectly so that I could hard code a program to crop out certain boxes) – but those would violate value #1.\n\nSince my interests are in software over mechanical hardware, I decided to turn to image processing to build a flexible cropping tool that could remove the manual work from steps 4 and 5 without adding complexity to steps 1-3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1706,"value":"### Finding frames\n\nBelow you can see what strips of 110 film actually look like. My idea was to use the film perforations (perfs) – the rectangular holes punched in the film – to locate the image frames. Image frame dimensions and positioning relative to the perfs are standard across all manufacturers of 110 film, so this should be a robust strategy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1725,"value":"The \"Process Step\" slider below lets you follow the algorithm through every step. Below the slider is an explanation of each step.\n\nAnd below this section is all the OpenCV image processing code for you to peruse.\n\nEnjoy!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1731,"value":"### Cropping 110 film with OpenCV in the browser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1212,"value":"viewof processStep = Inputs.range([0, 10], {value: 0, step: 1, label: 'Process Step'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"$${stepDescs(processStep)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1164,"value":"{\n const im_file = await FileAttachment(\"110_strips@1.jpeg\").image()\n\n return process(im_file, processStep)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1727,"value":"### Image processing code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"function step1Gray(src, dst, data=null, do_desc=false) {\n if (do_desc) {\n return \"Convert the image to grayscale, since following image processing steps require a grayscale image.\"\n }\n cv.cvtColor(src, dst, cv.COLOR_RGB2GRAY, 0)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"function step2Thresh(src, dst, data=null, do_desc=false) {\n let thresh = 10\n if (do_desc) {\n return `Threshold the image. Pixel values range from 0 (black) to 255 (white). This threshold sets every pixel to 0 if it is below the threshold (${255-thresh}), otherwise it sets it to 255. This step isolates the film strips from the background.`\n }\n cv.bitwise_not(src, dst)\n cv.threshold(src, dst, thresh, 255, cv.THRESH_BINARY)\n cv.bitwise_not(src, dst)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"function step3Dilate(src, dst, data=null, do_desc=false) {\n if (do_desc) {\n return `Clean up the edges of the thresholded image by performing a \"dilate\" operation.`\n }\n const ksize = new cv.Size(3,3)\n const kernel = cv.getStructuringElement(cv.MORPH_CROSS, ksize)\n cv.dilate(src, dst, kernel)\n kernel.delete()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"function step4Contour(src, dst, conts, do_desc=false) {\n if (do_desc) {\n return \"Find contours. Contours are islands of white pixels surrounded by black pixels or the image edge. Here they are highlighted in red. Our goal is to find the film perforations (perfs), which will allow us to find the image frames on the film. This step finds the perfs, but also finds some other contours that we will need to filter out.\"\n }\n const hier = new cv.Mat()\n cv.findContours(src, conts, hier, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE)\n\n cv.cvtColor(src, dst, cv.COLOR_GRAY2RGB, 0)\n cv.drawContours(dst, conts, -1, [255,0,0,0], dim('line_weight'), cv.LINE_AA)\n \n hier.delete()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"function step5Perfs(src, dst, conts, do_desc=false) {\n if (do_desc) {\n return \"Select the contours for the film perforations. Since 110 film perforations are a standard size and aspect ratio, we can measure each contour and filter out contours that do not meet the metrics for film perforations. Perforations are highlighted in green.\"\n }\n let perfs = []\n for (let i = 0; i < conts.size(); ++i) {\n let cont = conts.get(i)\n if (isPerf(cont)) {\n perfs.push({\n 'com': getCOM(cont),\n 'cont': cont\n })\n }\n }\n\n let perf_conts = new cv.MatVector()\n contsFromPerfs(perfs, perf_conts)\n cv.drawContours(dst, perf_conts, -1, [0,255,0,0], dim('line_weight'), cv.LINE_AA)\n perf_conts.delete()\n\n return perfs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"function step8DrawFrames(src, dst, strip_frame_conts, do_desc=false) {\n if (do_desc) {\n return \"Draw frames, including one extra frame at each end of each strip. We don't want this algorithm to require film strips to be cut a certain way, or require the scan to contain the strip boundaries. So we automatically add frames to the beginning and end of each strip, if there is enough image area. This step assumes that strips occupy roughly the entire width of the image, so it could add extra frames if the image is too wide.\"\n }\n cv.drawContours(src, strip_frame_conts, -1, [0,255,0,255], dim('line_weight'), cv.LINE_AA)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"function step9LabelFrames(src, dst, strip_frames, do_desc=false) {\n if (do_desc) {\n return \"Number the frames. Since we previously sorted the strips and perfs, this is straightfoward.\"\n }\n for (let i = 0; i < strip_frames.length; ++i) {\n let f_com = strip_frames[i]['com']\n let text_or = {x: f_com.x-dim('frame_height')*1.2, y: f_com.y}\n let y_offset = {x: 0, y: dim('frame_height')/2}\n cv.putText(src, `Frame ${i+1}`, add(text_or, dot(y_offset, 3)), cv.FONT_HERSHEY_SIMPLEX, dim('font_size'), [0,255,0,0], dim('line_weight'), cv.LINE_AA)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"function step10SuperimposeFrames(src, dst, strip_frames, do_desc=false) {\n if (do_desc) {\n return \"Frames (green) superimposed onto the original image. Note how each green rectangle contains one image frame, and how the image frame numbers (green) correspond to the numbers on the film strip itself.\"\n }\n src.copyTo(dst)\n \n let strip_frame_conts = new cv.MatVector()\n contsFromPerfs(strip_frames, strip_frame_conts)\n \n cv.drawContours(dst, strip_frame_conts, -1, [0,255,0,255], dim('line_weight'), cv.LINE_AA)\n for (let i = 0; i < strip_frames.length; ++i) {\n let f_com = strip_frames[i]['com']\n let text_or = {x: f_com.x-dim('frame_height')/3, y: f_com.y}\n let y_offset = {x: 0, y: dim('frame_height')/4}\n cv.putText(dst, `${i+1}`, add(text_or, dot(y_offset, 3)), cv.FONT_HERSHEY_SIMPLEX, dim('font_size')/1.7, [0,255,0,255], dim('line_weight'), cv.LINE_AA)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"function isPerf(cont) {\n // first, filter by area\n if (dim('perf_area_min') < cv.contourArea(cont) && cv.contourArea(cont) < dim('perf_area_max')) {\n // then refine with aspect ratio and perimeter\n const rect = cv.minAreaRect(cont)\n\n let ar = rect.size.height / rect.size.width;\n // const ar = rect[1][1] / rect[1][0]\n if (ar < 1) {\n ar = 1.0/ar;\n }\n \n const p = cv.arcLength(cont, true);\n \n if ((dim('perf_ar_min') < ar && ar < dim('perf_ar_max')) && \n (dim('perf_perimeter_min') < p && p < dim('perf_perimeter_max'))) {\n return true;\n }\n }\n \n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"function makeValidFrame(c0, c1) {\n let perfline = subtract(c1, c0);\n let l_angle = Math.atan2(perfline.x, perfline.y);\n \n let frame_h = line(dim('frame_height'), l_angle + Math.PI/2);\n let offset_frame_top = line(dim('frame_offset_y'), l_angle + Math.PI/2);\n \n // create a contour for the frame\n let cont0 = add(offset_frame_top, c0);\n let cont1 = add(offset_frame_top, c1);\n let cont2 = add(c0, add(frame_h, add(offset_frame_top, perfline)));\n let cont3 = add(c0, add(frame_h, offset_frame_top));\n\n return {\n com: c0,\n cont: cv.matFromArray(4, 1, cv.CV_32SC2, [cont0.x, cont0.y, cont1.x, cont1.y, cont2.x, cont2.y, cont3.x, cont3.y]),\n angle: l_angle\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"function splitPerfsToStrips(perfs) {\n // sort the perfs by Y position\n perfs.sort((a, b) => {return b['com'].y - a['com'].y});\n\n // bin the perfs into strips based on their Y position\n // here we assume strips are roughly horizontal\n let strip_perfs = [[]];\n let last_y = perfs[0]['com'].y;\n let this_strip = [];\n let strip_idx = 0;\n for (let i = 0; i < perfs.length; ++i) {\n let p = perfs[i];\n\n if (last_y - p['com'].y < dim('perf_y_offset_thresh')) {\n strip_perfs[strip_idx].push(p);\n } else {\n strip_perfs.push([p]);\n strip_idx++;\n }\n\n last_y = p['com'].y;\n }\n \n // sort the perfs in each strip by X position\n for (let i in strip_perfs) {\n let s = strip_perfs[i];\n s.sort((a, b) => {return b['com'].x - a['com'].x});\n }\n return strip_perfs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"function getCOM(cont) {\n const M = cv.moments(cont);\n let cx = 0;\n let cy = 0;\n if (M['m00'] != 0) {\n cx = parseInt(M['m10']/M['m00']);\n cy = parseInt(M['m01']/M['m00']);\n }\n return new cv.Point(cx, cy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"## Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"### Basic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"function add(v1, v2) {\n return {\n x: v1.x+v2.x,\n y: v1.y+v2.y\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"function dot(v1, s) {\n return {\n x: v1.x*s,\n y: v1.y*s\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"function subtract(v1, v2) {\n return {\n x: v1.x-v2.x,\n y: v1.y-v2.y\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"function line(llen, angle) {\n return {\n x: llen * Math.sin(angle),\n y: llen * Math.cos(angle)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"### Dimension Handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"function dim(key, dpi=700) {\n return dims[key][0] * dpi**dims[key][1]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"dims = {\n return {\n font_size: [0.004, 1],\n line_weight: [0.01, 1],\n frame_height: [0.6, 1],\n out_of_frame_tol: [.2, 1],\n perf_y_offset_thresh: [0.141666, 1],\n frame_offset_y: [-0.05, 1],\n perf_area_min: [0.00429245, 2],\n perf_area_max: [0.00697523125, 2],\n perf_perimeter_min: [0.256375, 1],\n perf_perimeter_max: [0.3645833, 1],\n perf_ar_min: [1.4, 0],\n perf_ar_max: [1.8, 0]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"### Presentation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1533,"value":"function stepDescs(step) {\n function step0Factory(src, dst, data=null, do_desc=false) {\n return \"Raw scan of a full roll of 110 film cut into 4 strips and taped onto the flatbed scanner glass.\"\n }\n const steps = [\n step0Factory,\n step1Gray,\n step2Thresh,\n step3Dilate,\n step4Contour,\n step5Perfs,\n step6StripPerfs,\n step7StripFrames,\n step8DrawFrames,\n step9LabelFrames,\n step10SuperimposeFrames\n ]\n let desc = steps[step](0,0,0,true)\n\n return htl.html`\n

\n ${step}: ${desc}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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, im_resized);\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","output":"$undefined","database":"$undefined"},{"id":1397,"value":"### Perf Contour Handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"// convenience function to extract a MatVector of contours from\n// the perfs array for use by OpenCV\nfunction contsFromPerfs(perfs, conts) {\n for (let i = 0; i < perfs.length; ++i) {\n conts.push_back(perfs[i]['cont']);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"## External Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import {cv, handleError, registerFile} from \"@mootari/opencv-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"