Skip to content

Software by Matthew Wilber

  • Portfolio
  • Insights
  • Originals
  • About
  • LinkedIn
  • Twitter
  • Facebook
  • Google +
  • GitHub
  • CodePen
  • Portfolio
  • Insights
  • Originals
  • About
  • LinkedIn
  • Twitter
  • Facebook
  • Google +
  • GitHub
  • CodePen

Swatter

ES6, Synaptic.js / CSS Animation / WebAudio

An experiment in machine learning. Swat the fly by swiping toward it. Each generation of fly is trained with the data from the previous. Eventually the fly will learn to evade death.

Project Demo
Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+

Finishing Touches

2018-05-06

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.

Art Improvements

2018-05-05

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.

Sound

2018-05-04

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.

Fly Macabre

2018-04-30

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

Flyby Animated

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.

Flyby Spritesheet

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.

Revised Fly Art

2018-04-25

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.

Swatter Animation

2018-04-24

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.

Got The Swatter

2018-04-23

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.

Rough Artwork

2018-04-20

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.

Posts navigation

Older posts
Proudly powered by WordPress | Theme: greenzeta by Matthew Wilber.