Chromacat

Inspiration

As students, googling things is a common practice, and in this virtual school environment, students are more often in front of a screen than not. However, looking at webpage after webpage can get tiring and boring. We wanted to make something that would entertain students as they embarked on their many webpage browsing ventures and thus Chromacat was born.

What it does

Chromacat is a chrome extension that walks cats across the user's screen. Furthermore, based on one's facial expression, more or less cats would appear across the screen. We have four basic modes (neutral, questioning, happy, and sad) that add or subtract different amounts of cats.

How we built it

We used the JavaScript processing libraries p5.js and ml5.js to walk the cats across the screen and register facial expressions. We used Google's Teachable Machine to have our extension recognize different expressions, and associated those expressions with either having only one cat walk across, clearing all the cats from the screen, filling the screen with cars, or removing cats.

Challenges we ran into

The primary challenge we faced was translating our code into an actually usable chrome extension, as neither of us were particularly familiar with JavaScript. In particular, there were issues in trying to use the ml5.js library. This lack of familiarity also led to some challenges while coding, but we were able to resolve those as we continued working on it.

Accomplishments that we're proud of

This was the first time either of us ever made a Chrome extension!

What we learned

Not only did we further our (minimal) JavaScript skills, but we ended up with a fun final product out of it. Also, the process of making a Chrome extension is a transferrable skill, and we will be able to follow this process in the future to make other extensions as well.

What's next for Chromacat

In the future, we hope to better train the model and recognize more facial expressions. We also hope to customize the cat colors, add other animals, and have said animals walk across the screen at different angles.

Built With

• html
• javascript
• json
• ml5.js
• p5.js