Swatter

Added some wallpaper to the background and an instructional graphic that illustrates how to swipe. A pre-loader now caches all the image and sound assets before displaying the fly. To finish it off, I added an info button to explain the app, and a GreenZeta badge at the bottom.

Lots of improvements to the artwork. The new hairy appearance is added to the fly head. When training, the thought bubble is replaced with a blackboard. It now shows which directional data has been added to the training set. I also added a mortarboard to the head, just for fun.

Ported over the WebAudio service I created for Hypertension to run as a stand-alone class. Sound effects courtesy of freesound.org. Couldn’t find an appropriate swatter sound so I created one by combining a woosh and a smack sound.

A secondary sprite sheet for MLFly. This one adds the gruesome swatted state of the fly.

Added the fly intro sprite sheet and animated it using a CSS3 animation step function. Every time a fly is swatted it is trained and the animation is triggered to show a new generation of fly arriving.

Setting up the sprite sheet for the fly intro animation. The path was drawn in Illustrator and individual fly frames were generated with a step blend equal to the number of frames. The images were brought into Photoshop where a motion blur was added.

Did some tweaking of the fly proportions, fattened up the body and re-positioned the legs. Applied a roughen filter to the edges to make the body took hairy.

Created the swatter sprite-sheet using the original vector art and some blur/emboss effects in PhotoShop. The animation is done with CSS3 using a step function. The swatter element is added and then removed with each swipe to reliably reset the animation each time.

Drew the fly swatter in illustrator. Duplicated it a few times and added some warping effects to create the base for the spritesheet animation. The first two frames are onion skinned to show them relative to one another.

Added some placeholder graphics to better illustrate what the final product will look like. The fly head incorporates a sprite sheet that will light up a section of the eye yellow (yeller) when it senses motion. The neural network output is placed inside a thought balloon to indicate what MLFly is thinking.