Contents

• Introduction
• The main character fish 🐟
• Spawning the food fishes
• Fish colliders / When do I get to eat??
• Score counting & a start screen
• End game

Live sketch v1: https://editor.p5js.org/angelw2/sketches/pBTjwIpCg

Sketch v2 - updated ML5 library: https://editor.p5js.org/angelw2/sketches/Hk2WsbkCy

Introduction

For this assignment, I couldn’t think of anything to train my own model for, but i really wanted to get into ML5’s handpose. I found this snippet of code that sets up the hand pose model for me.

They even set up a little debug on-click!

First thing I did was un-mirror the camera, because it would be confusing to play the game mirrored.

translate(width,0); // move to far corner
scale(-1.0,1.0);    // flip x-axis backwards
image(video, 0, 0, width/2, height); //video on canvas, position,

The main character fish 🐟

I imagine the index finger and thumb to be a fish’s mouth, so reading into the hands object, I found the finger points I wanted and drew the circles for them.