Creative Code Final Project

Frank Pizzuta's Image Recognition

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. 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. 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. That is the extremely abridged explanation to this project, I hope you enjoy it! Play Test Video

How to Use

  1. Add https:// to the start of this webpage to ensure it will work.
  2. Open this process in another tab and run it, make sure to leave it open.
  3. Hold either an apple or phone (can be a picture) up to your webcam and see the dots move.
  4. Also if you want to have some fun, move your mouse through all the dots and see them flee.
  5. Now recognizing apples, phones, and cups!

Progress

Sources

Dan Schiffman Local Storage Webcam Detection