{"id":10,"date":"2021-10-08T01:53:21","date_gmt":"2021-10-08T01:53:21","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/mccludav\/?p=10"},"modified":"2021-10-08T01:53:22","modified_gmt":"2021-10-08T01:53:22","slug":"favorite-listed-projects-part-i","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/mccludav\/2021\/10\/08\/favorite-listed-projects-part-i\/","title":{"rendered":"Favorite Listed Projects, Part I"},"content":{"rendered":"\n<p>I absolutely enjoy the project that has been assigned to me, which is <strong>Audio Loop Station<\/strong>. \u00a0It was my 2<sup>nd<\/sup> choice, and I hope to discuss this in my next blog.\u00a0 However, the first choice that I gravitated towards was <strong>Doodle Amazing<\/strong>.\u00a0 I posted on the Project Discussion Group on the 3<sup>rd<\/sup> day after opening, that I was interested, and hoped that others would comment and want to form a group.\u00a0 I indicated that I am not an experienced programmer, but <strong>Doodle Amazing<\/strong> was the project I wanted to do.\u00a0 No one connected with me, and that is fine.<\/p>\n\n\n\n<p>Since I do lack experience, I tried to get an early start on how I would implement <strong>Doodle Amazing<\/strong>.\u00a0 The project allows someone to take a picture of a maze, and then based on the picture determine where the walls, open rolling areas, entrance hole, obstacle holes, and exit hole(s) are.\u00a0 I imagined the steps that would need to be taken and how I would complete them.\u00a0 I even started blogging about them to myself to ensure I did not forget anything and have to look up things twice.\u00a0 An edited version follows\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need a Pure <strong>Monochrome<\/strong> Picture<\/h2>\n\n\n\n<p>The first bridge to cross in my mind was to process a potentially <em>dirty<\/em> picture and find the walls.&nbsp; We would need to work with black or white pixels only for the puzzle.&nbsp; No grey or other colors should be allowed.<\/p>\n\n\n\n<p>What if a picture is taken for uploading, but the picture is splotchy, or <em>dirty<\/em>?&nbsp; We would need a way to filter out the slightly off-white pixels and set them to pure white.&nbsp; We also need a way to set the almost-black pixels to pure black.&nbsp; Hence \u2013 we need a totally monochrome image for processing where pixels are 1\u2019s or 0\u2019s.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"346\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-1.png\" alt=\"\" class=\"wp-image-11\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-1.png 441w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-1-300x235.png 300w\" sizes=\"auto, (max-width: 441px) 100vw, 441px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need a JPG \/ PNG to BMP API<\/h2>\n\n\n\n<p>First off, if the uploaded puzzle is a JPG or PNG, we need to convert it to a monochrome BMP.&nbsp; The matrix format (row, column, and color) of a BMP will be very handy.&nbsp; We can open the BMP file and READ in the BMP image into a matrix.&nbsp; Also, the simple binary choice of color, black or white, will simplify our algorithms.&nbsp;<\/p>\n\n\n\n<p>Below is a monochrome image of a 4&#215;2 pixel drawing.&nbsp; Look at the Properties data.&nbsp; This was done in Paint.exe.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"434\" height=\"513\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-2.png\" alt=\"\" class=\"wp-image-12\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-2.png 434w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-2-254x300.png 254w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<p>We can READ the BMP image into a matrix by understanding BMP file format.&nbsp; After <strong><em>Googling BMP file format spec<\/em><\/strong>, I found the following image.&nbsp; It clearly shows that in the header, Bytes 11~14, tell me where the BMP image is found.&nbsp; We would still have to examine a file to determine how they define black and white color pixels.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"866\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-3.png\" alt=\"\" class=\"wp-image-13\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-3.png 417w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-3-144x300.png 144w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Rollable Areas for Ball<\/h2>\n\n\n\n<p>After the walls are determined in a minimal black-and-white grid, the grid should be expanded by about 1.5 * Diameter of a ball in all directions.&nbsp; This will allow a ball to roll around the perimeter of a puzzle as needed.&nbsp; An algorithm that determines the ball\u2019s rollable area can then be determined.&nbsp; The ball must stay within the rollable area regardless of where it goes.&nbsp; This area can be found by providing a clearance equal to the ball\u2019s radius around all walls (shown in black in the picture below).<\/p>\n\n\n\n<p>By generating another matrix from the original maze matrix, the <strong><em>center<\/em><\/strong> of the ball can be forced to remain within the designated area.&nbsp; As it rolls in one direction or another, it must be verified each time that the ball\u2019s center is contained within the rollable area.<\/p>\n\n\n\n<p>The game could also allow for a placement of an exit hole and mark it with a hollow hole.&nbsp; If the ball\u2019s center ever enters the exit hole, the game is won.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"384\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-4.png\" alt=\"\" class=\"wp-image-14\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-4.png 560w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/Blog-2-Pic-4-300x206.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Speed and Trajectory of the Ball<\/h2>\n\n\n\n<p>Newton\u2019s Law of Motion will be applied to the ball.\u00a0 The ball will change direction and speed based on the tilt of the plane and it\u2019s current velocity.\u00a0 Initially, arrow buttons (\u2192, \u2190, \u2193, \u2191) can be used to work out and verify the physics of rolling.\u00a0 All answers must be worked out in pixel units.\u00a0 Equations must be determined.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"291\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/image.png\" alt=\"\" class=\"wp-image-15\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/image.png 446w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4756\/files\/2021\/10\/image-300x196.png 300w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Walls will be Sticky, not Bouncy<\/h2>\n\n\n\n<p>When a ball hits a wall, it will not bounce off of it.&nbsp; The ball will just roll in the direction of tilt along the wall and continue to follow Newton\u2019s Laws to determine speed increases, or reversal of direction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Graphics Engine<\/h2>\n\n\n\n<p>I did not figure out what graphics engine I would use.\u00a0 Maybe a very simple one like Canvas (if that is even possible), or another one with sophisticated libraries.<\/p>\n\n\n\n<p><strong><em>That is about as far as I got in my pre-emptive preparation &#8230;<\/em><\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I absolutely enjoy the project that has been assigned to me, which is Audio Loop Station. \u00a0It was my 2nd choice, and I hope to discuss this in my next blog.\u00a0 However, the first choice that I gravitated towards was Doodle Amazing.\u00a0 I posted on the Project Discussion Group on the 3rd day after opening,&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.oregonstate.edu\/mccludav\/2021\/10\/08\/favorite-listed-projects-part-i\/\">Continue reading <span class=\"screen-reader-text\">Favorite Listed Projects, Part I<\/span><\/a><\/p>\n","protected":false},"author":11630,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/users\/11630"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/posts\/10\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/mccludav\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}