"An ultra-modern surprisingly retro interactive jukebox bonanza".
I had the privilege of participating in PennApps XVII 2018- In my group of 3 members, we decided to create a simulator that would act as an interactive jukebox which an individual, or a group of people could both jam to and participate in, by taking control an instrument. This year's PennApps's Retro theme inspired us to put emphasis on both the significance of the 80's as well as the aesthetic. Through the iconic vintage aesthetic along with a great selection of funk music, Funk Bud aims to provide entertainment through playful visuals and groovy tunes.
(TOP 10) Receiver of 2 awards: The Best Entertaining Hack & Best Retro Hack
SONG SELECTION This is the opening screen of Funk Bud. The user/users can select a song by clicking a cassette of their choice. Once one has been clicked, it will be "loaded" into a cassette player.
THE SUNY WALKBOY Here are the individual cassettes loaded into our Walkboy. These will later be crucial in animating which involves key frames of the object.
LOADING THE CASSETTE Mock-up of the animation using illustrator, later animated by CSS. 4 key object frames are involved: 1) the cassette, 2) open Walkboy, 3) closed Walkboy, 3) pressed Walkboy.
GETTING FUNKY These are the preliminary designs for where the jam session would take place. I particularly liked the idea of a checkered floor against a simple wall paper. Colors would be complimentary.
FURTHER DEVELOPMENT My group members liked the idea of incorporating neon into the background with a black background to accentuate the glow. This is what we eventually settled on as the base of the background. More elements would later be added to balance out the black negative space and to add a more futuristic vibe.
INSTRUMENTS We decided on 3 main instruments: guitar, bass, synth, and the microphone. These were created in illustrator using simple vectors. Many references were used for the shape of the instruments. Below is a mock-up of instrument placing.
A closer look at the instruments:
USER CONNECTION When a user types in the funkbud.com link on their phone, they are automatically assigned an instrument. The instrument, in its original un-activated form is a silhouette. When a user is successfully connected, it will reveal its colors with a glow a neon green halo behind it.
This is how the screen would appear if 4 users were connected to all 4 instruments.
THE USER EXPERIENCE In order to connect to the simulator, the user can use their phone. Therefore, the design of the phone interface was also extremely important in adding to the experience and visuals of our project. The "console" worked best when held horizontally. The structure of the screen was intentionally designed to resemble a cassette.
The "Auto" -pilot button was created in photoshop, and the 2 buttons to play the instrument were created in illustrator. When pressed, the middle would become slightly darker to indicate pressure, therefore another key frame was made.
LOGO/IDENTITY The logo was made in photoshop, emulating that futuristic metallic aesthetic.
