Head LEDs
- 4 Minutes to read
Head LEDs
- 4 Minutes to read
Article summary
Did you find this summary helpful?
Thank you for your feedback
Head LEDs overview
In this tab, you will find an explanation about the design and purpose of the head LEDs, a description and code for existing atoms, and tips for designing your own atoms.
The head is the most dominant element we see when facing the robot. Gary is a permanent guest and we want to be able to easily interact with him and feel comfortable around him. This is the reason we designed Gary's head in that way, with a LED array that displays robotic “facial expressions''. We definitely don't want to imitate human or animal facial expressions - we aim to create an abstract, visual, robotic language that is intuitive for humans to understand.
Semantic distinction
Gary has two types of outputs- relaying a message or motivating an action.
Relaying a message will appear more organic, easy and light. That expresses in an ease in ease out motion and fluid shapes.
Motivating an action will appear more mechanical, liniar, hard. That expresses in linear motion and geometric shapes.
Head LEDs atoms
Standby
This motion is a static pose, no motion, and it is displayed when Gary is on standby. Meaning, when Gary is connected to WIFI, not instructed to do anything and is not waiting for any specific input.
What can you do with it: this atom is the default pose of the head LEDs and you can use it as the starting point for interaction, as demonstrated above in the inner logic explanation.
Waiting
This motion is displayed when Gary is waiting for specific input from the user.
Pace: ease in ease out
What can you do with it: display it when Gary is waiting for any type of information from the user.
Hello
This motion is used when we want Gary to greet the user "hello", when we want to signal the user we see them and that Gary is alive and responding.
Duration: 3000 milliseconds
Pace: linear
Motion: simultaneous
What can you do with it: use it in a situation when Gary encounters people and you wish to get their attention or acknowledge them.
Task received
This motion is basically Gary saying "got it". Displayed when it receives a new task or instruction.
Duration: 3000 milliseconds
Pace: linear
Motion: simultaneous
What can you do with it: use it for in-app flows to indicate that Gary got input from the user.
(1).gif)
Performing a task
This motion is displayed while Gary is performing a task.
Repeat: loop
Pace: linear
Motion: simultaneous
What can you do with it: you can use it while your app is running.
Task finished
This motion is displayed when Gary has finished a defined task.
Repeat: X1
Duration: 1333 milliseconds
Pace: linear
Motion: simultaneous
What can you do with it: use it to indicate that your app has finished running, or that a process within the app is finished (if that information is relevant to the user).
(1).gif)
Pointing to screen
This motion is displayed when Gary wants to draw the user's attention to the screen (to view some information there or perform an action through the screen).
Repeat: loop
Pace: linear
Motion: simultaneous
What can you do with it: you can use it to draw the user's attention to the screen for any reason.
Pointing to finger sensors
This motion is displayed when Gary wants to draw the user's attention to the finger sensors (for example if a fingerprint is needed to proceed with the task).
Repeat: loop
Pace: linear
Motion: simultaneous
What can you do with it: you can use it to draw the user's attention to the finger sensors for any reason.
Turning off
This motion is displayed when Gary is turning off (for example, at the docking station).
Repeat: X1
Duration: 12875 milliseconds
Pace: liniar
Motion: asynchronous
What can you do with it: this particular atom is not available for you to use, but it can provide you with inspiration for new atoms design.
Excited
This motion is displayed when Gary is thrilled and excited!
Repeat: loop
Pace: ease in ease out
Motion: asynchronous
What can you do with it: use it to indicate that Gary is excited.
Designing new atoms for the head LEDs
The Led array consists of 207 RGB LEDs, arranged in a grind of 23X9. There is a consistent inner logic to the “motion” of the light and shapes that we display. The idea is to use the inherent qualities of a grid system and favor shapes that benefit from it, instead of forcing shapes that may be problematic (like small circles and shapes that require a higher grid density).
This output is a preliminary and dominant aspect of Gary’s communication with the user. There are many options within the LED grid to design cool, appropriate, exciting and innovative interactions.
Use the suggested parameters (Repeat, duration, pace, motion) to define your design, and remember that you want it to be pleasant and joyful for the user.
Converting 2D into 3D
Remember that Gary’s head is round, and the right and left edges of the grid are placed on the sides of the head. Take this into consideration when you look at these atoms and when designing new atoms.
It's not a person, and it shouldn't imitate one
We recommend not trying to imitate a human face or specific icons with the LEDs. it can often be too creepy, too cutesy or just inappropriate. Think carefully about what is the right thing for your app. If you are developing a scary-stories app for halloween, then imitating a human (or pumpkin) face might be a good idea. For any other app, we recommend careful consideration and favoring abstract shapes and motions.
Was this article helpful?
.png)