Rock Meter for Battle of the Bands

If you've played Guitar Hero then you might be familiar with the rock meter. It's a little element on the screen that tracked your streak and gave you a bonus for how well you did. Here's a recreation of that feature using Rive and React.

The company I work for has an annual Battle of the Bands event where we have a handful of bands put on a show and the audience votes for who did the best. As an accompanying tool for this event, I created this Rock Meter. The way it works is that the tool tracks your decibel level. When you reach the set decibel level, the rock meter starts to grow. As you hit new levels, you'll see the TV being powered on and changing the channel to represent the new level. Let me break this down a bit more.

This picture shows the Rive setup. I used React as the source of truth for this work. The device microphone acted as one of two inputs that changed how Rive responded. The second input is a click interaction on the bolts that allows the user to choose what their rock threshold is. Overall, this project consisted of 5 components, 32 timelines, 16 view model properties, and 11 state machine layers.

The first element that was built was the decibel meter visualized using lightning bolts. Decibel ranges were broken into 11 stops (one stop being the quiet or lower level sounds) that progressively ramp up. As the sound goes up, React passes a value from 0–10 to Rive which is then mapped and rendered to a bolt using the bolt index.

This video also represents the threshold selection. The user can select a bolt that will build the rock meter when that bolt is activated. For example, if the user selects the last bolt, they need to hit that last bolt for a sustained period of time to be able to start seeing progress represented on the rock meter. If the user were to select the first bolt, then it'd be a lot easier to activate the rock meter since the decibel level wouldn't have to get that high.

The next element added was the text that represents the level of rock they've reached. There are 7 different levels being represented using a range of 0–101. 0 is the idle state meaning they haven't activated the threshold yet. The next 5 levels are the primary levels: fist pumping, head banging, stage diving, guitar smashing, and face melting. Each level has a range of 20, eg. fist pumping goes covers 1–20, head banging covers 21–40, etc.

The final level is "system breaking" and becomes active when the user hits 101 on the rock level. Other elements in the project visualize this reaction to the user rocking out so hard that they've maxed out the meter.

One of the main elements in this project is the rock meter. It acts as a progress bar and uses the same rock level as the text. This means that each level is activated at the same ranges.

Same as the text, the bar sorta shuts down when it hits the "system breaking" level at the end.

The final primary element of the rock meter is a TV set. The thought behind this is MTV-rock-music-video-vibes. Like the text and the rock meter, the TV set is also connected to the rock level. As you hit the first level, the TV starts to power on. Once you hit different levels, it kinda changes channels. When the rock level dies entirely, the TV powers off.

In addition to the different channels, there's also a state machine layer that shows the channel transition represented toward the end of the clip. When you hit the "system breaking" level, the TV breaks and can't be powered back on until you get back in the safe range.

I hope you enjoyed this project, thanks for checking it out!