DigiWave Project Structure. The controller sends commands to a server, which distributes commands and coordinates phone clients to light up
Server Diagram. Each component is independent (Click to see picture)
GIF
How we envision DigiWave working
Conceptual UI Phone Client Mockups we created during planning
GIF
Demo of DigiWave. The laptops represent phones which can be turned on and off for flashy displays
GIF
Demo of Controller. The venue would use this to see connected phones and choose which pattern to display in the venue
Phone Client Login Screen
Phone Client Screen instructing audience member to hold out their phone

DigiWave: Free the Pixel!

Project Banner

What is DigiWave?

DigiWave turns any crowd into a giant display, Without an App™

Each phone utilizes a low-latency communication protocol to talk to a centralized server, which coordinates light shows across crowds of up to 65,000 people!

What Does it Look Like?

Event participants will receive a DigiWave link from the organizers. This can be displayed at the show via a QR code or sent before the event over email or text. Since DigiWave is web-based, there’s none of the hassle associated with downloading an app or logging into a service, making the barrier to entry extremely low.

On the website, there’s no login or sign-in page. All the user has to do is enter their seat number. Additionally, we can even create links that autofill the seat number, requiring no setup!

All that’s left to do is for the user to point their phone screen toward where they’re looking.

The central server keeps track of every phone and can send commands to each one independently. When the position of the phone (provided by the seat number) is taken into account, the phone becomes a part of the "pixel cloud", which is what we call the amorphous display. With its position known, different regions of the pixel cloud can be lit up to display a pattern, like this:

Mockup

Inspiration

We wanted to do something creative, flashy, and exciting. Drawing on drone light shows, and this hacker’s awesome christmas tree, we tried to merge the locality of “the wave” with the beauty of lighter waving.

This led us to DigiWave, designed to fit within HackGT’s Twisted Reality theme.

Fun Fact: We were inspired by GPU shader programs to implement extremely efficient crowd-scale lighting shows, requiring no server-side processing to display patterns. Each phone runs its own “fragment shader” that determines its pixel value, in lockstep with every other device in the crowd.

How We Built It

The client website was built using HTML, CSS, and JavaScript, the server was built using NodeJS, and the controller was written in React-Redux, HTML, CSS, and Javascript. All agents use WebSockets to communicate with one another.

We used GitHub for version control and managing the multiple members working on the code, as well as Figma and draw.io for conceptualizing and planning our project.

Challenges We Ran Into

The biggest hurdle we have with our project is that a large amount of functionality in web browsers is locked behind secure HTTPS connections. This proved to be difficult to do without cloud hosting, which none of us were familiar with. As such, we decided to self-host, which limited us to solely browser APIs available to insecure contexts. This prevented us from accessing the flashlight on the phone, as well as accelerometer data.

Accomplishments That We're Proud of

For the majority of us, this was our first hackathon, and we were happy to be able to attend and enjoy being at HackGT.

What we are most proud of, though, is that all of us in some way were able to contribute, even if some of us were inexperienced with web development. Each of us was assigned to essential roles in the project and worked together to make it successful, whether that be by working on the web page for the phone, controller, and server, or by documenting our work and conceptualizing our ideas in Figma.

All of us were able to contribute and grow our skills as hackers.

We are proud of how we managed the team. Work was distributed fairly, and everyone contributed based on their strengths. Because of this, we had a relatively stress-free hackathon experience. While we did have to pull late nights, each of us was able to take time off to enjoy workshops and events whenever we wanted to take a break.

What We Learned

How to use WebSockets and asynchronous programming paradigms
How browser security and HTTPS go hand-in-hand (and how much of a browser’s functionality is locked behind secure contexts!).
How to create a good-looking reactive website using HTML and CSS.
How to avoid overlapping the button that users need to click on with the button that hides the UI, promptly breaking the app for a large number of users.

What's Next for DigiWave

There’s only so much we could've done in 36 hours!

Given more time, we could set up the website with a certificate as we discussed earlier, giving DigiWave access to a wide range of APIs to interface with the outside world.

In future iterations, we can use accelerometer data to provide more physically interactive experiences to the audience. For example, we could:

Encourage audience members to wave their phones by displaying a real-time count of how many people are waving in the crowd.
Hype up a sports audience by seeing which half of the stadium can “rumble” more, by shaking their phones vigorously.