Octobit 2021: Daily pixel-art challenge

, \"nextSiblingNode\": null, \"text\": \"M\"},\r\n {\"parentElement\": , \"nextSiblingNode\": null, \"text\": \"!\"}\r\n ]\r\n\r\n\r\n[main-url]: https://levi.dev/text-animation\r\n[codepen-url]: http://codepen.io/levisl176/full/HGJdF\r\n[bower-url]: http://bower.io/search/?q=text-animation"},{"id":"anvato","titleShort":"Anvato","titleLong":"Anvato","emphasis":0.7,"color":"#d1242c","urls":{"homepage":"http://anvato.com"},"jobTitle":"Software Engineer","location":"Mountain View, CA","date":{"start":"10/2013","end":"3/2014"},"categories":["Work","Web","Frontend","Android","Java","Roku","Windows-Phone","C-Sharp","Video","Teamwork"],"images":[{"fileName":"screenshot1.png","description":"The Anvato web video player."},{"fileName":"screenshot4.png","description":"The Anvato web video player with the preview ribbon open while the user scrubs along the seek bar."},{"fileName":"screenshot5.png","description":"The Anvato web video player with the preview popup open while the user hovers over the seek bar."},{"fileName":"screenshot3.png","description":"The Anvato web video player with the volume control expanded."},{"fileName":"screenshot2.png","description":"The splash screen for the Anvato web video player."}],"videos":[],"content":"_[Anvato][main-url] provides live and on-demand video management, analytics, syndication, and tracking features along with video player SDKs for iOS, Android, and web._\r\n\r\nLevi developed HTTP Live Streaming video-player SDKs for the HTML5, Windows Store, Windows Phone, Roku, and Android platforms to match detailed specifications from clients including Fox, NBC, and Univision.\r\n\r\nThe HTML5 player SDK loaded and played four-times faster than that of Anvato’s leading competitor.\r\n\r\nThe combined Anvato player SDKs drew more than 528,000 viewers per minute during the 2014 SuperBowl, making it the most-viewed single sports event ever delivered online.\r\n\r\nAnvato was acquired by Google in 2016.\r\n\r\n[main-url]: http://anvato.com"},{"id":"fat-cat-chat","titleShort":"IRC-like\nchat","titleLong":"Fat Cat Chat","emphasis":0.6,"color":"#eeb6b6","urls":{"demo":"https://levi.dev/fat-cat-chat","github":"https://github.com/levilindsey/fat-cat-chat"},"jobTitle":"","location":"","date":"2/2014","categories":["Side-Project","Web","App","Art","Web-Sockets","socket.io","node.js","Express","Back-End","Frontend","Solo-Work"],"images":[{"fileName":"screenshot5.png","description":"All of the users currently in a chat room are shown in the right-side panel. Your user name is shown with an asterisk. Hyperlinks can be included within chat messages either by entering a valid URL—including the protocol—or by using the special link command."},{"fileName":"screenshot1.png","description":"Private chats are shown in a small, collapsible panel at the bottom of the screen. The other sections of the page are included within accordian-style, collapsible panels."},{"fileName":"screenshot4.png","description":"Each client is kept up-to-date with a manifest of all current rooms and users. Clicking on either a room name or a user name, in any context, will open the corresponding public or private panel, respectively."},{"fileName":"screenshot6.png","description":"There are three buttons at the top of the screen that let you change your chat name, create new rooms, and add new bots to chat with. The bots will send you emoticons, links to funny cat GIFs, and random cat facts."},{"fileName":"screenshot2.png","description":"This app includes a collection of cat-themed emoticons!"},{"fileName":"screenshot3.png","description":"This app includes many standard IRC commands."}],"videos":[],"content":"#### An IRC-like chat server and web client application\r\n\r\nLevi built this app in order to hone his server-side skills and to learn about web sockets.\r\n\r\n## Features\r\n\r\nSome features of this chat application include:\r\n\r\n- Private and room chat areas\r\n- Bots to chat with in case your feeling lonely\r\n- Syntax highlighting and link injection for user names, room names, and command names\r\n- The ability to include links in chat messages\r\n- Custom cat-themed emoticons\r\n- Numerous fun facts and [GIFS][cat-gif-url] about cats\r\n- Many commands including:\r\n - `/help`\r\n - `/rooms`\r\n - `/join`\r\n - `/msg`\r\n - `/nick`\r\n - `/ping`\r\n - `/ignore`\r\n - `/leave`\r\n - `/quit`\r\n - `/link`\r\n\r\n## Acknowledgements / Technology Stack\r\n\r\nThe technology stack for this project includes:\r\n\r\n- [Node.js][node-url]\r\n- [Socket.IO][socket-io-url]\r\n- HTML5/CSS3/JavaScript\r\n\r\n\r\n[main-url]: https://levi.dev/fat-cat-chat\r\n[cat-gif-url]: http://25.media.tumblr.com/0798843644c862737ce1258821b5938a/tumblr_mnba38vUWI1qzcv7no1_400.gif\r\n[node-url]: http://nodejs.org/\r\n[socket-io-url]: http://socket.io/"},{"id":"photo-viewer","titleShort":"Photo viewer","titleLong":"Photo viewer","emphasis":0.6,"color":"#839939","urls":{"demo":"https://levi.dev/photo-viewer","github":"https://github.com/levilindsey/photo-viewer"},"jobTitle":"","location":"","date":"2/2014","categories":["Side-Project","Web","Frontend","App","xhr2","Animation","Solo-Work"],"images":[{"fileName":"screenshot3.png","description":"The images for each of the different categories are contained within their own panels. These collapse and expand in an accordian style (only one panel is expanded at a time)."},{"fileName":"screenshot5.png","description":"Clicking on a image thumbnail causes a lightbox to be shown containing a larger version of that thumbnail image."},{"fileName":"screenshot8.png","description":"The image lightbox includes overlay controls for exiting, entering full-screen mode, and navigating to the previous and next images"},{"fileName":"screenshot6.png","description":"The image within a lightbox can be expanded for full-screen viewing. As the higher-resolution image loads, a progress circle is shown with the current image download progress and a phantom background of the mid-sized version of the image."},{"fileName":"screenshot7.png","description":"An image in full-screen mode."},{"fileName":"screenshot1.png","description":"As individual images, or the collection metadata, is loading, a custom progress circle is shown."},{"fileName":"screenshot2.png","description":"After the collection metadata has loaded, the different image categories become available for selection."},{"fileName":"screenshot4.png","description":"The images for each of the different categories are contained within their own panels. These collapse and expand in an accordian style (only one panel is expanded at a time)."},{"fileName":"screenshot9.png","description":"Levi created a stand-alone version of the collapsible grid that was used for displaying the image thumbnails. This grid includes a spring dynamic that creates an interesting animation as the grid collapses of expands."}],"videos":[],"content":"#### A general-purpose photo-viewer application\r\n\r\nThis fancy web app is loaded with bells and whistles. A smattering of them includes:\r\n\r\n- Expandable, animated photo grids, which display large collections of photo thumbnails\r\n- A lightbox for conveniently viewing and navigating through medium-sized versions of the images\r\n- Full-screen mode for viewing and navigating through the original, full-sized versions of the images\r\n- A very flashy SVG-based progress circle\r\n- Use of the XHR2 progress event for displaying the download progress of larger images\r\n\r\nThis app was originally built to show off the photos from Levi and [Jackie's][jackie-url] wedding.\r\n\r\n\r\n[main-url]: https://levi.dev/wedding/photos\r\n[jackie-url]: http://jackieandlevi.com/jackie"},{"id":"progress-circle","titleShort":"Progress\ncircle:\nWeb doodle","titleLong":"Progress circle: A web doodle","emphasis":0.6,"color":"#960969","urls":{"demo":"https://levi.dev/progress-circle","github":"https://github.com/levilindsey/progress-circle","codepen":"http://codepen.io/levisl176/pen/ndklu"},"jobTitle":"","location":"","date":"2/2014","categories":["Side-Project","Web","Doodle","Art","Frontend","SVG","Tiny","Animation","2D","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"The progress circle with its larger radius. The dots revolve in a clockwise direction while the colors of the dots transition in such a way to make the colors appear to transition in a counter-clockwise direction."},{"fileName":"screenshot2.png","description":"The progress circle with its smaller radius. The lightness increases as the radius decreases."}],"videos":[],"content":"#### A progress circle built using SVG\r\n\r\nThe progress circle consists of a ring of color-shifting dots.\r\n\r\nSpecifically, the dots revolve in a clockwise direction while the colors of the dots transition in such a way to make the colors appear to transition in a counter-clockwise direction.\r\n\r\nThis project uses a separate custom animation package Levi developed.\r\n\r\n\r\n[main-url]: https://levi.dev/progress-circle\r\n[codepen-url]: http://codepen.io/levisl176/pen/ndklu"},{"id":"dancing-spokes","titleShort":"Dancing\nspokes:\nWeb doodle","titleLong":"Dancing spokes: A web doodle","emphasis":0.6,"color":"#1c6c45","urls":{"demo":"https://levi.dev/dancing-spokes","github":"https://github.com/levilindsey/dancing-spokes","codepen":"http://codepen.io/levisl176/pen/Cktif"},"jobTitle":"","location":"","date":"1/2014","categories":["Side-Project","Web","Frontend","Art","SVG","Doodle","Tiny","Animation","2D","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"The color of each spoke is always shifting to another random value. At any given point, the hue, saturation, and lightness components of the spoke colors are each constrained to a random global range. This creates an interesting effect with independently fluctuating colors that almost always seem cohesive."},{"fileName":"screenshot2.png","description":"The color of each spoke is always shifting to another random value. At any given point, the hue, saturation, and lightness components of the spoke colors are each constrained to a random global range. This creates an interesting effect with independently fluctuating colors that almost always seem cohesive."}],"videos":[],"content":"#### Fun with SVG animations and dancing sticks of light!\r\n\r\nThe color of each spoke is always shifting to another random value. At any given point, the hue, saturation, and lightness components of the spoke colors are each constrained to a random global range. This creates an interesting effect with independently fluctuating colors that almost always seem cohesive.\r\n\r\n\r\n[main-url]: https://levi.dev/dancing-spokes"},{"id":"metabounce","titleShort":"Metabounce:\nWeb doodle","titleLong":"Metabounce: A web doodle","emphasis":0.6,"color":"#33323d","urls":{"demo":"https://levi.dev/metabounce","github":"https://github.com/levilindsey/metabounce","codepen":"http://codepen.io/levisl176/pen/bkmpE"},"jobTitle":"","location":"","date":"1/2014","categories":["Side-Project","Web","Doodle","Art","Frontend","SVG","Animation","2D","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"Both the inner and main balls grow and eventually pop with delightful animations. A popping ball will push—and possibly pop—neighboring balls."},{"fileName":"screenshot2.png","description":"The balls can be rendered with transparency and multiple gradients that make them resemble iridescent bubbles."},{"fileName":"screenshot3.png","description":"This app includes many parameters that adjust things like: bounce squish intensity, gravity, drag, pop force thresholds, ball growth rates, pop neighbor displacement power, nested balls, ball colors, ball count, ball size, etc."},{"fileName":"screenshot4.png","description":"This app includes many parameters that adjust things like: bounce squish intensity, gravity, drag, pop force thresholds, ball growth rates, pop neighbor displacement power, nested balls, ball colors, ball count, ball size, etc."}],"videos":[],"content":"#### Fun with SVG, balls, and bouncing!\r\n\r\nThis is a project in which Levi played around with balls and bouncing. This is just for fun, so enjoy!\r\n\r\nThe color of each ball is always shifting to another random value. At any given point, the hue, saturation, and lightness components of the ball colors are each constrained to a random global range. This creates an interesting effect with independently fluctuating colors that almost always seem cohesive.\r\n\r\n\r\n[main-url]: https://levi.dev/metabounce\r\n[codepen-url]: http://codepen.io/levisl176/pen/lqmAE"},{"id":"chess","titleShort":"Chess","titleLong":"Chess","emphasis":0.6,"color":"#0373c4","urls":{"demo":"https://levi.dev/chess","github":"https://github.com/levilindsey/chess"},"jobTitle":"","location":"","date":"10/2013","categories":["Side-Project","Web","App","Frontend","Game","AI","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"Gameplay screenshot: Directions for the game are shown below the board."},{"fileName":"screenshot2.png","description":"Gameplay screenshot: After clicking on a piece, you must move that piece. Hovering over valid tiles to move the piece to, will cause the tile to turn green. Invalid tiles will turn red. Tiles will turn yellow if the move would take an enemy piece. If there are no valid moves for a piece, it is not selectable in the first place."},{"fileName":"screenshot3.png","description":"Gameplay screenshot: After clicking on a piece, you must move that piece. Hovering over valid tiles to move the piece to, will cause the tile to turn green. Invalid tiles will turn red. Tiles will turn yellow if the move would take an enemy piece. If there are no valid moves for a piece, it is not selectable in the first place."},{"fileName":"screenshot4.png","description":"Gameplay screenshot: After clicking on a piece, you must move that piece. Hovering over valid tiles to move the piece to, will cause the tile to turn green. Invalid tiles will turn red. Tiles will turn yellow if the move would take an enemy piece. If there are no valid moves for a piece, it is not selectable in the first place."},{"fileName":"screenshot5.png","description":"Gameplay screenshot: The current gameplay status is shown above the board."},{"fileName":"screenshot7.png","description":"Gameplay screenshot: The current gameplay status is shown above the board."},{"fileName":"screenshot10.png","description":"Gameplay screenshot: Casteling is supported (before castling)."},{"fileName":"screenshot11.png","description":"Gameplay screenshot: Casteling is supported (after castling)."},{"fileName":"screenshot9.png","description":"Gameplay screenshot: Even the special rule for en passant captures is supported."},{"fileName":"screenshot6.png","description":"Gameplay screenshot: Pawns can be promoted when reaching the far edge of the board."},{"fileName":"screenshot8.png","description":"Gameplay screenshot: Check mate conditions are also calculated."}],"videos":[],"content":"#### A simple, two-player game of chess\r\n\r\nLevi developed this app in a day. It includes a button to generate a random valid play for the current player.\r\n\r\nIt currently support game play across remote machines, but Levi plans on implementing this in the future. It currently does not support an AI player, but Levi also plans on implementing a simple form of this in the future.\r\n\r\n[main-url]: https://levi.dev/chess"},{"id":"squared-away","titleShort":"Tile-matching\npuzzle\ngame","titleLong":"Squared Away: A tile-matching puzzle game","emphasis":0.6,"color":"#8a2128","urls":{"demo":"https://levi.dev/squared-away","github":"https://github.com/levilindsey/squared-away"},"jobTitle":"","location":"","date":"9/2013","categories":["Side-Project","Web","App","Art","Frontend","Canvas","Animation","2D","Game","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"Squared Away features a collection of eight different levels—each with progressively more challenging parameters—that guide the player in their exploration of the different gameplay features."},{"fileName":"screenshot11.png","description":"Blocks fall from all four sides. Blocks stack and collapse according to rules that closely resemble the familiar game of Tetris. Upcoming blocks are shown for each side with a cool-down progress indicator."},{"fileName":"screenshot10.png","description":"Completed layers show a cool collapsing block sprite-based animation."},{"fileName":"screenshot9.png","description":"Completed layers show a cool collapsing block sprite-based animation."},{"fileName":"screenshot7.png","description":"The game features many configurable parameters."},{"fileName":"screenshot6.png","description":"The main intended method of interaction is with a mouse or touch gestures. Falling blocks can be slid downward, slid from side to side, rotated, and moved to the next quadrant. As a falling block is being manipulated, phantom lines are shown, which help to indicate where a block can be moved in either the downward or lateral directions."},{"fileName":"screenshot5.png","description":"The game can also be played with keyboard input."},{"fileName":"screenshot8.png","description":"The game features background music from the talented Eric Skiff."}],"videos":[],"content":"#### A tile-matching puzzle game\r\n\r\nThis web app gave Levi the opportunity to hone his web development skills and to learn the latest features of HTML5 and CSS3.\r\n\r\nOn the front end, Levi used pure JavaScript without external libraries like jQuery—with the notable exception of SoundJS for cross-browser support for layering audio. On the server side, Levi used Node.js with ExpressJS.\r\n\r\n## Gameplay\r\n\r\nCore gameplay features:\r\n\r\n- Blocks fall from all four sides\r\n- Blocks stack and collapse according to rules that closely resemble the familiar game of Tetris\r\n- Upcoming blocks are shown for each side with a cooldown progress indicator\r\n- Falling blocks can be manipulated with either the mouse or the keyboard if keyboard mode is enabled\r\n- Falling blocks can be slid downward, slid from side to side, rotated, and moved to the next quadrant\r\n- As a falling block is being manipulated, phantom lines are shown, which help to indicate where a block can be moved in either the downward or lateral directions.\r\n- As more layers of blocks are collapsed, the player advances through levels and gameplay becomes more difficult with faster falling blocks and shorter cooldown times.\r\n- Awesome sound effects and background music.\r\n\r\nAdditional optional gameplay features include:\r\n\r\n- A mode where only complete layers around the entire center square are collapsed.\r\n- A mode where blocks fall from the center outward.\r\n- A special block type that \"settles\" all of the blocks that have landed.\r\n- A special block type that destroys any nearby block that has landed.\r\n\r\n\r\n[main-url]: https://levi.dev/squared-away"},{"id":"newtons-tablet","titleShort":"Intelligent\ntutoring\nsystem:\nTablet","titleLong":"Newtons Tablet: An intelligent tutoring system","emphasis":0.6,"color":"#2b50db","urls":{"published":"http://escholarship.org/uc/item/40r3k5v2"},"jobTitle":"Graduate Student Researcher","location":"","date":{"start":"9/2011","end":"7/2013","tieBreaker":3},"categories":["Work","School","Research","UCR","C-Sharp","Java","App","tablet","Teamwork","AI"],"images":[{"fileName":"boundary-trace-stage-screenshot.png","description":"A screenshot of the program during the boundary-trace stage. At this point, the student is identifying and isolating the individual bodies from complex overall system."},{"fileName":"force-drawing-stage-screenshot.png","description":"A screenshot of the program in during the force-drawing stage."},{"fileName":"error-mode-screenshot.png","description":"A screenshot of the program showing error feedback. During each stage in the problem solving process, the program evaluates the student's work and provides guided feedback for any errors."},{"fileName":"exp-eqn-entry-stage-screenshot.png","description":"A screenshot of the program during the final, equation-entry stage."},{"fileName":"matching-points-from-resampling.png","description":"The Importance of Resampling for Matching Points. In these two examples, the blue points represent the hand-drawn stroke, and the red points represent the boundary of the underlying body. Lines are drawn from a point in one set to the closest point in the other set if the closest point is within the distance threshold. The points with a yellow center represent points that do not have any close matches from the other set. (a) Many of the points from a densely sampled trace stroke will not match any of the points from a sparsely sampled boundary polygon. (b) Resampling the trace and the boundary polygon to the same number of points—40 in this case—greatly increases the likelihood of points having matches."}],"videos":[{"videoHost":"youtube","id":"LAlzil4WsGw","description":"A narrated demonstrational video explaining how to use the Newton's Tablet program."}],"content":"#### An Intelligent Tutoring System running on Window's tablets\r\n\r\nIn his graduate studies at the University of California, Riverside, Levi worked with Professor [Thomas Stahovich][stahovich-url] in the [Smart Tools lab][stl-url].\r\n\r\nLevi led the development of a statics tutorial system, which both helped novice students tackle difficult concepts and provided the lab with key insights into the learning process and how students think.\r\n\r\nThis work resulted in the production of two completely different software programs: one which ran on tablet PC computers with a standard computer interface (_written in C# with WPF_), and one which ran on [Livescribe smartpens][livescribe-url] with specially designed paper worksheets (_written in Java_). Both programs were designed with natural user interface as a paramount concern. These programs were deployed to 150 students in an introductory statics course at the University of California, Riverside in the Winter of 2012.\r\n\r\nYou can read Levi's thesis at [escholarship.org/uc/item/40r3k5v2][thesis-url].\r\n\r\n\r\n[stahovich-url]: http://www.engr.ucr.edu/faculty/me/stahovich.html\r\n[stl-url]: http://smarttools.engr.ucr.edu/\r\n[livescribe-url]: http://livescribe.com/en-us/\r\n[thesis-url]: http://escholarship.org/uc/item/40r3k5v2"},{"id":"newtons-pen","titleShort":"Intelligent\ntutoring\nsystem:\nPen","titleLong":"Newtons Pen: An intelligent tutoring system","emphasis":0.6,"color":"#2b50db","urls":{"published":"http://escholarship.org/uc/item/40r3k5v2"},"jobTitle":"Graduate Student Researcher","location":"","date":{"start":"9/2011","end":"7/2013","tieBreaker":2},"categories":["Work","School","Research","UCR","C-Sharp","Java","App","livescribe","Pen","Teamwork","AI"],"images":[{"fileName":"pen-boundary-stage-work-1.png","description":"A free-body-diagram worksheet showing a student's completed work."},{"fileName":"pen-fbd-worksheet.png","description":"A free-body-diagram worksheet showing a student's completed work."},{"fileName":"pen-prob-desc-worksheet.png","description":"A problem-description worksheet showing problem-specific information in the top region and general buttons for using the system in the bottom region."},{"fileName":"pen-and-paper.png","description":"A Livescribe smartpen with Anoto dot paper"}],"videos":[{"videoHost":"youtube","id":"y8QYhgRrRZk","description":"A narrated demonstrational video explaining how to use the Newton's Pen application."}],"content":"#### An Intelligent Tutoring System running on Window's tablets\r\n\r\nIn his graduate studies at the University of California, Riverside, Levi worked with Professor [Thomas Stahovich][stahovich-url] in the [Smart Tools lab][stl-url].\r\n\r\nLevi led the development of a statics tutorial system, which both helped novice students tackle difficult concepts and provided the lab with key insights into the learning process and how students think.\r\n\r\nThis work resulted in the production of two completely different software programs: one which ran on tablet PC computers with a standard computer interface (_written in C# with WPF_), and one which ran on [Livescribe smartpens][livescribe-url] with specially designed paper worksheets (_written in Java_). Both programs were designed with natural user interface as a paramount concern. These programs were deployed to 150 students in an introductory statics course at the University of California, Riverside in the Winter of 2012.\r\n\r\nYou can read Levi's thesis at [escholarship.org/uc/item/40r3k5v2][thesis-url].\r\n\r\n\r\n[stahovich-url]: http://www.engr.ucr.edu/faculty/me/stahovich.html\r\n[stl-url]: http://smarttools.engr.ucr.edu/\r\n[livescribe-url]: http://livescribe.com/en-us/\r\n[thesis-url]: http://escholarship.org/uc/item/40r3k5v2"},{"id":"gesture-recognizer","titleShort":"Gesture\nrecognition","titleLong":"Gesture segmenter and recognizer","emphasis":0.8,"color":"#9592c9","urls":{"github":"https://github.com/levilindsey/stroke-recognition"},"jobTitle":"","location":"","date":{"start":"9/2011","end":"7/2013","tieBreaker":1},"categories":["School","Research","C-Sharp","App","Pen","Solo-Work","AI"],"images":[{"fileName":"canvas-ink-sigma-instance.png","description":"The program with a sigma shape drawn by the user. The system parameters can be seen on the right. The recognizer in this case has been trained on the sample student data with a hold out of first and sixth instances of each shape from each user. The system recognizes the current canvas ink as a sigma shape."},{"fileName":"directional-bitmaps-sigma-instance.png","description":"The directional pixel values for the ink shown in the previous image."},{"fileName":"directional-bitmaps-sigma-template.png","description":"The directional bitmaps for the sigma shape class template. More intense coloration represents higher probabilities."},{"fileName":"directional-bitmaps-1-2-instance-and-template.png","description":"The directional pixel values for a holdout shape overlaid on top of the directional bitmaps for the shape class template to which it was matched."},{"fileName":"recognition-stats-1-2-instance.png","description":"The recognition details for the shape instance shown in the previous image."},{"fileName":"average-results.png","description":"A confusion matrix showing the average results from an 18-fold cross-validation with single-user holdouts."}],"videos":[{"videoHost":"youtube","id":"xxBeSKijSSw","description":"A walkthrough of Levi's stroke segmentation functionality."}],"content":"_Levi developed a novel algorithm for real-time gesture recognition from ink data. This was extended from work done in a UCR course on Pen-Based Computing algorithms and techniques._\r\n\r\n## An Inductive Image-Based Recognizer Using Directional Bitmap Templates\r\n\r\n### Contents\r\n\r\n- The Algorithm\r\n- Strengths\r\n- Weaknesses\r\n- Improvements\r\n- Performance\r\n- Additional Features\r\n\r\n### The Algorithm\r\n\r\nThe general idea of the algorithm is to first create four template bitmaps to represent the ink directional probability of a given shape class, then an unknown shape instance is classified as the class whose directional templates it most closely matches.\r\n\r\n#### Preprocessing\r\n\r\nFirst, angle values are computed for all points in all strokes in a given shape instance. These angles are based off zero degrees along the horizontal axis. The angle value for a point is calculated as the average of the angles of the line segments connecting that point to its previous and next neighbors. These angles are then convoluted with a Gaussian smoothing kernel.\r\n\r\nNext, the given shape instance is uniformly scaled and translated so that its x and y coordinate values range from 0 to 1. It is also translated so that it is centered in this hypothetical, square, 1x1 canvas.\r\n\r\nDirectional pixel values are then computed for the given shape instance. There are four directional components associated with each pixel—the lines along 0°, 45°, 90°, and 135°. The value of a point for each of these four directions is 1 if the angle is different by 0°, 0 if the angle is different by 45° degrees or more, and linearly interpolated between 0 and 1 for angles differing by 0°-45°. Note that these directions also match with their opposites; i.e., if a point has an angle of 215°, then it has a difference of 0° with the 45° line, and its value for its 45° directional pixel is 1.\r\n\r\nThe entire bitmap region is not stored for each shape instance; in order to save space and time, a mapping from pixel indices to directional intensity values is created, and this mapping contains a key for a given pixel if and only if the shape instance contains a point in that pixel. There are actually four such mappings for each shape instance— one for each of the four directions. These mappings are created by looping over each of the points, determining in which pixel a point lies, and storing the four directional values of this point at this pixel index within the four mappings. If multiple points in a shape instance have values for the same direction in the same pixel, then the largest value is saved.\r\n\r\nThe discretization of ink means that we have two special cases to consider: when a single pixel contains multiple consecutive points, and when the line segment between two consecutive points intersects a pixel in which neither point actually lies. The former case is actually handled well with the aforementioned policy of saving a pixel's maximal intensity value for each direction. An alternative approach for this could have been to use the average angle values for consecutive points lying within the same pixel, but this causes a good deal of information to be lost within pixels containing high curvature—i.e., corners. The latter case could be handled robustly by calculating the intermediate pixels via the Bresenham line algorithm, but the lost pixels become less significant with more training examples. Also, a 3x3 Gaussian smoothing kernel is used to smooth the final values of the templates. However, these two points do not address the lost pixels from an unknown shape instance being recognized, and further research could be performed to determine whether the application of the Bresenham line algorithm would increase recognition accuracy.\r\n\r\n#### Training\r\n\r\nAfter each shape instance has been preprocessed, actually creating the templates is a simple process. For each shape class, four complete bitmaps are created—one for each direction—and then all of the pixel intensity values for each of the training shape instances are added together into the appropriate bitmaps. Each pixel in each bitmap is then normalized by the number of training instances for the given shape class template. Finally, a 3x3 Gaussian smoothing kernel is used to smooth the final values of each of the directional bitmaps for each template.\r\n\r\n#### Recognition\r\n\r\nTo recognize a given unknown shape instance, a simple distance metric is used, and the shape is classified as whichever class yields the smallest distance. This distance between a shape instance and a class template is computed as\r\n\r\n![Shape-class distance equation][shape-class-distance-equation-image]\r\n\r\nwhere _I_ is the list of the pixel indices—i.e., keys—in the pixel indices to directional intensity values mappings, _s_θi_ is the directional intensity value from the θ directional mapping of the pixel at index _i_ for the unknown shape instance, _t_θi_ is the directional intensity value from the θ directional bitmap of the pixel at index _i_ for the shape class template, _n_s_ is the number of pixels containing ink for the unknown shape instance, _n_t_ is the average number of pixels containing ink for the shape class template, and _w_ is a weight parameter.\r\n\r\nThe term relating to the number of pixels containing ink is important, because this distance metric only considers pixels which are covered by the unknown shape instance. To understand why this is a problem, consider the example of the unknown shape instance being the letter P, and there are templates both for the letter P and the letter R. Because the distance only considers the pixels from the shape instance P, the P and R templates will be found to have roughly the same distance. This term for the number of pixels containing ink allows the distance metric to match the P shape instance more closely to the P template than the R template.\r\n\r\nIt may seem that rather than using this term for the number of pixels containing ink, that the distance metric could simply sum over all of the pixels in the template bitmap rather than only over the pixels covered by the shape instance, but this leads to its own problem. This would mean that whichever class template contains the least ink—in our case '-'—would nearly always be found to have the lowest distance.\r\n\r\n#### Parameters\r\n\r\n_w_ = 0.09\r\ntemplate side length (they are square) = 14\r\nnumber of smoothing iterations for the templates = 3\r\nnumber of smoothing iterations for the point angle values = 1\r\n\r\nThese values have been selected by hand.\r\n\r\n### Performance\r\n\r\nIn order to test this algorithm, a shape collection was compiled from 18 people each drawing 15 shapes 5 times with a few instances being lost due to collection error.\r\n\r\nThen an 18-fold cross-validation was performed with single-user hold outs. The averages from this test are presented in this confusion matrix.\r\n\r\n![Average results][average-results-image]\r\n\r\n_***NOTE: this screen shot should instead say \"18-fold\"**_\r\n\r\n### Strengths\r\n\r\nThe largest strength of this recognition algorithm is that it is extremely fast both to train and to recognize. It took, on average, 0.36 to perform the 18-fold cross-validation, 0.02 seconds to train, and 0.00006 seconds to recognize a shape instance.\r\n\r\nThis algorithm is scale invariant.\r\n\r\n### Weaknesses\r\n\r\nThis algorithm is rotationally variant, so it would not perform well with a system in which rotation mattered.\r\n\r\nThis algorithm does not fully take into account the conditional probabilities of the ink. The templates naturally represent a form of Gaussian probability for ink around a segment of the shape class—i.e., there is a higher probability of the ink in an instance of the shape class lying in the center of the segment of the template than off to either side of the segment. However, given that a point in an instance of the shape class does lie off to one side of a segment of the shape class template, it is much more likely that the next point also will lie off to that side, and much less likely that the next point will lie off to the other side. This algorithm does not take advantage of this conditional probability.\r\n\r\n### Improvements\r\n\r\nThis algorithm could be extended to become rotationally invariant. This could possibly be done by rotating each shape instance according to an indicative angle from the centroid to the furthest point from the centroid.\r\n\r\nThe conditional ink probability—addressed in the weaknesses section—could be taken advantage of with a \"super pixel\" scheme. In this scheme, each pixel in each directional bitmap could contain four additional mxm sub-bitmaps of pixel values. These sub-bitmaps would represent the conditional directional ink probabilities of the neighbors of the given center pixel. Adapting the training of the templates for these bitmaps of super pixels and the distance metric would be a fairly straightforward extension of their current versions. However, this super-pixel scheme would have a much higher time and space complexity.\r\n\r\n### Additional Features\r\n\r\n![Directional bitmaps for the sigma-class template][directional-bitmaps-sigma-template-image]\r\n\r\nThis shows the directional bitmaps for the sigma shape class template. More intense coloration represents higher probabilities.\r\n\r\n![The original ink on the canvas for an instance of the sigma shape][canvas-ink-sigma-instance-image]\r\n\r\nThis shows the program with a sigma shape drawn by the user. The system parameters can be seen on the right. The recognizer in this case has been trained on the sample student data with a hold out of first and sixth instances of each shape from each user. The system recognizes the current canvas ink as a sigma shape.\r\n\r\n![Directional bitmaps showing an instance of the sigma shape][directional-bitmaps-sigma-instance-image]\r\n\r\nThis shows the directional pixel values for the ink shown in the previous image.\r\n\r\n![Directional bitmaps showing data for both an instance and the template of the 1/2 shape][directional-bitmaps-1-2-instance-and-template-image]\r\n\r\nThis shows the directional pixel values for a holdout shape overlaid on top of the directional bitmaps for the shape class template to which it was matched.\r\n\r\n![Recognition statistics for an instance of the 1/2 shape][recognition-stats-1-2-instance-image]\r\n\r\nThis shows the recognition details for the shape instance shown in the previous image.\r\n\r\n\r\n[shape-class-distance-equation-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/shape-class-distance-equation.png\r\n[average-results-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/average-results.png\r\n[directional-bitmaps-sigma-template-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/directional-bitmaps-sigma-template.png\r\n[canvas-ink-sigma-instance-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/canvas-ink-sigma-instance.png\r\n[directional-bitmaps-sigma-instance-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/directional-bitmaps-sigma-instance.png\r\n[directional-bitmaps-1-2-instance-and-template-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/directional-bitmaps-1-2-instance-and-template.png\r\n[recognition-stats-1-2-instance-image]: https://s3-us-west-2.amazonaws.com/levi-portfolio-media/gesture-recognizer/recognition-stats-1-2-instance.png"},{"id":"ucr-ta","titleShort":"Teaching\nassistant","titleLong":"Teaching assistant","emphasis":0.6,"color":"#2a72b8","urls":{},"jobTitle":"Teaching Assistant","location":"Riverside, CA","date":{"start":"9/2012","end":"6/2013"},"categories":["Work","School","Teaching","C++","UCR","Teamwork"],"images":[],"videos":[],"content":"Levi was a teacher's assistant for Software Construction for two quarters and for Intro to Programming for two quarters.\r\n\r\nBoth of these courses were taught using C++.\r\n\r\n## Un-edited end-of-quarter reviews\r\n\r\n> He is the best TA i have ever seen.\r\n\r\n\r\n> Levi is always available and helpful to his students. He gives good feedback, which helps the overall learning process. He is kind and always motivates his students. Always in a good mood!\r\n\r\n\r\n> Great TA!. Really nice and knows how to talk to people. Explains the problem and lets you solve it for yourself instead of doing it for you. Made my first CS experience easy.\r\n\r\n\r\n> I don't know how you did it, but managing to run around for 3 hours straight answering all our questions was extremely commendable, and you kept a happy face about it all the time. I'd love to have you as a TA in the future! Thanks for everything\r\n\r\n\r\n> Levi was a really great TA. He is very helpful and approachable as well. He was indeed to go-to person for me whenever I needed help. I understood everything that he said clearly.\r\n\r\n\r\n> Very helpful and easy to approach. He truly cares if the students in his lab and others are learning or not. One of my best TA's so far.\r\n\r\n\r\n> Levi has been a great instructor, and is a very approachable person that as a student I do not hesitate to ask him questions.\r\n\r\n\r\n> You were so helpful and such a good teacher! And super sweet. Thank you!\r\n\r\n\r\n> BEST TA EVER :)"},{"id":"jackieandlevi.com","titleShort":"Portfolio\nwebsite:\nLevi's first","titleLong":"Levi's first portfolio website","emphasis":0.6,"color":"#d7cef1","urls":{"homepage":"http://jackieandlevi.com","github":"https://github.com/levilindsey/jackieandlevi.com"},"jobTitle":"","location":"","date":"2013","categories":["Side-Project","Web","Website","App","Frontend","Back-End","MEAN-Stack","node.js","Express","Angular","MongoDB","gulp.js","Animation","Solo-Work"],"images":[{"fileName":"v1/screenshot1.png","description":"This is the original design for jackieandlevi.com. The home page had a Venn diagram containing links to pages about Jackie, Levi, and both of them."},{"fileName":"v1/screenshot2.png","description":"This was Jackie's about page."},{"fileName":"v1/screenshot4.png","description":"This was Levi's about page."}],"videos":[],"content":"#### The personal web site of Jackie and Levi Lindsey\r\n\r\nThe site hosted at this domain has gone through many iterations.\r\n\r\n- It was originally used as an [invite and RSVP system][wedding-url] for [Jackie][jackie-url] and [Levi's][levi-url] [wedding][wedding-photos-url].\r\n- Later, it was used as a [simple portfolio site][v2-url] for both Levi and Jackie.\r\n- Levi is currently developing a newer version of the site that will involve better designs and delightful interactions.\r\n\r\n\r\n[wedding-url]: http://jackieandlevi.com/wedding/invite\r\n[jackie-url]: http://jackieandlevi.com/jackie\r\n[levi-url]: https://levi.dev\r\n[wedding-photos-url]: http://jackieandlevi.com/wedding/photos\r\n[v2-url]: http://jackieandlevi.com\r\n[v3-url]: http://jackieandlevi.com"},{"id":"wedding-invite","titleShort":"Wedding\nsite","titleLong":"Wedding invite and RSVP system","emphasis":0.6,"color":"#acdacc","urls":{"demo":"https://levi.dev/wedding/invite","github":"https://github.com/levilindsey/wedding-invite"},"jobTitle":"","location":"","date":"9/2012","categories":["Side-Project","Web","Website","Frontend","Art","PHP","jQuery","animations","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"The landing view."},{"fileName":"screenshot2.png","description":"As the user moves the mouse invard, or touches the envelope, different navigational cards slide outward from under the envelope."},{"fileName":"screenshot4.png","description":"The RSVP card."},{"fileName":"screenshot5.png","description":"A card that tells the time of the wedding and shows a countdown."},{"fileName":"screenshot6.png","description":"A card that names the two people getting married."},{"fileName":"screenshot7.png","description":"A card that describes the location of the celebration."},{"fileName":"screenshot8.png","description":"A card that describes the specifics of the celebration."}],"videos":[],"content":"#### A wedding invite and RSVP system\r\n\r\nLevi developed this simple web app as the invite and RSVP system for his and [Jackie's][jackie-url] wedding.\r\n\r\n[main-url]: https://levi.dev/wedding/invite\r\n[jackie-url]: http://jackieandlevi.com/jackie"},{"id":"voicebox-technologies","titleShort":"Audio\nsignal\nprocessing","titleLong":"Audio signal processing","emphasis":0.6,"color":"#92b075","urls":{"homepage":"http://voicebox.com"},"jobTitle":"Summer Intern (Software Engineer)","location":"Bellevue, WA","date":{"start":"6/2011","end":"9/2011"},"categories":["Work","Intern","C","C++","Teamwork"],"images":[{"fileName":"spectrogram.jpg","description":"A spectrogram with its corresponding waveform."}],"videos":[],"content":"_[VoiceBox Technologies][main-url] is a company focused on conversational speech recognition, search, and information management._\r\n\r\nLevi integrated noise-suppression functionality from an ETSI standard into VBT’s pre-existing [Voice Activity Detection][vad-url] software and tuned it for optimal performance.\r\n\r\n_C with C++ wrappers_\r\n\r\n[main-url]: http://voicebox.com/\r\n[vad-url]: http://en.wikipedia.org/wiki/Voice_activity_detection"},{"id":"dietary-data-recording-system","titleShort":"Recording\nsystem","titleLong":"Dietary Data Recording System","emphasis":0.6,"color":"#04fc5a","urls":{"homepage":"http://ee.washington.edu/research/seal","published":"http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=5766890&isnumber=5766834&url=http%3A%2F%2Fieeexplore.ieee.org%2Fstamp%2Fstamp.jsp%3Ftp%3D%26arnumber%3D5766890%26isnumber%3D5766834"},"jobTitle":"Student Researcher (Software Engineer)","location":"Seattle, WA","date":{"start":"4/2010","end":"6/2011"},"categories":["Work","School","Research","Android","Java","Mobile","UW","Teamwork"],"images":[{"fileName":"ddrs-app-screenshots.png","description":"A few of the many different screens of the DDRS app."},{"fileName":"meal-review.png","description":"This screen lets the user review all of the different data they recorded for a given meal."},{"fileName":"photo1.jpg","description":"This photo shows the complete device in the process of recording a video of a meal. It is important for the device to rotate around the meal, so that video captures multiple perspectives of the food."},{"fileName":"photo2.jpg","description":"This photo shows the complete device in the process of recording a video of a meal. It is important for the device to rotate around the meal, so that video captures multiple perspectives of the food."},{"fileName":"video-screen.png","description":"This is the screen that prompts the user to record a video of their food."},{"fileName":"starting-screen.png","description":"This is the home screen of the DDRS app."},{"fileName":"device2.png","description":"Levi also created a second app that was used for internal testing of the video-based volume-calculation algorithm."}],"videos":[],"content":"During his undergraduate studies at the University of Washington, Levi spent more than a year working with [Professor Alexander Mamishev][mamishev-url] in the [Sensors Energy and Automation Laboratory][seal-url]. The lab had been hired by the [Fred Hutchinson Cancer Research Center][fred-hutch-url] to create a Dietary Data Recording device that would better record the dietary intake of their study participants.\r\n\r\nThe lab's work revolved around the development of an application that ran on Android devices. Levi was the sole developer for this.\r\n\r\n## Features\r\n\r\nSome of the application's functionalities included:\r\n\r\n- Recording accelerometer and magnetometer data and associating them with individual video frames in order to analyze\r\nthe volume of food\r\n- Firing a laser grid via an external, custom-made, Bluetooth-compatible device\r\n- Recording and playing audio and video\r\n- Scanning barcodes\r\n- Compressing, uploading, and downloading data from the databases on our server\r\n- Recording dietary info in an SQLite database\r\n- Parsing SQL data to and from an XML file\r\n\r\n## Paper\r\n\r\nLevi co-authored a paper on this research entitled [A Pervasive Dietary Data Recording System][paper-url].\r\n\r\n### Abstract\r\n\r\n> The purpose of this research is to determine how beneficial the use of real-time, computer-mediated dietary data recording can be in medical studies. Current methods of dietary tracking and assessment typically involve paper and pencil food diaries and/or periodic dietary interviews, and these tend to be imprecise, yielding inconclusive results as to how a study participant’s diet affects his or her health. Reasons for this imprecision include participant bias, errors in the participant’s memory, errors in the participant’s judgment of food quantities, and underreporting from the participant. The use of computer technology should be able to remedy many of these problems. This project focuses on creating a device based on mobile phones and hand-held computers to record a participant’s dietary intake. This Dietary Data Recording System (DDRS) will serve as a convenient method for real-time documentation of a participant’s intake, and will allow the participant to record both an audio and a visual description of their food. A fundamental aspect of DDRS is the use of a laser-generated grid of distances in coordination with stereo-optic images for the determination of food volume. This device should provide confirmation as to whether real-time computer-assisted recording of dietary data is manageable and accurate.\r\n\r\n[mamishev-url]: http://ee.washington.edu/faculty/mamishev/\r\n[seal-url]: http://ee.washington.edu/research/seal/\r\n[fred-hutch-url]: http://fredhutch.org/en.html\r\n[paper-url]: http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=5766890&isnumber=5766834&url=http%3A%2F%2Fieeexplore.ieee.org%2Fstamp%2Fstamp.jsp%3Ftp%3D%26arnumber%3D5766890%26isnumber%3D5766834"},{"id":"phone-wand","titleShort":"Blind-\naccessible\nnavigation","titleLong":"Phone Wand: A blind-accessible navigation application","emphasis":0.6,"color":"#318895","urls":{"googleCode":"https://code.google.com/p/mobileaccessibility/source/browse/#svn%2Ftrunk%2FPhoneWand"},"jobTitle":"","location":"","date":{"start":"4/2011","end":"6/2011"},"categories":["School","Research","UW","Android","Java","accessibility","Mobile","google-maps-api","App","Teamwork"],"images":[{"fileName":"fixedinputscreen2.png","description":"This screen presents the current destination. This is essentially a home screen. From here, the user can enter a new destination, find a list of old destinations, find a list of other possible matches for the destination that was typed in the keyboard, or start navigating toward the current destination."},{"fileName":"fixedkeyboard1.png","description":"This screen presents a custom, blind-accessible keyboard. The user can drag a finger over the the buttons to hear them quickly read aloud via TTS."},{"fileName":"fixedroute1.png","description":"While on this screen, the system provides vibrational feedback to guide the user through the route."},{"fileName":"fixeddirections2.png","description":"This screen presents a list of the steps in the current route. The user can drag a finger over the items to hear them read aloud via TTS."},{"fileName":"fixedroutearchive2.png","description":"This screen presents a list of previously entered destinations. The user can drag a finger over the items to hear them read aloud via TTS."},{"fileName":"screen-transition-diagram-small.png","description":"This diagram illustrates all of the different screens of the system and how to navigate from one to another."}],"videos":[{"videoHost":"youtube","id":"qooZe704Ppw","description":"A narrated demonstrational video explaining how to use the Phone Wand application."}],"content":"#### A blind-accessible route-navigation Android application\r\n\r\nIn a computer science capstone course on accessibility at the University of Washington, Levi co-developed a route-orienting application that would guide a blind user via vibrational feedback.\r\n\r\nThis application would first geocode the user's current location and a user-entered destination and then query the Google Directions API for a route from the one to the other. This route was then displayed on a map with the user’s current location. The user could then rotate the phone around, and the phone would vibrate when pointed in the direction of the current step in the user's route.\r\n\r\nThis involved the creation of a completely novel blind-accessible soft keyboard in addition to the implementation of a database for storing previously entered destinations.\r\n\r\nThe PhoneWand code is open source and online at [http://code.google.com/p/mobileaccessibility/source/browse/#svn%2Ftrunk%2FPhoneWand][main-url].\r\n\r\n_The following is the final paper from the Phone Wand project._\r\n\r\n## Abstract\r\n\r\nThe Phone Wand is an Android application for mobile phones that enables a blind user to more easily input and navigate a walking route. At any time a route has been specified, the phone can hint which direction to walk when the user requests assistance using the phone's built-in compass and vibration: (1) the user requests for help by double tapping the \"magic button\" on an orientation screen, (2) the user moves the phone radially to search for the correct direction and (3) the phone vibrates when facing the correct direction to continue on the route. This type of assistance is useful when the user is en route to the next intersection and wishes to verify the current heading along the route, or if the user has reached an intersection and wishes to receive the heading to the next intersection. The application also contains features to enable blind-users to more easily input and manage walking routes. This includes a custom blind-accessible keyboard implementation to more easily input addresses, a \"slide-rule\" based blind-accessible list of previously entered walking routes, and an ability to save your current location as a new future destination. Such application is useful for blind users navigating noisy, dense, urban city centers where hearing is difficult, the application's non-verbal orientation guidance is effective, and where location sensing tools are most accurate.\r\n\r\n## Introduction\r\n\r\nNavigating routes can be difficult or time consuming for people who are blind or have low-vision. Navigation applications that are not blind-accessible make it especially difficult and time consuming for blind users to navigate the software enter route destination. Another problem is that too much text-to-speech can be obstructive to a blind persons most important sense, hearing, taking away focus from actual navigation and listening for hazards. While blind-accessible applications often provide an easy interface to input, they often rely too much on text-to-speech output.\r\n\r\nThe purpose of the Phone Wand is to minimize text-to-speech related to actual route navigation but keep only the text-to-speech necessary for a functioning blind-accessible application. The Phone Wand replaces verbal navigation feedback with vibrational feedback. This is a relatively new type of interaction that uses orientation as input and vibration as output. The concept is simple, (1) the user points the phone 360 degrees around her and (2) the phone vibrates when the user is facing the correct direction. This requires minimal text-to-speech as output, solving our information flooding problem. However, while the heart of our application uses compass and vibration feedback, our application still relies on text-to-speech for blind-accessible text entry, traditional list of directions display and giving application directions.\r\n\r\nThe target group for our application includes blind users and low-vision users who can hear. The compass and vibration feedback portion of our application is theoretically blind-deaf-accessible. But, we assume that our target group can hear text-to-speech in order to hear application directions and use the touch keyboard to set up routes in our application. Theoretically we could make the application completely blind-deaf accessible if we had an option to translate our input and output methods into some standard method familiar for blind-deaf users.\r\n\r\n## Use Case\r\n\r\nHarry is walking to a nearby store on the sidewalk and would like additional help. He pulls out his Android phone and launches the Phone Wand. After patiently inputting the store's destination, and waiting for the phone to compute the route, he can press the \"magic button\" to enable the compass driven vibrational orientation feedback mode. After pointing around for a bit, the phone vibrates in the direction he was heading, indicating that he is en route to the destination. Minutes later he reaches an intersection and is unsure of this next direction of travel. Pressing the \"magic button\" again, he points the phone around. This time the phone vibrates when he points it to his left. This indicates that he should turn left. Harry continues this until he reaches the store, where the phone announces that he has arrived at his destination.\r\n\r\n## Related Work\r\n\r\nThere has been a lot of work previously done for inventing useful methods of route-finding and navigation for blind users. Most of these previous projects are lacking in some regard such as their accuracy, usability, or availability. There are many projects involving the creation of a novel navigation device, such as the EYECane project, which involved the creation of a white cane device with an embedded computer and camera, but we will focus rather on blind-accessible smart phone route-finding/navigation applications.\r\n\r\nMost previous work with smart phone applications involves the use of GPS navigating systems with audio feedback similar to the systems available for driving. The Sendero Group has created a couple of applications that are similar to our project. Their LookAround application has a user interface that is very similar to ours, but it only provides information on the user's current location; it does not provide route information. Their Mobile Geo application both finds routes and provides information about locations; however, this costs $788, and uses primarily audio feedback. The Iwalk application is another navigation application similar in to ours, but once again, this application's primary method of user feedback was with audio.\r\n\r\nOur application also relies on special accessible methods of text entry and item selection. Our slide rule list item selection is based upon an earlier project which allows the user to explore the items by pressing a finger on the item and to select it by double tapping it. Our blind accessible touch keyboard was actually invented from scratch and emulates no prior method of text entry; the key is spoken when a finger presses onto it and is selected when a finger is lifted from it. However, a very similar technique for text entry can be seen in how Apple provides iPhone item exploration and selection with their VoiceOver functionality; with VoiceOver, an item is spoken when pressed or slid over and is selected with a second touch on the screen.\r\n\r\n## Solution\r\n\r\nThe purpose of the Phone Wand application is to provide a blind-accessible interface and orientation scheme for finding and navigating walking routes. Hence the Phone Wand uses the Google Directions API to calculate walking routes using the Android location service including network assisted GPS. Orientation output from the Android sensor service and vibration features are used for orientation feedback. The Android TextToSpeech (TTS) library is heavily used to communicate application screen directions to users in a blind-accessible manner. The Phone Wand automatically saves, previously entered routes and provides the ability to save the current location. The slide rule selection method is used to display these routes for the users and to display a current list of the walking route directions.\r\n\r\n### Destination Input\r\n\r\nThe Phone Wand features a custom blind-accessible keyboard for entering destinations. This keyboard was created to emulate the familiar iPhone keyboard familiar to many blind users. The user uses the keyboard by holding down on the screen and releasing when the desired letter is called. There is functionality for reading out the entered text, backspace, readout of cursor location, and other features. The done button searches for a route best matching the entered text.\r\n\r\nSince blind-accessible text entry is still relatively time consuming for users, the Phone Wand automatically saves previously entered destinations in a list. A user can access this blind-accessible list and select a destination address. The list is based on a Slide Rule interaction technique (cite slide rule paper). A user can scan the list with her finger while the phone speaks back what is currently underneath her finger. If the list is longer than the screen, the user can scan for the \"next\" and \"previous\" buttons in the list to navigate the list. When the user finds the desired item, she can double tap to confirm the item, which the phone will then search for a route.\r\n\r\n### Navigation Features\r\n\r\nAfter a destination has been entered via keyboard or selected from the list of saved addresses, the phone takes the user to a map screen, which displays a route from the current location to the destination. On this screen, there are several options: (1) recompute a new route from the current location, (2) find a nearby address and save it, (3) access a list of directions, or (4) using the compass and vibration feature.\r\n\r\n(1) Recomputing a route is useful when the user is significantly off course from the original route, or otherwise when the user wants to find a fresh route from the current location. The user can accomplish this by swiping upwards. The phone downloads a new route using the Google Directions API.\r\n\r\n(2) Finding a nearby address and saving it is useful when the user wants to \"bookmark\" the current location for future use. This is accomplished by swiping downwards.\r\n\r\n(3) The user can also access a list of directions. The user can swipe right on the map screen to view the list of directions. The list is blind-accessible: it uses the slide rule interaction. Therefore a user can scan through the list and have the phone speak back the directions. This functionality was implemented to give the user another option.\r\n\r\n(4) Finally, the user can take advantage of the compass and vibration feature on this screen as detailed in the next section.\r\n\r\n### Compass and Vibration\r\n\r\nWhile the map screen provides additional features, the compass and vibration mode is the most prominent feature of our application.\r\n\r\nTo activate the compass and vibration mode, the user double taps on the map screen. (This gesture is referred to as the \"magic button\" because it turns this mode on and off.) Afterwards, the user can move the phone radially around her. The phone vibrates when the user is facing the correct direction. The user should double tap on the map screen again to deactivate the mode and continue walking the direction determined by the phone.\r\n\r\nThe intended use of this compass and vibration mode is to check the user's heading at interest points (like intersections) along the route, or whenever the user simply needs to verify her heading. Therefore, the user should activate the mode, check her heading, and then deactivate immediately. While one can activate the mode and leave it enabled throughout the entire route, it may not be accurate enough to direct the user along the route.\r\n\r\nFor effective feedback from the compass, the user should hold the phone parallel to the ground, move the phone radially (point the phone 360 degrees around the person), and move the phone slowly. Since the compass is not entirely accurate, we advise using this feature to \"check\" the heading occasionally along the route, not to depend on it entirely.\r\n\r\n## Future Work\r\n\r\nWe foresee a few extensions and modifications of the Phone Wand that would be valuable blind and low-vision accessible applications.\r\n\r\n### Indoor Navigation using RFID Tags\r\n\r\nWillis and Helal's paper \"RFID information grid for blind navigation and wayfinding\" lays out the foundations needed to use and construct an indoor RFID (Radio Frequency Identification) based indoor navigation system. RFID tags are cheap, extremely power efficient devices with immense portability that can hold a small amount of information. They are extremely useful in pervasive computing by (literally) attaching computer data to physical objects. Indoor navigation is solved by rigging buildings with thousands of RFIDs each containing a small piece of geographical information. The advantage of RFID readers vs. GPS is in the locality of the information that can be encoded in the RFID. The construction is based on \"mature technology\" so the limiting factors for widespread use of the infrastructure technology is simply economical feasibility and adoption. With demonstrated success in large corporations and college campuses the technology could be come widespread and worked into building code standards.\r\n\r\nIn order for Android to take advantage and drive this potentially navigation changing technology, Android would either need to implement an internal RFID reader or provide some simple cost-effective RFID reader attachment. The limiting factor is hardware. The implications of a Blind indoor navigation tool would be extremely valuable for users to navigate complicated indoor areas with little or no GPS capabilities such as airports, public transportation terminals, malls, and stadiums.\r\n\r\n### Indoor Navigation using RFID Tags\r\n\r\nA useful extension to the Phone Wand would be transferring orientation and vibration feedback to a walking cane via Bluetooth. A cane is the most natural and useful tool to aid blind people in everyday walking. This extension would require embedding hardware for compass sensors and vibration directly into a walking cane. There already exists bulky and expensive electronic aided canes on the market that use sonar to detect solid obstacles and puddles within a \"zone of safety\". But user feedback indicates these tend to be too expensive or non-functional for practical use. With the hardware problem solved, a CaneNavigator Android application would allow users to simply enter all route information into the cell phone, then the Bluetooth would activate, and then the cell phone could be placed in the users pocket. All information sensing would then be embedded in the cane and then transferred to the cell phone via Bluetooth. Information would then be processed and vibration signals would transfer from the phone to the cane via Bluetooth.\r\n\r\n\r\n[main-url]: http://code.google.com/p/mobileaccessibility/source/browse/#svn%2Ftrunk%2FPhoneWand"},{"id":"uw-graphics","titleShort":"OpenGL\nanimations","titleLong":"OpenGL models and animations","emphasis":0.8,"color":"#186303","urls":{},"jobTitle":"","location":"Seattle, WA","date":"2/2011","categories":["School","UW","OpenGL","Animation","3D","C++","Teamwork"],"images":[{"fileName":"screenshot1.png","description":"A screenshot from the program showing a frog playing a ukulele. This view includes textures."},{"fileName":"screenshot2.png","description":"A screenshot from the program showing a frog playing a ukulele. This view includes shading."},{"fileName":"screenshot3.png","description":"A close-up screenshot from the program showing a frog playing a ukulele. This view includes textures."}],"videos":[{"videoHost":"youtube","id":"r8-zo-j-7PU","description":"A video showing an animated frog playing a ukulele."}],"content":"As part of a grahics course at the University of Washington, Levi co-developed a model and animation of a frog playing a ukulele.\r\n\r\n_OpenGL with C++_"},{"id":"rainydayukes.com","titleShort":"Business\nwebsite:\nUkuleles","titleLong":"A hand-made ukulele business","emphasis":0.6,"color":"#47dac7","urls":{"homepage":"https://web.archive.org/web/20161020110300/http://www.rainydayukes.com/"},"jobTitle":"","location":"","date":"5/2010","categories":["Side-Project","Web","Website","Frontend","jQuery","PHP","Solo-Work"],"images":[{"fileName":"screenshot1.png","description":"The products page."},{"fileName":"screenshot4.png","description":"The home page features a carousel of delightful images."},{"fileName":"screenshot5.png","description":"The home page features a carousel of delightful images."},{"fileName":"screenshot6.png","description":"The home page features a carousel of delightful images."},{"fileName":"screenshot7.png","description":"The home page features a carousel of delightful images."},{"fileName":"screenshot2.png","description":"The listen page includes videos with songs recorded on Rainy Day Ukes ukuleles. These videos feature the supremely talented baritone Drew Dresdner."},{"fileName":"screenshot3.png","description":"A handmade ukulele company isn't complete without its own signature cocktail!"}],"videos":[],"content":"_[Rainy Day Ukes][main-url] was a web-based handmade ukulele business._\r\n\r\nLevi built this website for his friend's business. It was originally hosted at rainydayukes.com, but has since been taken down. However, you can still check out the site on the [WayBack Machine][main-url]. \r\n\r\nAll designs were done by the supremely talented visual designer [Ryan Maher][ryan-url].\r\n\r\n\r\n[main-url]: https://web.archive.org/web/20161020110300/http://www.rainydayukes.com/\r\n[ryan-url]: http://linkedin.com/in/ryanmichaelmaher"}]}