Project Link: http://thomastai.com/harmony/
Introduction:
For this week’s assignment, we were asked to design and implement an exploration of harmony using code which could be an interactive piece or a fixed composition. I decided to continue developing and improving the melody project that I created a couple weeks ago. Based on user feedback from the class, I noted some issues that people had. Someone said the interface was confusing since the chords would change even when the same button was pressed. Another thing was that the notes that were being shown on the screen did not reflect the actual notes being played.
The overall interface is the same, with some improvements for clarity and usability. Now, instead of using a machine learning library to produce chords, the user has the ability to choose minor, major, diminished, and augmented chords from the menu. In addition, the user can choose from an octave of notes and multiple stringed instruments. Notes actually reflect the pitch of the note that is being played: the color of the note corresponds to the color of the chord buttons below. I believe this new interface is more intuitive and has increased interactivity.
Process:
I started with the interface that I already had from the previous week and made some changes in the code. Most notably, I removed network and machine learning capability which may be added again if there is a proper reason to. From my previous presentation, I found that people playing notes in a group setting just created dissonance.
While it is cool, it does not suit the interface. I made responsive design changes to make the width of the interface scale depending on the window size. Last time, I had refreshed the page when the browser was resized which was definitely not the right way to create a responsive website. Resizing the height is more complicated and needs an overhaul which I was not able to complete in time.
I added buttons for each of the 12 chords in the scale, and added text next to each button. I would consider changing the style of the buttons in the future with more testing. The. animation of the notes was changed in the CSS to be more visually appealing and smooth. Rather than selecting a random height, a calculate height from the bottom of the container is used. I added the different chords as an array which can be selected by the user: [[12,7,4,0],[12,7,3,0],[12,8,4,0],[12,6,3,0]]. In addition, I replaced all the note files with better sounding ones and added vibrato as a digital effect in Tone.JS. There is a noticeable difference in quality.
Future Development:
I would love to continue working on this project in the future to make it easier to use and add more features to the interface. There are still some bugs that need to be fix and responsive design problems that definitely cause issues on mobile devices and other operating systems. After presenting my project to the class, I hope to gain more feedback on what needs to be changed. I think the interface is aesthetically pleasing and intuitive for new users, but the project needs more testing and validation to improve.