^{1}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

Can you do it better?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
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."); |