ML5 Image Recognition in p5.js

My name is Frank and I am now a nearly graduated college student. This below is a draft of an article lost to the mists of time, but I thought it would be fun to publish now. The original project was completed in 2021 during my Junior year of college. Enjoy!

This project will recognize an apple or phone when held up to your webcam. It utilizes ML5’s image identification code, as well as local storage to make it happen. It took a lot of Dan Schiffman tutorials, random forum threads, and a lot of time, this project was made. The image identification turned out to be something that was way too strenuous on one browser window, so I went searching for a solution.

As I was working on a solution to my browser freezing and crashing, I was able to successfully create my original concept, which was an interactive poster. In this case, the user holds up an apple and is able to move the text around the grid of text. This was something that took significantly less time than I had anticipated, so I ended up developing the idea further.

This was where I came across using local storage in order to allow two Chrome tabs to speak to one another. I then assigned the specific objects for the identifier to look for certain values, apple is one for instance. Then with the addition of a single line of code the two browser tabs are able to communicate and stop the browser from freezing.

A great explanation of using Local Storage: https://blog.bitsrc.io/4-ways-to-communicate-across-browser-tabs-in-realtime-e4f5f6cbedca

The physical dots were a bit more challenging to generate, but the base component is based on Dan Schiffman’s tutorial linked below. In his tutorial, he generates a field of dots that then flow into the word train. I then took this, and integrated it with the image identification from the other tab, and with a great deal of trial and error, it finally worked.

Here is a link to the demo site where you can try it for yourself. https://knarfster2.github.io/P5-Image-Recogition/Form_Words_Final/

Overall, it was a great learning experience, and introduction into the world of JavaScript.

Thank you for reading!