--- title: Bunnymator, or impractical computer vision | daily.dev description: A hobby project recreates an old toy webpage that converts hand-drawn flip-book doodles into animated GIFs, walking through the computer vision pipeline end to... canonical: https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Bunnymator, or impractical computer vision | daily.dev og:description: A hobby project recreates an old toy webpage that converts hand-drawn flip-book doodles into animated GIFs, walking through the computer vision pipeline end to... og:url: https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk og:image: https://api.daily.dev/og/posts/BhJptuaYk.png og:image:alt: Bunnymator, or impractical computer vision og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Bunnymator, or impractical computer vision **[zserge's blog](https://daily.dev/sources/zserge)** · 10 min read · 0 upvotes · 0 comments ## Summary A hobby project recreates an old toy webpage that converts hand-drawn flip-book doodles into animated GIFs, walking through the computer vision pipeline end to end: grayscale conversion, adaptive thresholding, contour detection, convex hulls, Douglas-Peucker simplification, perspective unwarping, and grid-line extraction with OpenCV. The author then tries a YOLO model fine-tuned on a synthetic dataset of 6000 rendered images to detect grids, reaching 99.5% accuracy, before ultimately rejecting both OpenCV (~9MB) and YOLO+ONNX (~3-12MB) for load-time reasons and reimplementing the core primitives (grayscale, adaptive threshold, convex hull, Douglas-Peucker, blob-based contour detection) from scratch in plain JavaScript, trading ~6x slower performance than OpenCV+WebAssembly for a tiny, frontend-only, no-server page. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I detect a grid drawn on paper using classic computer vision without machine learning? Convert the image to grayscale, apply adaptive thresholding with a sliding window comparing each pixel to a weighted local mean, then find contours and filter by size and length to isolate rectangles. Build a convex hull of candidate contours, simplify it with the Douglas-Peucker algorithm to find four corners, then use a perspective transform (like OpenCV's getPerspectiveTransform and warpPerspective) to unwarp the grid for further processing. _daily.dev surfaces practical computer vision writeups like this for engineers piecing together a detection pipeline._ ### How accurate can a fine-tuned YOLO model get at detecting hand-drawn grids on paper from a small synthetic dataset? A YOLO model fine-tuned on 6000 synthetically rendered training images (paper photos combined with scribbles and doodles arranged into grids from 2x2 up to 6x6, with added noise and shadows) reached 94% accuracy after 10 training epochs and 99.5% accuracy after 40 epochs, running stably at roughly 20FPS via the ONNX runtime on a webcam demo. _Developers weighing a custom YOLO fine-tune for a narrow vision task can track real accuracy numbers like these on daily.dev._ ### What is the size trade-off between OpenCV, YOLO with ONNX runtime, and a custom JavaScript computer vision implementation for a web app? OpenCV compiled for the web weighs roughly 9MB, while a YOLO model plus the ONNX runtime adds about 12MB unquantized or over 3MB quantized, both of which slow initial page load. Reimplementing core primitives (grayscale conversion, adaptive threshold, convex hull, Douglas-Peucker simplification, and blob-based contour detection) in plain JavaScript avoids those dependencies entirely, running about 6x slower than OpenCV with WebAssembly but still faster than the YOLO pipeline. _Teams choosing between heavy CV libraries and lean custom code for frontend performance can find trade-offs like these on daily.dev._ ## Similar posts on daily.dev - [Learn Computer Vision by Uploading Images & Videos](https://daily.dev/posts/learn-computer-vision-by-uploading-images-videos-e8mrgrvpf) · 80 LEVEL · 1 upvotes · 0 comments - [How I use computer vision to organize old family photos](https://daily.dev/posts/how-i-use-computer-vision-to-organize-old-family-photos-1vxtjewfn) · All Things Open · 2 upvotes · 0 comments - [zserge/grayskull: A tiny, dependency-free computer vision library in C for embedded systems, drones, and robotics.](https://daily.dev/posts/zserge-grayskull-a-tiny-dependency-free-computer-vision-library-in-c-for-embedded-systems-drones--hr9wpghla) · Hacker News · 20 upvotes · 0 comments - [I Built a Browser-Based Image Animation Engine That Makes Any Picture “Wobble”](https://daily.dev/posts/i-built-a-browser-based-image-animation-engine-that-makes-any-picture-wobble--mz68efosh) · Medium · 0 upvotes · 0 comments - [Jigsaw Jeeves: Building a Puzzle Assistant using Computer Vision](https://daily.dev/posts/jigsaw-jeeves-building-a-puzzle-assistant-using-computer-vision-jmzxkwb04) · Towards Data Science · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#computer-vision](https://daily.dev/tags/computer-vision), [#opencv](https://daily.dev/tags/opencv) [View this post on daily.dev](https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Bunnymator, or impractical computer vision","url":"https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk"},"datePublished":"2026-10-02T15:18:43.716Z","dateModified":"2026-10-02T15:21:29.156Z","description":"A hobby project recreates an old toy webpage that converts hand-drawn flip-book doodles into animated GIFs, walking through the computer vision pipeline end to...","image":"https://media.daily.dev/image/upload/s--0_ODbtD2--/f_auto/v1722860399/public/Placeholder%2008","thumbnailUrl":"https://media.daily.dev/image/upload/s--0_ODbtD2--/f_auto/v1722860399/public/Placeholder%2008","isAccessibleForFree":true,"articleSection":"zserge's blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"zserge's blog","logo":"https://media.daily.dev/image/upload/s--KQnFBOIT--/f_auto,q_auto/v1787480407/logos/zserge","url":"https://daily.dev/sources/zserge"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,computer-vision,opencv","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"zserge's blog","item":"https://daily.dev/sources/zserge"},{"@type":"ListItem","position":3,"name":"Bunnymator, or impractical computer vision"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/bunnymator-or-impractical-computer-vision-bhjptuayk#faq","mainEntity":[{"@type":"Question","name":"How can I detect a grid drawn on paper using classic computer vision without machine learning?","acceptedAnswer":{"@type":"Answer","text":"Convert the image to grayscale, apply adaptive thresholding with a sliding window comparing each pixel to a weighted local mean, then find contours and filter by size and length to isolate rectangles. Build a convex hull of candidate contours, simplify it with the Douglas-Peucker algorithm to find four corners, then use a perspective transform (like OpenCV's getPerspectiveTransform and warpPerspective) to unwarp the grid for further processing. daily.dev surfaces practical computer vision writeups like this for engineers piecing together a detection pipeline."}},{"@type":"Question","name":"How accurate can a fine-tuned YOLO model get at detecting hand-drawn grids on paper from a small synthetic dataset?","acceptedAnswer":{"@type":"Answer","text":"A YOLO model fine-tuned on 6000 synthetically rendered training images (paper photos combined with scribbles and doodles arranged into grids from 2x2 up to 6x6, with added noise and shadows) reached 94% accuracy after 10 training epochs and 99.5% accuracy after 40 epochs, running stably at roughly 20FPS via the ONNX runtime on a webcam demo. Developers weighing a custom YOLO fine-tune for a narrow vision task can track real accuracy numbers like these on daily.dev."}},{"@type":"Question","name":"What is the size trade-off between OpenCV, YOLO with ONNX runtime, and a custom JavaScript computer vision implementation for a web app?","acceptedAnswer":{"@type":"Answer","text":"OpenCV compiled for the web weighs roughly 9MB, while a YOLO model plus the ONNX runtime adds about 12MB unquantized or over 3MB quantized, both of which slow initial page load. Reimplementing core primitives (grayscale conversion, adaptive threshold, convex hull, Douglas-Peucker simplification, and blob-based contour detection) in plain JavaScript avoids those dependencies entirely, running about 6x slower than OpenCV with WebAssembly but still faster than the YOLO pipeline. Teams choosing between heavy CV libraries and lean custom code for frontend performance can find trade-offs like these on daily.dev."}}]} ```