Pog Concert Extension

• 

  Filters add hype and mood to the performance!

• 

  Event information is cleanly displayed.

• 

  While the song is playing, the music is anlyzed and reflected visually on the bottom in the hertz eq bars.

Inspiration

Friend and team member Richard Kim is an aspiring musician who is planning to do a concert with his current album tracks on Twitch, due to Corona virus distancing. In order to hype and engage with his audience, a Twitch extension is a perfect middle ground between him and his fans! Elements that would really improve the quality of the concert were added, such as hertz/eq bars which bop up and down to the music, clear and user-friendly popups, and emojis & filters that users can use to hype up their screens!

What it does

It's an extension run on Twitch that people can use to add special effects to their stream, such as clickable hearts, a filter of special effects, strobe lights, hertz eq bars, and general information on the streamer and his socials while being easy to use and pleasing to the eyes.

How we built it

A Twitch extension was built with React JS. The sound bars were made by playing an audio file, and while playing, taking the audio information of the element, and graphing it on bars that would rerender every few milliseconds. The poppups were all implemented with React JS useState hook and logic. The emoji animations were done using the React JS useEffect hook, useState hook, and setTimeout to quickly rerender the position of images in milliseconds. Styling was done in CSS and in-line css with React.

Challenges we ran into

The most challenging, but rewarding, part of this experience was working with the audio aspects of the extension. No one on the team has ever worked with audio files in frontend development, and was a huge learning experience. Figuring out how to even play a .mp3 file was a challenge, as React, and specifically the Twitch Developer Rig, had issues with many sound files. Working on the dynamic sound bars were the biggest challenge, where we had to learn retrieving audio information from JSX elements, and then figuring out how to interpret and graph them onto a canvas. The fact that many articles were outdated, or was incompatible with the Twitch environment, had us trying to figure out workarounds.

Another huge challenge was trying to connect backend with the Twitch frontend. This was done to allow crowd voting and interaction with the streamer. The difficulty was trying to work it into the Twitch extension code, which was geared towards cross-platform viewing and much more difficult then simply setting up an Express JS server, connecting it to MongoDB, and writing some CRUD API. In the end, it proved too time consuming, and had to be shelved.

On the artistic side it was a challenge to draw and especially animate the items that we needed and make them fit with the aesthetic that we were going for in a clean and hype manner.

Accomplishments that we're proud of

The extension is clean, easy-to-use, and successfully brings many tools that will greatly enhance a concert! The art was on point, all components flow with a common theme, and every functionality works as they should.

What we learned

We learned how to implement and analyze audio files in React. The members who haven't had much programming experience learned a great deal of frontend design and development.

On the artistic side, we worked on communicating artistically, and improving teamwork in figuring out artistic direction.

What's next for Pog Concert Extension

Figuring out how to implement backend for cross-user and crowd interactions, polishing up frontend elements, and adding more features to improve chat-streamer interactions!

Better animations c: ~ James

Built With

• html/css
• javascript
• react