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-timed 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:
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 :)
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
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:
What we currently have:
If anyone's adventurous/skilled/interested/free-timed 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:
-rounded corners: https://jsbin.com/kovihocugi/edit?html,css,js,console,output
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