Final Idea: Heads Up Display

Creating an interface in p5.js with physical controllers was so fun. I definitely want to use that workflow as a prototyping tool to use as a proof of concept, and a low fidelity way to convey complex ideas.

I want to make a rudimentary demo of a heads up display!

I’ll load in many images as assets and stack them together to create the scene and overlay the heads up display. Here are some sketches I came up with while brainstorming. The computer screen is on the left and the Arduino board is on the right:

When the user presses the Engage Self Drive button, an arrow will pop up on the road and a menu will come up saying self driving is on.

When Disengage Self Drive is pressed, a message will appear to notify the user.

When Entertainment Mode is pressed, a menu with a bunch of sub screens will pop up. I’m going to code this so that the menu cannot pop up if self driving is disengaged.

I’m still figuring out the details of what the interface will look like, but this is the general idea.

Inspiration

Image Source. Interface from Robotics Business Review highlighting what the car “sees”

During self driving mode, I want to highlight important objects in the surroundings for the driver to pay attention to.

Image Source. Honda E interface

I’ll try to make the entertainment interface look something like the Honda E, except it’s floating in front of the driver on the windshield.

Anticipated Challenges

This exercise may prove difficult and time intensive. I’m not sure how to keep an animation looping in p5.js so I’ll need to see if I could use some sort of infinite GIF image. I also don’t know how deep I can get into making fleshed out submenus and a whole UI in time for finals. As a minimum viable prototype, I’ll try to get at least the first title page of each button press UI response done.

Steps

I’ll need to use Adobe Illustrator to first make all the UI components and the steering wheel + dashboard of the car. I’ll also make GIF animations for the self driving sequences.

Then, I’ll import them into p5.js and based on button presses, and toggle them on or off based on button presses from the Arduino.

Here’s some pseudocode: