Jekyll2019-11-06T14:04:07+00:00https://richard-young.github.io/MSIS-Project/feed.xmlMSIS ProjectWeb-based journal dedicated to the documentation and reflections of Richard Young's UA Little Rock MSIS Project
Richard-YoungFinal Recap - Project Chromaweaver2019-11-01T00:00:00+00:002019-11-01T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/11/01/Final-Recap-Project-Chromaweaver<p>I am thrilled to say that I am ending this week and my final blog post with a functional Django application that I can demo in my final project presentation, which will be next Friday (November 8, 2019). At this point, I have satisfied the agreed-upon project deliverables that I outlined in my <a href="https://richard-young.github.io/MSIS-Project/msis/project/2019/08/16/Project-Proposal-Accepted.html">Project Proposal</a> post, listed below:</p>
<ul>
<li>Python code development for automated moviebarcode generation that can be performed on Youtube videos</li>
<li>A standalone Django app that generates moviebarcodes and can be integrated into the YoutubeTracker application</li>
</ul>
<p>This week I went full-cycle regarding the knowledge I have gained at UA Little Rock. I was able to leverage many of the skills that I have accumulated during my time as a researcher and student to produce a Django prototype application for generating moviebarcodes. I wore many hats this week as I designed high-fidelity mockups and worked with both front-end and back-end development. By no means is this application a finalized product, but since my time at UA Little Rock has exposed me to many different pockets of knowledge, I am confident I can pull from this resource pool moving forward in order to continue to improve this project.</p>
<p>In order to wrap up this prototype, I worked on the following big items this week:</p>
<ul>
<li>Designed additional high-fidelity mockups</li>
<li>Pulled relevant content from test applications into a new, cleaner application</li>
<li>Combined different Django pages to provide a more streamlined user experience</li>
<li>Cleaned up my Django project’s code structure</li>
<li>Developed HTML5 and CSS elements to fit high-fidelity mockups</li>
</ul>
<p>Back in the following blog post, <a href="https://richard-young.github.io/MSIS-Project/msis/project/2019/08/30/Resource-Gathering-Practical-Python-and-OpenCV-Part-Two.html">Resource Gathering - Practical Python and OpenCV - Part 2</a>, I teased that the image of a spider used in the examples was hinting at the application’s title, but I said I wouldn’t be releasing this title until later. Since this is my final blog post, I think it’s safe to say that “later” has arrived. I am titling this project Chromaweaver. My inspiration behind this name was imagining a spider weaving together the colors of the moviebarcodes. Often, generated moviebarcodes result in images that are made up of a wide array of colored bars, or “strands”, that are aesthetically pleasing, and I think relating this image processing technique to the intricate process of a spider weaving its web is a suitable analogy.</p>
<p>To demonstrate Chromaweaver’s current state, I have created the following GIFs to provide animated views of my final deliverable in action:</p>
<p>This first GIF presents Chromaweaver’s main objective: to use Django to generate a moviebarcode from a Youtube video. As seen below, I provide a Youtube video ID to begin the generation process, and if the generation is successful, the user will be redirected to a detailed page that shows both the moviebarcode and the video it pertains to. Since this moviebarcode and its relevant information is stored in Django, when the user goes back to the homepage, the new moviebarcode is included in the list of other generated moviebarcodes.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/chromaweaver_generating_barcode.gif" alt="Screenshot of generating moviebarcode with Chromaweaver" />
<figcaption>(Screenshot of generating moviebarcode with Chromaweaver)</figcaption>
</figure>
<p>This second GIF demonstrates the process of exploring a list of moviebarcodes. A user is able to scroll through the moviebarcodes and select a video by clicking its title link.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/chromaweaver_index_exploring.gif" alt="Screenshot of exploring Chromaweaver home page" />
<figcaption>(Screenshot of exploring Chromaweaver home page)</figcaption>
</figure>
<p>In this final GIF, I show the detailed Youtube video page in its current state. At this time, the user has the ability to watch the video and either use the Youtube video controls or the moviebarcode image above to select a point of time in the video. I think this feature is an interesting user experience component because a user can quickly look at a moviebarcode and from color alone can select areas of interest. The current time of the video being played is indicated above the moviebarcode by a moving bar. In this case, however, because there are so many frames in the video shown below, the size of the bar is very small. I have an idea for how to improve the visibility of this tracker for longer videos, but for now I feel this display is sufficient for demonstrating this application’s functionality.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/chromaweaver_detail_exploring.gif" alt="Screenshot of exploring Chromaweaver detail page" />
<figcaption>(Screenshot of exploring Chromaweaver detail page)</figcaption>
</figure>
<h2 id="going-forward">Going Forward</h2>
<p>In order for Chromaweaver to be a finalized product, it will need a laundry list of improvements. This project so far is the result of my own efforts, but there is only so much I can do by myself, so I am especially looking forward to bringing in other members of <a href="http://cosmos.ualr.edu/" target="_blank">COSMOS</a> to begin collaborations regarding Chromaweaver.</p>
<p>I am also excited about exploring additional applications in the field of Image Processing, including histogram analysis to return related videos based on their moviebarcodes, a subject I discussed in my previous <a href="https://richard-young.github.io/MSIS-Project/msis/project/2019/09/13/Histogram-Analysis.html">Histogram Analysis</a> post.</p>
<h2 id="resources">Resources</h2>
<p>This project’s accomplishments would not have been possible if it were not for the dedicated content producers that take very complicated topics and break them down into bite-sized pieces, allowing me to digest them in such a short span of time. I want to extend special thanks to the publishers of the following content:</p>
<p>Image Processing Development:</p>
<ul>
<li>Adrian Rosebrock and Dave Hoffman for support and various articles mentioned at <a href="https://www.pyimagesearch.com" target="_blank">pyimagesearch.com</a></li>
</ul>
<p>Django Development:</p>
<ul>
<li>Pretty Printed for <a href="https://www.youtube.com/watch?v=QVX-etwgvJ8&list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf" target="_blank">Django Tutorials</a></li>
<li>The Dumbfounds for <a href="https://www.youtube.com/watch?v=en4fg1F1gRs&list=PLbpAWbHbi5rNUuLTzreCl1g212G7qgzpR" target="_blank">Django 2 Tutorial: Build A Budget Application</a></li>
<li>Vitor Freitas for <a href="https://www.youtube.com/watch?v=Zx09vcYq1oc&list=PLLxk3TkuAYnpm24Ma1XenNeq1oxxRcYFT" target="_blank">Model Forms - Django File Upload Tutorial</a></li>
<li>Max Goodridge for <a href="https://www.youtube.com/watch?v=qwE9TFNub84&t" target="_blank">How to Save Data Input through Form Using a Django Model Form (Django Tutorial)</a></li>
</ul>
<p>HTML/CSS Development:</p>
<ul>
<li>Danny Markov for <a href="https://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript" target="_blank">How to Control YouTube’s Video Player with JavaScript</a></li>
<li>Daniel Stern for <a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/" target="_blank">Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
<li>Skillthrive for <a href="https://www.youtube.com/watch?v=PwWHL3RyQgk&t" target="_blank">Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox</a></li>
<li>W3schools for <a href="https://www.w3schools.com/howto/howto_js_collapsible.asp" target="_blank">How TO - Collapse</a></li>
</ul>Richard YoungProject Summary? Where to begin...Django Application Development - Part 32019-10-25T00:00:00+00:002019-10-25T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/10/25/Django-Application-Development-Part-Three<p>I started this week optimistically, feeling I had plenty of time to finish development of my moviebarcode application. However, I have experienced difficulties when storing the dynamically generated JSON and PNG files into the Django model. The problem stems from a combination of Django’s reluctance to store local files and issues with where in the application Django processes the code to generate the files.</p>
<p>I have been utilizing Vitor Freita’s Youtube playlist, <a href="https://www.youtube.com/watch?v=Zx09vcYq1oc&list=PLLxk3TkuAYnpm24Ma1XenNeq1oxxRcYFT" target="_blank">Django 2.1 File Upload Tutorial</a>, which is a great introduction to storing inputed files to a Django form field and then transferring those files into a Django model field. However, since I am generating the files and not inputting them into a form field, the model is returning incorrect paths. I have tried many troubleshooting methods to combat this problem, but so far I haven’t had any success.</p>
<p>I am realizing that Django’s initial database is a bit more primitive than what I need, since the data I need to store is more complicated in nature. However, I have some ideas for this coming week to work around this problem.</p>
<h2 id="going-forward">Going Forward</h2>
<p>Next week, I will be submitting my final blog post for my MSIS project documentation. My project committee will then officially begin evaluating my progress throughout the course of this semester. Hopefully by next week I will have solved the problems discussed above and will be able to deliver a rough prototype.</p>
<h2 id="post-update-october-27-2019">Post Update (October 27, 2019)</h2>
<p>It’s the weekend, and I wanted to provide an update that I have solved the problems discussed above. I can now successfully provide a Youtube Id to a Django form, Django will generate both a PNG and JSON file, and this generated data is stored correctly to my local Django database.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/barcode_generation_screenshot.gif" alt="Screenshot of generating moviebarcode data then and retrieving it with Django" />
<figcaption>(Screenshot of generating moviebarcode data then and retrieving it with Django)</figcaption>
</figure>Richard YoungLots to do, so little time...Django Application Development - Part 22019-10-18T00:00:00+00:002019-10-18T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/10/18/Django-Application-Development-Part-Two<p>It has been a fast, productive week resulting in the following developments:</p>
<ul>
<li>Django index template high-fidelity mockup</li>
<li>Django functionality for
<ul>
<li>searching the Youtube Data API</li>
<li>storing and displaying Youtube Data</li>
<li>storing JSON and PNG files from dynamic barcode generation (In progress)</li>
</ul>
</li>
</ul>
<h2 id="mockup-design">Mockup Design</h2>
<p>Creating these mockups was a fun challenge because this was my first time designing a darktheme mockup. Having a darktheme will make this project’s design more consistent with our COSMOS application <a href="http://cosmos.ualr.edu/tools/youtubetracker/" target="_blank">YoutubeTracker</a>.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/mockup_screenshot.jpg" alt="Screenshot of mockup design process using Affinity Designer" />
<figcaption>(Screenshot of mockup design process using Affinity Designer)</figcaption>
</figure>
<p>Using a darktheme will also provide balance for the barcodes themselves as they tend to contain a wide variation of color that may clash with the application’s interface. If you are interested in how to begin designing a dark theme, I highly recommend starting with the <a href="https://material.io/design/color/dark-theme.html" target="_blank">Google Material Design documentation</a>.</p>
<h2 id="django-development">Django Development</h2>
<p>After this week, I am feeling much more confident in my existing knowledge or Django application development. I am currently able to use Django to search Youtube, store data, and dynamically display this information back to the user.</p>
<p>In the screenshot below, I am using Django forms and the <a href="https://developers.google.com/youtube/v3" target="_blank">Youtube Data API</a> to return public Youtube data based on a search query. I searched “animated spellbook,” which returned the first nine Yoube video that meets this search result. I intend to use this feature to allow users to quickly search for videos that exist publically on Youtube, verify it is indeed the video they want, and then generate a moviebarcode of this video.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/form_search_screenshot.jpg" alt="searching the Youtube Data API" />
<figcaption>(Screenshot of Django functionality for searching the Youtube Data API)</figcaption>
</figure>
<p>In this second screenshot below I demonstrate that if I have a Youtube ID,I can process that ID using the <a href="https://pythonhosted.org/pafy/" target="_blank">pafy Python library</a> and then display this data back to the user. Using a Youtube ID, pafy can return data associated with a video to the user. For example, below I have used three Youtube IDs and asked pafy to return titles of these videos, which are displayed under their respective IDs. Using pafy with Django, Youtube data can be captured by the pafy python library and then stored into a Django database. Once the data is stored into my local Django database, it is then dynamically displayed in the list items and sorted by title name, as shown below.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/form_generation_screenshot.jpg" alt="storing and displaying Youtube Data" />
<figcaption>(Screenshot of Django functionality for storing and displaying Youtube Data)</figcaption>
</figure>
<h2 id="going-forward">Going forward</h2>
<p>Next week, I will continue working on the Django Application, and I aim to have Django dynamically generate, store, and query moviebarcodes. If time allows, I will begin integrating more of the histogram analysis methods previously researched.</p>Richard YoungLots of moving pieces...Django Application Development - Part 12019-10-11T00:00:00+00:002019-10-11T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/10/11/Django-Application-Development-Part-One<p>This past week I began the Django application development process. This is my first experience developing with Django, and I am excited by what I have learned about Django in just a week and the applications of this knowledge moving forward.</p>
<p>Django provides a framework for web applications to use Python and interact with a database, and it is relatively quick and simple to create web prototypes using this framework. Additionally, the <a href="https://docs.djangoproject.com/en/2.2/" target="_blank">official Django Project documentation</a> is well written and easy to follow.</p>
<p>If you are wanting to get started with Django and are looking for resources, here are a few that I used this week and found to be very helpful:</p>
<ul>
<li><a href="https://realpython.com/the-model-view-controller-mvc-paradigm-summarized-with-legos/" target="_blank">Model-View-Controller (MVC) Explained – With Legos</a></li>
<li><a href="https://docs.djangoproject.com/en/2.2/intro/tutorial01/" target="_blank">Writing your first Django app</a></li>
<li><a href="https://www.youtube.com/watch?v=n-FTlQ7Djqc&list=PL4cUxeGkcC9ib4HsrXEYpQnTOTZE1x0uc" target="_blank">Django Tutorial (Create a Blog)</a> (Youtube Playlist)</li>
</ul>
<p>After using the above resources, I now have an understanding of how to store and interact with data using Django. I have designed and begun to implement a strategy for generating and storing moviebarcode data from the project’s existing code.</p>
<h2 id="going-forward">Going forward</h2>
<p>Next week, I will continue working on the Django Application, and I aim to have the application’s main functionality developed.</p>Richard YoungMy first experience developing with Django...Less than a month to go2019-10-04T00:00:00+00:002019-10-04T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/10/04/Less-Than-A-Month-To-Go<p>I am pleased to say that this week I have completed a good chunk of my project with the following:</p>
<ul>
<li>Optimized previous semester’s Python code (completing the first project deliverable)</li>
<li>Finished the OpenCV <a href="https://www.pyimagesearch.com/2014/12/01/complete-guide-building-image-search-engine-python-opencv/" target="_blank">image search engine</a> tutorial</li>
<li>Created low-fidelity mockups for the second project deliverable</li>
<li>Diving deeper into Django development</li>
</ul>
<p>This week, after continuing to encounter the same problems faced last week with Recep’s code, I decided to abandon this frustrating process and go ahead and take my project code from last semester and develop it on my own as originally intentioned.</p>
<p>Leveraging the knowledge I have gained from my research this semester, it was surprisingly painless for me to accomplish what I had originally intended. The Python code now takes a list of URLs for Youtube IDs, streams the video (as opposed to downloading it locally), and then generates a JSON file and a PNG file of the video’s moviebarcode. Now that I can complete this process with a list, I can start generating more barcodes for image processing.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/generator_script_screenshot.jpg" alt="Screenshot of an moviebarcode being generated" />
<figcaption>(Screenshot of the barcode generation on <a href="https://www.youtube.com/watch?v=nDLDCyUqBFI" target="blank">Zee Bashew's (animated) Sending spell dnd5e</a>)</figcaption>
</figure>
<h2 id="deliverable-update">Deliverable Update</h2>
<p>Last week, I mentioned a change in my project syllabus. This is due to Dr. Agarwal’s encouragement for me to explore the utility and applications of moviebarcodes, as opposed to simply the generation process. The reason I am mentioning this now is because it will affect the end-goal of my second project deliverable (“A standalone Django app that generates moviebarcodes and can be integrated into the YoutubeTracker application”).</p>
<p>I am really excited for this change. Now I can prioritize using the Django application to provide video content analysis by using moviebarcodes. This update will tie in nicely with the image processing tutorials I have covered so far.</p>
<h2 id="going-forward">Going forward</h2>
<p>Next week I will prioritize development of my Django application. My goal is to make the Python code I have now compatible with my Django application in order to accomplish my second project deliverable.</p>Richard Young(Deliverable Updates) One step closer to wrapping up this project...Traveling and Troubleshooting2019-09-27T00:00:00+00:002019-09-27T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/09/27/Traveling-And-Troubleshooting<p>Although much of my time these past couple weeks has been spent moving to Spain, finding an apartment, and acclimating to the culture here, I have still managed to put a considerable amount of time into my project. However, I am frustrated that my output for this week is not reflective of my efforts.</p>
<p>This week has been consumed by what should have been a relatively simple task. I have been struggling to get my Ubunutu development environment to be compatible so that I can collaborate with a fellow COSMOS member, Recep, on the development of the moviebarcode generator and application. Even though the existing code for moviebarcodes developed by Recep has been tested in multiple environments, I keep receiving errors with OpenCV when compiling his scripts. I have spent an embarrassing amount of hours trying to troubleshoot this issue at every angle I can find, but so far nothing has worked. I am currently in contact with the author of the PyImageSearch tutorials I am following, so hopefully with his help this issue will be resolved this week.</p>
<p>What I have learned this week is that the process of installing OpenCV can be very fickle. For some, it configures no ploblem. For me and for many others, as seen in the following <a href="https://www.pyimagesearch.com/2018/05/28/ubuntu-18-04-how-to-install-opencv/" target="_blank">post</a> , this process can feel a little like the following GIF:</p>
<figure>
<img src="https://media.giphy.com/media/sf9usCEvitius/giphy-downsized.gif" alt="The Road To El Dorado Gold GIF" />
<figcaption>(<a href="https://giphy.com/gifs/sf9usCEvitius" target="blank">Source via GIPHY</a>)</figcaption>
</figure>
<p>Going forward from such a frustrating week, it can be difficult to stay positive, especially considering that next week will mark just one month from when I have to provide my final project documentation. However, thankfully with the efforts of my collaborator, Recep, this project is actually ahead of schedule. Next week I plan to post an updated syllabus for this project with revised deliverables.</p>Richard YoungSometimes a simple task can take a lot of time...Histogram Analysis2019-09-13T00:00:00+00:002019-09-13T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/09/13/Histogram-Analysis<p>Once again, using PyImageSearch articles as my guide, this week I worked on the following:</p>
<ul>
<li>I generated histograms from the moviebarcodes I created last semester</li>
<li>I compared these generated histograms for <a href="https://www.pyimagesearch.com/2014/07/14/3-ways-compare-histograms-using-opencv-python/" target="_blank">similarities</a></li>
<li>I began development on an <a href="https://www.pyimagesearch.com/2014/12/01/complete-guide-building-image-search-engine-python-opencv/" target="_blank">image search engine</a> that returns similar moviebarcodes</li>
</ul>
<h2 id="comparing-histograms">Comparing Histograms</h2>
<p>I am using histograms for this project simply as a comparison method for moviebarcodes. The histograms act as a kind of “middleman” for the comparison process, meaning I can determine the similarity of a list of moviebarcodes by determining the similarity of their histograms. Histograms are a great comparison tool for what I am working on because they compare color so well. Thankfully the moviebarcode technique I am using is purely based on color, with no texture or objects, so the moviebarcodes have been fairly straightforward to analyze.</p>
<p>This week I compared the moviebarcodes I generated last semester. I used four moviebarcodes of music videos from one of my favorite music artists to see if I could detect similarities between them. I also used a moviebarcode from a <a href="https://www.youtube.com/watch?v=lc0UehYemQA" target="_blank">Jurassic Park trailer</a> as somewhat of a “control” to see how it compared to the four moviebarcodes from the music artist. This is a rough comparison since my test group of movie barcodes is so small, but now I have several histogram comparison techniques that I can use for further optimization. Once I test these techniques and determine the best one to use for my project, I will be able to apply this method to a large list of movie barcodes.</p>
<p>For instance, the image below is the output of when the <a href="https://docs.opencv.org/2.4/doc/tutorials/imgproc/histograms/histogram_comparison/histogram_comparison.html" target="_blank">OpenCV correlation comparison</a> is applied to the moviebarcodes:</p>
<figure>
<img src="/MSIS-Project/assets/imgs/results__correlation.jpg" alt="Moviebarcode Correlation Result Output" />
<figcaption>(Moviebarcode Correlation Result Output)</figcaption>
</figure>
<p>The results above show the first moviebarcode (“Ok Go - Needing_Getting - Offical Video.png”) being used as the queried (original) image. This is why its value is 1.00. A value is then given to all the other images based on how correlated they are to the original image. A higher value means the image is more similar to the original image. The results are then sorted based on how related they are to the original image. In this example, the Jurassic Park trailer has the most difference in comparrison to the four videos from the same music artist.</p>
<h2 id="going-forward">Going Forward</h2>
<p>Next week, my wife and I will be flying out to begin our year-long adventure in Spain. With this said, there is a very slim possibility that I will have time to publish a post next week. However, I will be working toward wrapping up my first project deliverable of my MSIS project (Optimize moviebarcode generation development), which I aim to complete by September 22nd.</p>Richard YoungThis week I compared generated histograms for similarities...Resource Gathering - Practical Python and OpenCV - Part 32019-09-06T00:00:00+00:002019-09-06T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/09/06/Resource-Gathering-Practical-Python-and-OpenCV-Part-Three<p>This week I finished reading <em>Practical Python and OpenCV, 4th Edition</em>.These final chapters (Chapters 7-11) introduced me to the following image processing techniques:</p>
<ul>
<li>Histogram Generation</li>
<li>Blurring</li>
<li>Thresholdings</li>
<li>Gradients and Edge Detection</li>
<li>Contours</li>
</ul>
<p>Although these last chapters were focused primarily on object detection, a skill I likely won’t need for my MSIS project, I now feel like I have a solid grasp on how to approach Image Processing with OpenCV and Python. I am very glad the author introduced generating histograms from images because I think this technique will have useful applications to my project.</p>
<h2 id="project-deliverable-update">Project Deliverable Update</h2>
<p>Also, this week I started working with another member of COSMOS, Recep Erol, regarding my project. Recep has stepped in to help with the process of automating moviebarcode generation from Youtube videos. This collaboration will allow me to place my focus on developing techniques to use moviebarcodes for video analysis and categorization as well as developing the Django application.</p>
<h2 id="going-forward">Going Forward</h2>
<p>Next week I will work on applying the knowledge I have gained from the book to moviebarcodes I have previously generated. I will begin by exploring what kinds of analyses I can produce using the histogram processing techniques I learned this week.</p>
<h2 id="references">References</h2>
<p>Rosebrock, Adrian. <em>Practical Python and OpenCV, 4th Edition</em>. 4th version, 4th ed., PyImageSearch.com, 2019, <em>PyImageSearch</em>, www.pyimagesearch.com/practical-python-opencv/.</p>Richard YoungThis week I finished reading Practical Python and OpenCV, 4th Edition...Resource Gathering - Practical Python and OpenCV - Part 22019-08-30T00:00:00+00:002019-08-30T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/08/30/Resource-Gathering-Practical-Python-and-OpenCV-Part-Two<p>This was a busy week. I experienced a steep learning curve this week as I digested Chapters 1 - 6 of <em>Practical Python and OpenCV, 4th Edition</em>. Since the author himself indicates these chapters provide the foundational skill set necessary for continuing his methodology for image processing, I made it my mission to complete this segment before writing this post.</p>
<p>To visually demonstrate a few techniques I learned throughout the week, I will be using this image of a spider, shown below. I chose an image of a spider as a teaser for my intended title of the completed moviebarcode generator. I’m not ready to release the title yet, but keep following this blog and you will find out.</p>
<figure>
<img src="/MSIS-Project/assets/imgs/spider-original.jpg" alt="Friendly Spider Image" />
<figcaption>(Photo by <a href="https://unsplash.com/@ekamelev?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Егор Камелев</a> on <a href="https://unsplash.com/search/photos/spider?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Unsplash</a>)</figcaption>
</figure>
<p><strong>Disclaimer</strong> Respecting the wishes of the author, no code snippets will be posted. However, I will be sharing notable topics and reflections of what I have encountered so far.</p>
<p>After this week, I see images in a very granular manner. I have known that when screens display images, they do so by the correct combination of pixels being activated. However, I never would have guessed that I would be able to programatically effect these pixels at such a granular level. My eyes have been opened thanks to the powerful duo I will introduce below, NumPy and OpenCV.</p>
<h2 id="numpy">NumPy</h2>
<p>NumPy is a numerical processing library that can be used to convert an image into a usable matrix that can then be manipulated. This NumPy matrix creates a coordinate-plane of pixels that can then be navigated and edited.</p>
<p>Some of the notable techniques the book demonstrates is that NumPy can be quickly used to retrieve image pixel values (such as RGB values), crop images areas of interest, and perform arithmetic functions on the images. For example, the image below has been brightened by a value of 50 using simple addition to affect every pixel value of the original image.</p>
<p><img src="/MSIS-Project/assets/imgs/spider-brightened.jpg" alt="Spider Image Brightened" /></p>
<h2 id="opencv">OpenCV</h2>
<p>OpenCV leverages NumPy and then provides a toolset of image processing functions. OpenCV is commonly used for real-time image processing, object detection, and machine learning.</p>
<p>I learned that OpenCV can be used to:</p>
<ul>
<li>Convert image file types</li>
<li>Draw visual indicators and shapes</li>
<li>Resize images and maintain correct aspect ratio</li>
<li>Create image mask clippings</li>
<li>Perform image transformations (such as translations, rotations, and scaling)</li>
<li>Split and merge image color channels</li>
<li>Convert images to new color spaces</li>
</ul>
<p>I will now quickly demonstrate a couple examples of what I have practiced using OpenCV.</p>
<p>The image below features a green box that I drew using OpenCV. Although I did this manually using NumPy’s coordinate plane, in future chapters I will learn how to draw these boxes programmatically as a way to indicate which region of the image the computer is processing.</p>
<p><img src="/MSIS-Project/assets/imgs/spider-green-box.jpg" alt="Spider Image with Green Rectangle on Face" /></p>
<p>I was also able to use OpenCV to create a masking that separated individual RGB color values. The images below show what each RGB color value looks like without the other two channels.</p>
<p><img src="/MSIS-Project/assets/imgs/spider-red.jpg" alt="Spider Image only show Red Channel" />
<img src="/MSIS-Project/assets/imgs/spider-green.jpg" alt="Spider Image only show Green Channel" />
<img src="/MSIS-Project/assets/imgs/spider-blue.jpg" alt="Spider Image only show Blue Channel" /></p>
<p>The last notable takeaway I want to mention is how easy it is to use OpenCV to effect different color spaces. Although all of the examples have been geared towards the RGB color space, the author has provided content to show how easy it is to represent images in other color spaces, such as HSL and CIELAB. For example, the image below shows what the picture looks like in the CIELAB color space (a color space that attempts to represent how humans interpret color).</p>
<p><img src="/MSIS-Project/assets/imgs/spider-lab.jpg" alt="Spider Image represented in CIELAB color space" /></p>
<h2 id="going-forward">Going Forward</h2>
<p>I am now over halfway done with the book, and the next stage will be to begin real-time analyses of the images, starting with creating histograms using the images’ color ranges. By next week I would like to try to finish the book and begin implementing this research into my MSIS project.</p>
<h2 id="references">References</h2>
<p>Rosebrock, Adrian. <em>Practical Python and OpenCV, 4th Edition</em>. 4th version, 4th ed., PyImageSearch.com, 2019, <em>PyImageSearch</em>, www.pyimagesearch.com/practical-python-opencv/.</p>Richard YoungI experienced a steep learning curve this week as I digested Chapters 1 - 6...Resource Gathering - Practical Python and OpenCV - Part 12019-08-23T00:00:00+00:002019-08-23T00:00:00+00:00https://richard-young.github.io/MSIS-Project/msis/project/2019/08/23/Resource-Gathering-Practical-Python-and-OpenCV-Part-One<p>This week I began the first proposed stage of my project timeline: “optimize moviebarcode generation development.” Although I created a proof of concept version of this project last semester for my Social Computing class, I recognize that I have knowledge gaps concerning the building blocks of this project, Python and Image Processing. This is why I allotted time in my project timeline to learn these foundational skills.</p>
<p>In order to address the knowledge gap that I am currently experiencing, I am taking a more formal approach and using a book to guide me in this process. I personally learn best with hands-on experience and examples, and I found a book that provides this type of learning experience, <a href="https://www.pyimagesearch.com/practical-python-opencv/" target="_blank">“Practical Python and OpenCV, 4th Edition”</a> by Dr. Adrian Rosebrock. This is the same author who produces content for <a href="https://PyImageSearch.com" target="_blank">PyImageSearch</a>, the blog I leveraged for usable code for my moviebarcode prototype.</p>
<p>This book is a streamlined and hands-on guide to using OpenCV and Python. In the words of Rosenbrock, “This book is meant to be a hands-on, how-to guide to getting started with computer vision using Python and OpenCV” (Rosebrock, pg. 14). The book also includes supplementary videos, code snippets, and case studies. This is exactly what I need, so I’m off to a good start! Yay!</p>
<p>From reading the first few chapters, I already have a pretty firm grasp of how to begin working with individual pixels of an image. Since frames are just single images of a video, I need to learn how to analyze the pixels that compose these frames. These early chapters have already enriched my knowledge of how a computer displays pixels and how quickly and easily one can utilize Python libraries for image processing.</p>
<h2 id="going-forward">Going Forward</h2>
<p>Next week I will continue to read through Rosenbrock’s work and aim to showcase a demonstration of what I am learning through my study of this book.</p>
<h2 id="references">References</h2>
<p>Rosebrock, Adrian. <em>Practical Python and OpenCV, 4th Edition</em>. 4th version, 4th ed., PyImageSearch.com, 2019, <em>PyImageSearch</em>, www.pyimagesearch.com/practical-python-opencv/.</p>Richard YoungThis week I began the first proposed stage of my project timeline...