fretShapes continued

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.

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.

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 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.

warm_cool_colors_images

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.

more_warm_cool_colors_images

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 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.
warm_cool_colors_1_mobie

From the examples I collected, I categorized my favorites into 50 color variaties on the warm spectrum and 50 color varieties on the cool spectrum. I then applied a mosaic filter to the images in Adobe Photoshop to better isolate the colors. I then took the 100 filtered images and brought them into Adobe Illustrator in order to turn them into vector color swatches.

warm_cool_colors_2_mobile

Once the swatches were constructed, I started the arrangement process by placing them on the color spectrum according to bright and dark tonalities.

warm_cool_colors_3_mobile

8)

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.

color_spokes_1_images

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.

color_spokes_2_images

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.

logic_screenshots

8)

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.
mobile_color_spokes_1

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.

mobile_color_spokes_2

I also created a zoom mode, where large blocks of color filled the screen and could be played with the mouse like a xylophone.

mobile_color_spokes_3

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.

mobile_logic_screenshots

9)

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.

color_system_1
color_system_2

9)

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 below 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.
mobile_color_system_1
mobile_color_system_2

10)

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).

color_pattern_1


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.

color_pattern_2

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.

function_constructors_image

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.

multiDimensional_array_image

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.

10)

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).
mobile_color_pattern_1_image

I finished constructing all 23 scale patterns and then filled them in with the color schemes chosen using the Scale Colorizer.

mobile_color_pattern_2_image

Once the scale colors were in place, I experimented with welcome screens and created an introductory animation sequence for fretArt.

mobile_color_pattern_3

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.
function_constructors_mobile

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.

mobile_multiDimensional_array

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.

code_1_image

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.

dynamic_coordinates_illustration

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!

mobile_code_2_image

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 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:

  • Adobe Illustrator
  • Adobe Photoshop
  • Sketch
  • Hype Pro
  • Chrome Dev Tools
  • Flash (Macromedia)
  • JavaScript
  • HTML
  • CSS
  • P5.js
  • Atom
  • JS Bin
  • Git/GitHub
  • Logic Pro X
  • Ableton Live

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 quite perplexing.
My Graphic

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.

My Graphic

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!

My Graphic

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 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:

• Adobe Illustrator
• Adobe Photoshop
• Sketch
• Hype Pro
• Chrome Dev Tools
• Flash (Macromedia)
• JavaScript
• HTML
• CSS
• P5.js
• Atom
• JS Bin
• Git/GitHub
• Logic Pro X
• Ableton Live