"Chord Looper!" - GP1: A Tale of Two Buttons
Developed by Devon Harstrom, Christian Salvador and Rupert Amodia
Description
Have you ever wondered what you could do with just two buttons? No more, no less? Especially two buttons that represent a person?
Well Devon Harstrom, Rupert Amodia and I were tasked to come up with a software application with only two buttons as the central interaction. So now we had to decide on a person these buttons would represent and after a round of icebreakers among the group, we decided to go with Devon since he had quite a bunch of interests to experiment with!
Devon gave us 6 different key interests: rock climbing, hockey, skiing, sleeping, philosophy and guitar! So after sketching out ideas based on those 6 keywords, we landed on his interest in playing his guitar as the main idea for our application.
With this interest in mind, we created "Chord Looper!" An application that allows you to combine up to 8 of 24 selected chords — personally recorded by Devon himself — and play a loop of those chosen chords! This application represents Devon's passion in playing guitar and his interest in experimenting with chord progression. We then further refined the idea down to an application that you can combine chords on to create a loop and hear them back to play along or manually experiment with. With the refinement process, we decided to have the hands and parts of the guitar visually represent the two buttons, since your hands would be interacting with a real guitar.
The application can be accessed using this URL: https://cpsc-581-project-1-personal.glitch.me/ or by viewing the source code embed at the very bottom of this page!
Upon opening the application, it first instructs you to choose the number of chords you will be selecting, from 2 to 8 chords. You can use the bottom right hand (the fretboard hand) to cycle through the shown options. Then, you can use the top left hand (the strum hand) to select an option. Once selected, you are then greeted with a new set of selections representing the 24 chords.
But... there's only space for 7 options, how did we put 24 on there? That's where we needed to be creative. We made it so that you have to hold the fret hand (the lower hand) in order to change the chords into their minor/sharp/sharp-minor variants! There's still only two buttons there to click, it's just that instead of clicking one of the two buttons, you're holding it down!
Anyways, once you've chosen the last chord, you will then be greeted to a new page with a simple illustration of Devon playing his guitar. The buttons now have new functions. The strum hand now handles toggling the auto play mode by holding it down and pauses/resumes or manually plays a chord when single clicked, depending on if auto play mode is toggled. The fretboard hand is no longer a button, but instead the head of the guitar is now a button that will reset the application for you to choose new chords! Now you can enjoy — or be absolutely disgusted — by the loop you've just created!
10 Concept Sketches
I came up with these sketches based on the interests Devon gave us, those being: rock climbing, hockey, skiing, sleeping, philosophy and guitar! At the time of drawing these concept sketches, I had game features in mind and thus many of these sketches had some sort of game mechanic. This focus in thinking did change towards the refinement process which you will see later in this web page. Two particular sketches I was fond of were the rock climbing ones — Sketches #1 and #5.
For Sketch #1, I thought of creating a little game of his rock climbing interest. The two interactive buttons were a grip button and a "move up" button. The grip button was linked to a grip meter that would slowly deplete unless the button is tapped rapidly. The user would have to continuously move up while maintaining grip! Of course, the move up button was a boring rectangular button, but the grip button did have some interesting visuals at least.
For Sketch #5, instead of being just a game, I thought about having it be a metaphor for life struggles, since the struggle of climbing up in your life lines up perfectly with the struggle of climbing rocks. This did deviate from the focus on game mechanics and turned into more of a story telling idea. At the same time, it might have also deviated away from representing Devon a bit as well.
Note: You can click on an image to enlarge it in a new window and scroll horizontally to see all 10 images!
Sketch #2: Skiing Game - Avoid Obstacles
Sketch #3: Sleep Game - Prevent Distractions
Sketch #4: Free Will and Choice Game
Sketch #5: Rock Climbing and Life Struggles
Sketch #6: Hockey Game - Avoid Obstacles and Score
Sketch #7: Bike Riding Game - Avoid Obstacles
Sketch #8: Waking Up Game - Escaping Dreams
Sketch #9: Guitar Song Player
Sketch #10: Guitar Rhythm Game
Refined Sketches
In this section, I will showcase 3 of my 10 refined sketches based on our decision to go with ideas around Devon's interest in playing guitar! My Concept Sketch #9 was one of my own 10 sketches that I chose to refine. I have also included a refined sketch made by Devon of his own guitar interaction idea which greatly contributed to our final product.
For the refinement process, I decided to put an emphasis on refining the buttons more than the ideas themselves. That is, how to make the buttons appear more interesting and interactive. The four sketches below contributed the most to the finalization of the button visualizations/interactions and functionality of the application.
For my refined sketch #1, I continued to use the fretboard area to change a song but instead made clickable flying notes to strum.
For my refined sketch #2, I envisioned a rather complex but interesting scenario that included both rock climbing and guitar playing, that is day dreaming while playing the guitar. This again used the fretboard hand as a way of interacting while also re-using the notes as a way to strum the chords. It was also a bit of a game idea, where the chords played must match the dream cloud shape. This inspired the idea of having a full body illustration of Devon playing the guitar while looping through the chords.
For my refined sketch #3, I went back to using the guitar hole area as a button for interaction for strumming but experimented with the idea of making the fretboard hand draggable to different strings.
The refined sketch #4, created by Devon, shows an assortment of interactions that can be done on the guitar and was the main sketch used for the overall final product design, such as strumming used to select and options shown on the fretboard.
In summary, the shown sketches show how we came up with the presentation of the application and the buttons after experimenting with the buttons individually and combining the ones that seemed interesting into what is now used in the final product.
Refined Sketch #1: Refined Guitar Chord Strumming By Me
Refined Sketch #2: Day Dreaming Guitar Playing By Me
Refined Sketch #3: Another Refined Guitar Strummer By Me
Refined Sketch #4: Guitar Interaction Sketches by Devon
Final Concept Sketch
This section includes a further refined final concept sketch drawn by me and was primarily used as the concept sketches for the assets and application design which you can see on the live application website. Most of the layout directly references Devon's refined sketch but with the addition of a fullbody avatar to represent Devon.
Final Concept Sketch - Click to enlarge
Final Product Reflection
My Contribution
My main contributions were mainly in the art and refinement of the design layout of the buttons along with some of the backend logic of the chords selection screen. I drew all the illustration assets used in the application and did quite a bit of work on the button interactions of the chord selection screen alongside Devon.
Team Reflection
I believe my team was very well balanced, especially in communication and contribution. Our team kept in touch and gave updates quite frequently in the few weeks we had to develop this. As for contribution, where I did the art and the backend logic of the chords selection screen, Rupert was in charge of the backend logic of the chord loop playback and its accompanying screen, and Devon was in charge of the sound design/recording and helped tweak a lot of the final design, including auto sound timings, font/text tweaking, and helped with some backend logic as well. A bit of a fun fact, you can see how different the two screens are in the source code below as while the chord selection page uses a mix of CSS, HTML and JavaScript, Rupert designed the main components of the playback page by only using a canvas alongside JavaScript to draw on that single canvas which I think looks quite clean!
Objective
I believe our application did fit well within the objective. There are only two clickable inputs on both the chord selection and playback screens at any given time. Furthermore, Devon's love of playing guitar and experimenting with chord loops clearly presents itself within our application as that is its main purpose: to experiment with chord combinations and play along with the playback of the combination. I would say the button interactions are also quite interesting in that they aren't just regular rectangular buttons in the interface, but instead are visually represented by hands, just like how you'd use your own two hands to interact with a real guitar.
What Could Have Been
There isn't much that I would change, but there are a few features that I would have loved to add if we had more time. One additional feature that we had talked about in our earlier discussions was an option for random chords to be selected. Unfortunately, we've just ran out of time to do so as it would also involve changing how the table of chord options is rendered which means dealing with more CSS! Another feature would be setting a desired BPM for auto play. This would require another options menu with different button interactions that would decrease and increase BPM. Another addition would be copying the last played selection of chords when resetting and being able to change specific chords in any place of the selection.
What Worked and What Didn't
Quite a lot of things worked in comparison to what didn't. For example, the use of two buttons for the main functionality of our application definitely worked out as we didn't need too many different interactions for it to work. Even with the number of choices we had in chords and features. The use of multiple strums of a chord allowed for much better sounding loops than doing single strums and abruptly moving onto the next, an idea that was provided by Devon. As a matter of fact, at the time of writing this, I can't really think of anything that didn't work.
Source Code - Hosted on Glitch
Click Here If The Embed Does Not Work
Note: You can use the buttons in the bottom right of the embed to display the app as well!