• Hi there !

    If you ever heard about 'Cozmo', it's a tiny robot that does stuff ( & that seems quite capable seeing what it has embedded for doing so) & that costs $$$ ( 200 if I'm right ).

    A while ago, I've stumbled across an instructable project ( gotta retrieve the link .. ) taking on the 'movement' side of things of a little robot, but that only used images to display few faces inspired from Cozmo's.

    Having some fun with OLED screens & Espruino, It seemed a good idea to try getting those cute expressions onto our favorite uC :)

    I started with 2 rectangles, one for each eye
    As images/sprites: heavy for Espruino's ( but can't fit all of them on esp8266's )
    As objects with 2 eye rectangles with relative coords for a center point, a little heavy since we have many expressions, but maybe doable if storing the expressions in memory & retrieving them later on ?

    I'm currently able to display each of the facial expressions ok, so the next steps are:

    • animating the 'center point' position, to have both eyes move around the screen
    • tweening the transition from a facial expressions rectangle's coords to another ( to get a 'morphing ' eyes shapes animation )
    • getting round corners for those rectangles to achieve a nice smooth look
    • being able to change the one color used for the onscreen shapes ( to still get 'instant' refresh but express 'emotion' through color as well as facial expressions & their roundness )
    • being able to have one or two additional colors relative to the current one ( little brighter & little darker ), to get even smoother using a tiny color gradient ( more advanced gradient & even 'spotlight'/'shades' in a corner of the eye(s) 'd be awesome, but where's not quite there yet I guess .. )

    What we currently have:

    • POC code in html5 canvas & Espruino for animating a pixel's movement across the screen( very basic unoptimized tweening )
    • POC code to display facial expressions in html5 canvas ( allows to keep all of them & get quicker debug for drawings )
    • POC code to 'emulate' needed features of Espruino's Graphics context via html5 canvas ( very early stage, but helps to later copy/paste code to Espruino directly )
    • POC code to draw curves on html5 canvas, not yet tested on Espruino

    If anyone's adventurous/skilled/interested/free-time­d enough, I'll be more than happy to update the project & the ~'lib/api' part & fork advances in the facial expressions part as well :)

    Also, it crossed my mind to have a 'fake' screen ( using html5 canvas running from local server & communicating via serial connection to get updates ), but this 'd prevent being able to use the Espruino IDE at the same time ( or someone has a neat trick to forward serial comm to Espruino IDE while connected to other server itself talking web sockets with a webpage ? ), hence the idea of an html5 canvas embed within Espruino IDE could make a lot of sense there ( as well as for other stuff than a fake screen, ex: simulating a board, attached components .. oops, it's getting bigger & monstrous, sorry ;p -> but 'plugins' acting as fake connected devices may make sense for quick testing ? )

    Since the code is quite big, I only post links to the two files for now:

    and the direct jsbins:

    on the attached images: the gib one is one of the original Cozmo expression ( a screenshot of the robot's screen ), while the second is a quick save of a vector ( .ai ), and the goal is to reproduce & morph between those on an OLED with Espruino :)

    2 Attachments

    • diy_cozmoExpressions_light__21-Awe.png
    • diy_cozmoExpressions_21-Awe.png

Avatar for stephaneAG @stephaneAG started