fretShapes continued
Click the GIF below to see a short demo at the fretArt stage.
The interface was built, and the scale patterns were complete. My next task was 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 based on the sound of the scale. Warm/bright sounding tonalities were to be depicted with warm and bright colors and cool/dark tonalities were to be depicted with cool/dark colors.
I embarked on an exploration of color and tonality.
7)
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 nature (birds in particular).
The 4 images below illustrate the process by which I extracted a 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.
8)
To do it right, this was going to be a massive undertaking.
I realized I needed a way to effectively and efficiently compare the relative sound of scale tonalities with their corresponding colors on the visual spectrum.
An internet search revealed that this type of tool simply didn't exist. So I set out to create my own tool—a scale colorizer.
Working with the web animation app Hype Pro, I constructed 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. The intention was to trigger the sounds by clicking the color swatch.
The audio loops were designed to be used as color tone listening references. They could also be improvised over when playing in zoom mode.
Screenshots of the Logic Pro X session are shown below.
9)
Once the scale colorizer web app was finished, I put it to use. I used 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.
10)
With the color schemes finished, I was now able to switch gears back to asset creation. My plan was to use the Hype Pro 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.
With all of the assets complete and the intro done, the template was ready to go. I thought my next phase was to put it all together with HTML, CSS and a bit of javascript. However, what happened next was a major redirection!
11)
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.
That was, to build fretArt programmatically from the ground up using JavaScript, HTML and CSS! I knew that this would be a major undertaking but also an amazing learning experience, so I determined to do it. I put aside all of the assets I had just completed and set out to build fretArt from scratch, by hand, with code.
Using Atom as a text editor and JSBin as a testing ground, my mentor and I started by assembling JavaScript object constructors that modeled the fretboard and the notes. The image below is some of the first code that we wrote, sketching out a JavaScript note object.
In my research, I came across an excellent JavaScript library called P5.js, which I decided to incorporate into the project, since it has robust audio and drawing functionality built in. With the combination of JavaScript and P5.js, I created a multi-dimensional array representing a fretboard along with a single button to turn on a major scale.
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.
12)
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!
Conclusion:
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 app.
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:
