Click the GIF below to see a short demo at the fretArt stage.
Click the GIF below to see a short demo at the fretArt stage.
The interface was built, but I had assets constructed for only one scale—the C Major scale. Before I could construct the other scale assets, I had to work out the color schemes to be applied to each scale.
This was an important step because each scale was to have its own color scheme and relative location on the color spectrum. Warm/bright sounding tonalities should be depicted with warm and bright colors and cool/dark tonalities should be depicted with cool/dark colors. I knew that I was embarking on a deep dive into color.
I needed a set of color schemes that ranged the entire spectrum, so I scoured the internet for good examples. I ultimately found two excellent resources—colorist painters and birds. The images below illustrate the process by which I extracted a 7-hue color scheme from an exotic bird and then applied that color scheme to a scale pattern.
From the examples I collected, I categorized my favorites into 50 color varieties on the warm spectrum and 50 color varieties on the cool spectrum. I applied a mosaic filter to the images in Adobe Photoshop to better isolate the colors. Then I moved the 100 filtered images into Adobe Illustrator in order to turn them into vector color swatches.
Once the swatches were constructed, I started the arrangement process by placing them on the color spectrum according to bright and dark tonalities.
I realized this was going to be a massive undertaking and that I needed a way to effectively and efficiently compare the relative sound of scale tonalities with their corresponding colors on the visual spectrum. A quick search revealed that this type of tool simply didn't exist. So I set out to create my own tool—a scale colorizer.
Working in Hype Pro, I constructed related swatch groups for each scale/mode which could be rearranged by order, size, or color at the press of a button. I also created a zoom mode, where large blocks of color filled the screen and could be played with the mouse like a xylophone.
Using Logic Pro X, I recorded audio clips for each scale in order to create an auditory tonal reference which would be triggered by clicking each swatch. These audio loops were designed to be used as color tone listening references or to be improvised over when playing in zoom mode. Screenshots of the Logic Pro X session are shown below.
Once the scale colorizer web app was finished, I put it into use! I developed an efficient process using the Scale Colorizer, along with the Spectrum color swatch app, to closely compare, tweak, listen to, improvise with and ultimately refine color schemes for each scale.
The Scale Colorizer worked very well and proved to be a unique and compelling web app in its own right. The images illustrate show my assembly system from left to right, along with the final color groups placed in their respective scale swatches. Want to try it out? Click here to visit the Scale Colorizer page.
With the color schemes finished, I was now able to switch gears back to asset creation. My plan was to use the Hype file as a template. All I needed to do was to duplicate the template and then drop in the new set of assets for each scale. With all of the assets in place I'd have a working web app.
I created fretboard pattern outlines in preparation for dropping in the color schemes. Once each pattern was complete, I combined the three guitar necks together in order to make one connected shape/color scheme for each scale (shown below).
I finished constructing all 23 scale patterns and then filled them in with the color schemes chosen using the Scale Colorizer. Once the scale colors were in place, I experimented with welcome screens and created an introductory animation sequence for fretArt.
FretArt was ready to be assembled! This was at the exact half-way point in my bloc.io Design Track program. This also coincided with the end of the UI/UX portion of my Design track coursework and the beginning of the Frontend portion of the course.
My plan was to take the assets I created in the design portion and wrap them together into a web app using code. The possibility of Angular JS was floated as a potential framework. However, my Frontend mentor mentioned another option that I simply could not refuse.
Along the way, in order to better visualize scale coordinates during the coding process, I created an interactive fretboard reference tool in Sketch. View the GIF below to see the tool in use. By turning on and off layers and sliding the scale overlays back and forth, I could quickly plot out coordinates for any scale in any key.
Making a scale display its notes on the fretboard was the first important step, but the only things showing were scale dots. The next step was to connect these dots with lines, thereby revealing the shapes of the scales. However, figuring out how to make that happen was a challenge.
In order to better understand the problem, I created a diagram in Sketch. As I worked with it, a pattern began emerging—the major scale! I realized that when the shape coordinates are stacked horizontally (but connected vertically), a displaced major scale pattern can be superimposed on top of the pattern in order to determine the coordinates of the surrounding notes programmatically.
The screenshot below shows the moment that the programmatically-generated line connections appeared for the first time and worked—a major milestone in the project!
Finally, after a good deal of coding, refactoring and visual tweaking, fretShapes version 1.0 was finished and available to the public! The GIF below shows some of the basic functionality of fretShapes. Try it out at www.fretshapes.com!
What excites me is that even though the fretArt concept goes back over 25 years, and even after all of these versions and iterations, fretArt/fretShapes feels like it is only just now getting started.
I very much look forward to further developing fretShapes and ultimately releasing fretArt as well, as a full-featured companion app. After all, the assets are complete and ready to go!
In the meantime, fretboard visualization continues to be a labor of love for me that sparks my deepest passions—art, music and technology.
Software / technology used in this project: