I was in need of an elegant way to demonstrate progression across separate articles of media but still show continuity. I decided upon a combination of shapes and colors. for the colors I wanted to flow from mostly white, through the color/hue spectrum to mostly black. I couldn’t figure out a way to get these values without manually selecting them so I did a little research into ways of defining colors. In my search I found a circular layout of colors that seemed to be what I needed. I also learned about HSV which turned out to be the turning point, allowing me to turn my color selection into a set of equations. I started by building my functions in Excel. This is a simple way for me to get a visual feel for the process as it evolves. This eventually provided me what I wanted but in an inelegant way. I modified the code from Rapid Tables to build a webpage that has a slider and shows me my resulting colors very easily. Using this I was able to quickly select the range of colors that would work for me. As a side note, I would have saved a bunch of trouble if I could have found a table of HEX color values that I could do a lookup against in Excel. Maybe it existed but I didn’t find one. Here is a version I created. I hope it makes someones day. I was inspired by the color wheel I found and adapted the code from Rapid Tables to create a JavaScript generated color wheel that covers the color¹ spectrum of RGB, just because I could. I have included the code below and this is a link to the JavaScript Color Wheel Generator Demo. Maybe I’ll try this again with the Canvas tag if I get to feeling industrious.

Color Wheel

Generate! Can you do it better?

var h,RGB,hyp,s,v,C,hh,X,r,m,hex,len,BearIsAwesomeSAWCE,roundx,roundy,max_x,max_y,min_x,min_y,size_x,size_y;
var H_value=128;
var res = 1; //Use Smaller number for a finer plot (takes longer to process)
var size = 1; //multiplier for the size of the plot
var direction = 1; //change -1 for clockwise or 1 for counterclockwise
 var mydiv = document.getElementById('colorwheel');
document.getElementById('mybuttons').addEventListener("click", generate_wheel);
 min_x = min_y = -1.01;//use .01 to resolve divide by zero errors
 max_x = max_y = 256;
size_x = (Math.abs(max_x)+ Math.abs(min_x))* size;
size_y = (Math.abs(max_y)+Math.abs(min_y)) * size; //Define dimensions of the box. You probably want a square and only need on of these but just in case...
 mydiv.style.width = size_x + 'px';//change size of box to match desired dimensions
 mydiv.style.height = size_y + 'px';//change size of box to match desired dimensions
function generate_wheel()
 			{
 for(y=min_y; y<=max_y;)
{
  for(x=min_x; x<=max_x;)
{
  var w_x = (x-128);
var w_y = direction*(y-128);
h=Math.atan(w_y/w_x);//get angle from working values
 h=h*(180/Math.PI);//convert to degrees
if(w_x<=0){h=(h+180);}
if(h<0){h=360+h;}
 hyp=Math.sqrt(Math.pow(w_x,2)+Math.pow(w_y,2));
  if (hyp/H_value >= 1)
 {
s=0;//change saturation of outside the circle from 0 (faint) to 1 (100% saturation)
v=0;//change tone  of outside the circle from 0 (black) to 1
 }
 else if (hyp/H_value >= 0.5)
 {
 s=(1-(hyp/H_value-0.5)*2);
 v=1;
 }
 else {
 s=1;
 v=2*hyp/H_value;
 }
 				if( h=="" ) h=0;
 				if( s=="" ) s=0; 
if( v=="" )
 v=0;
h = parseFloat(h);
s = parseFloat(s);
v = parseFloat(v);
 				if( h<0 ) h=0;
 				if( s<0 ) s=0;
 				if( v<0 ) v=0;
 				if( h>=360 ) h=359;
 				if( s>100 ) s=100;
 				if( v>100 ) v=100;
 	C = v*s;
 	hh = h/60;
 	X = C*(1-Math.abs(hh%2-1));
 	r = g = b = 0;
 				if( hh>=0 && hh<1 )
 				{
 					r = C;
 					g = X;
 				}
 				else if( hh>=1 && hh<2 )
 				{
 					r = X;
 					g = C;
 				}
 				else if( hh>=2 && hh<3 )
 				{
 					g = C;
 					b = X;
 				}
 				else if( hh>=3 && hh<4 )
 				{
 					g = X;
 					b = C;
 				}
 				else if( hh>=4 && hh<5 )
 				{
 					r = X;
 					b = C;
 				}
 				else
 				{
 					r = C;
 					b = X;
 				}
 			m = v-C;
 				r += m;
 				g += m;
 				b += m;
 				r *= 255;
 				g *= 255;
 				b *= 255;
 				r = Math.floor(r);
 				g = Math.floor(g);
 				b = Math.floor(b);
 				hex = r*65536+g*256+b;
 				hex = hex.toString(16,6);
 			len = hex.length;
                              if( len<6 )
 				for(i=0; i<6-len; i++)
 					hex = '0'+hex;
 RGB=r + ', ' + g + ', ' +b;
roundx = Math.floor(x); //makes the outputted code just a little cleaner
roundy = Math.floor(y); //makes the outputted code just a little cleaner
top:'+ (roundy*size)+'px;height:'+size+'px;width:'+size+'px; background-color: rgb('+ RGB +');" id=' + roundx + '_' + roundy +'></div>'; //Thanks Bear Sunderland!! (http://bearsunderland.com/)

BearIsAwesomeSAWCE += '<div style="position:absolute;left:'+(roundx*size)+'px;top:'+ (roundy*size)+'px;height:'+size+'px;width:'+size+'px; background-color: rgb('+ RGB +');"></div>'; //Thanks Bear Sunderland!! (http://bearsunderland.com/)
 x=x+res;
 			}
 y=y+res;
 			}
 mydiv.innerHTML = BearIsAwesomeSAWCE;
 			//document.write('DONE!');
 			}
 console.log("Welcome to the Console! I don't have anything interesting in here.");