Commits

Jiyin Yiyong  committed 2c5b3ff

color pad

  • Participants

Comments (0)

Files changed (9)

+
+./lib/*
+
+cd `dirname $0`
+
+jade -O ./ -wP src/*jade &
+stylus -o ./ -w src/*styl &
+livescript -o ./ -wbc src/*ls &
+doodle *html *js *css &
+
+read
+
+pkill -f jade
+pkill -f stylus
+pkill -f livescript
+pkill -f doodle
+var hue, get, p2, d, key, ref$, val, show, calH, calColor, depColor, slice$ = [].slice;
+hue = 0;
+get = function(id){
+  return document.getElementById(id);
+};
+p2 = function(it){
+  return pow(it, 2);
+};
+d = function(x){
+  return abs(x - 100);
+};
+for (key in ref$ = prelude) {
+  val = ref$[key];
+  window[key] = val;
+}
+show = function(){
+  var args;
+  args = slice$.call(arguments);
+  return console.log.apply(console, args);
+};
+calH = function(x, y){
+  var h;
+  y = -y;
+  h = atan2(x, y) * 180 / pi;
+  if (h < 0) {
+    h += 360;
+  }
+  return h;
+};
+calColor = function(x, y){
+  var distance, h, s, l;
+  distance = sqrt(sum(map(p2, [x, y])));
+  if (distance > 100) {
+    return 'hsl(0,100%,100%)';
+  } else {
+    h = calH(x, y);
+    s = 100;
+    l = 60;
+    return "hsl(" + h + "," + s + "%," + l + "%)";
+  }
+};
+depColor = function(x, y){
+  var s, l, ret;
+  s = round(x / 5);
+  l = round(y / 5);
+  ret = "hsl(" + hue + "," + s + "%," + l + "%)";
+  show(ret);
+  return ret;
+};
+window.onload = function(){
+  var box, crl, b, i$, ref$, len$, i, j$, ref1$, len1$, j, render;
+  box = get('box');
+  crl = get('circle');
+  b = box.getContext('2d');
+  window.c = crl.getContext('2d');
+  show('kk');
+  for (i$ = 0, len$ = (ref$ = [-100, -99, -98, -97, -96, -95, -94, -93, -92, -91, -90, -89, -88, -87, -86, -85, -84, -83, -82, -81, -80, -79, -78, -77, -76, -75, -74, -73, -72, -71, -70, -69, -68, -67, -66, -65, -64, -63, -62, -61, -60, -59, -58, -57, -56, -55, -54, -53, -52, -51, -50, -49, -48, -47, -46, -45, -44, -43, -42, -41, -40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 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]).length; i$ < len$; ++i$) {
+    i = ref$[i$];
+    for (j$ = 0, len1$ = (ref1$ = [-100, -99, -98, -97, -96, -95, -94, -93, -92, -91, -90, -89, -88, -87, -86, -85, -84, -83, -82, -81, -80, -79, -78, -77, -76, -75, -74, -73, -72, -71, -70, -69, -68, -67, -66, -65, -64, -63, -62, -61, -60, -59, -58, -57, -56, -55, -54, -53, -52, -51, -50, -49, -48, -47, -46, -45, -44, -43, -42, -41, -40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 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]).length; j$ < len1$; ++j$) {
+      j = ref1$[j$];
+      c.fillStyle = calColor(i, j);
+      c.fillRect(100 + i, 100 + j, 1, 1);
+    }
+  }
+  render = function(){
+    var i$, ref$, len$, j, l, gra;
+    b.clearRect(0, 0, 500, 500);
+    for (i$ = 0, len$ = (ref$ = [0, 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, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477, 478, 479, 480, 481, 482, 483, 484, 485, 486, 487, 488, 489, 490, 491, 492, 493, 494, 495, 496, 497, 498, 499]).length; i$ < len$; ++i$) {
+      j = ref$[i$];
+      l = j / 5;
+      gra = b.createLinearGradient(0, 0, 500, 0);
+      gra.addColorStop(0, "hsl(" + hue + ",0%," + l + "%)");
+      gra.addColorStop(1, "hsl(" + hue + ",100%," + l + "%)");
+      b.fillStyle = gra;
+      b.fillRect(0, j, 500, 1);
+    }
+    return box.onclick = function(event){
+      var x, y, color;
+      x = event.pageX - box.offsetLeft;
+      y = event.pageY - box.offsetTop;
+      show(x, y);
+      color = depColor(x, y);
+      get('sample').style.background = color;
+      return get('hsl').value = color;
+    };
+  };
+  crl.onclick = function(event){
+    var x, y;
+    x = event.pageX - crl.offsetLeft - 100;
+    y = event.pageY - crl.offsetTop - 100;
+    window.hue = round(calH(x, y));
+    return render();
+  };
+  get('hsl').onmouseover = function(){
+    return this.select();
+  };
+  return get('hsl').oninput = function(){
+    var color;
+    color = this.value;
+    return get('sample').style.background = color;
+  };
+};
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>color-pad</title>
+    <link rel="stylesheet" href="page.css">
+    <script src="lib/prelude-browser-min.js"></script>
+    <script src="handle.js"></script>
+  </head>
+  <body>
+    <canvas id="box" width="500px" height="500px"></canvas>
+    <div id="panel">
+      <canvas id="circle" width="200px" height="200px"></canvas>
+      <div id="sample"></div>
+      <input id="hsl">
+      <p id="rgb">rgb(0,0,0)</p>
+    </div>
+  </body>
+</html>

File lib/prelude-browser-min.js

+// prelude.ls 0.6.0
+// Copyright (c) 2012 George Zahariev
+// Released under the MIT License
+// raw.github.com/gkz/prelude-ls/master/LICNSE
+this.prelude=function(){function Gt(e,t){return e.length>1?function(){var n=t?t.concat():[];return n.push.apply(n,arguments)<e.length&&arguments.length?Gt.call(this,e,n):e.apply(this,n)}:e}function Yt(e,t){var n=0,r=t.length>>>0;while(n<r)if(e===t[n++])return!0;return!1}function Zt(e){return function(){var t,n=arguments;for(t=e.length;t>0;--t)n=[e[t-1].apply(this,n)];return n[0]}}function en(e){return!e}function tn(e,t){var n={}.hasOwnProperty;for(var r in t)n.call(t,r)&&(e[r]=t[r]);return e}exports={};var e,t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D,P,H,B,j,F,I,q,R,U,z,W,X,V,$,J,K,Q,G,Y,Z,et,tt,nt,rt,it,st,ot,ut,at,ft,lt,ct,ht,pt,dt,vt,mt,gt,yt,bt,wt,Et,St,xt,Tt,Nt,Ct,kt,Lt,At,Ot,Mt,_t,Dt,Pt,Ht,Bt,jt,Ft,It,qt,Rt,Ut,zt,Wt,Xt,Vt,$t,Jt,Kt={}.toString,Qt=[].slice;return exports.objToFunc=e=function(e){return function(t){return e[t]}},exports.each=t=Gt(function(e,t){var n,r,i;if(Kt.call(t).slice(8,-1)==="Object")for(n in t)r=t[n],e(r);else for(n=0,i=t.length;n<i;++n)r=t[n],e(r);return t}),exports.map=n=Gt(function(t,n){var r,i,s,o,u,a,f,l={};Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=Kt.call(n).slice(8,-1);if(r==="Object"){for(i in n)s=n[i],l[i]=t(s);return l}o=[];for(u=0,a=n.length;u<a;++u)s=n[u],o.push(t(s));return f=o,r==="String"?f.join(""):f}),exports.filter=r=Gt(function(t,n){var r,i,s,o,u,a,f,l={};Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=Kt.call(n).slice(8,-1);if(r==="Object"){for(i in n)s=n[i],t(s)&&(l[i]=s);return l}o=[];for(u=0,a=n.length;u<a;++u)s=n[u],t(s)&&o.push(s);return f=o,r==="String"?f.join(""):f}),exports.reject=i=Gt(function(t,n){var r,i,s,o,u,a,f,l={};Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=Kt.call(n).slice(8,-1);if(r==="Object"){for(i in n)s=n[i],t(s)||(l[i]=s);return l}o=[];for(u=0,a=n.length;u<a;++u)s=n[u],t(s)||o.push(s);return f=o,r==="String"?f.join(""):f}),exports.partition=s=Gt(function(t,n){var r,i,s,o,u,a,f;Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=Kt.call(n).slice(8,-1);if(r==="Object"){i={},s={};for(o in n)u=n[o],(t(u)?i:s)[o]=u}else{i=[],s=[];for(a=0,f=n.length;a<f;++a)u=n[a],(t(u)?i:s).push(u);r==="String"&&(i=i.join(""),s=s.join(""))}return[i,s]}),exports.find=o=Gt(function(t,n){var r,i,s;Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t));if(Kt.call(n).slice(8,-1)==="Object")for(r in n){i=n[r];if(t(i))return i}else for(r=0,s=n.length;r<s;++r){i=n[r];if(t(i))return i}}),exports.head=a=exports.first=u=function(e){if(!e.length)return;return e[0]},exports.tail=f=function(e){if(!e.length)return;return e.slice(1)},exports.last=l=function(e){if(!e.length)return;return e[e.length-1]},exports.initial=c=function(e){if(!e.length)return;return e.slice(0,e.length-1)},exports.empty=h=function(e){var t;if(Kt.call(e).slice(8,-1)==="Object"){for(t in e)return!1;return!0}return!e.length},exports.values=p=function(e){var t,n,r=[];for(t in e)n=e[t],r.push(n);return r},exports.keys=d=function(e){var t,n=[];for(t in e)n.push(t);return n},exports.length=v=function(e){return Kt.call(e).slice(8,-1)==="Object"&&(e=p(e)),e.length},exports.cons=m=Gt(function(e,t){return Kt.call(t).slice(8,-1)==="String"?e+t:[e].concat(t)}),exports.append=g=Gt(function(e,t){return Kt.call(t).slice(8,-1)==="String"?e+t:e.concat(t)}),exports.join=y=Gt(function(e,t){return Kt.call(t).slice(8,-1)==="Object"&&(t=p(t)),t.join(e)}),exports.reverse=b=function(e){return Kt.call(e).slice(8,-1)==="String"?e.split("").reverse().join(""):e.slice().reverse()},exports.fold=E=exports.foldl=w=Gt(function(e,t,n){var r,i,s;if(Kt.call(n).slice(8,-1)==="Object")for(r in n)i=n[r],t=e(t,i);else for(r=0,s=n.length;r<s;++r)i=n[r],t=e(t,i);return t}),exports.fold1=x=exports.foldl1=S=Gt(function(e,t){return E(e,t[0],t.slice(1))}),exports.foldr=T=Gt(function(e,t,n){return E(e,t,n.reverse())}),exports.foldr1=N=Gt(function(e,t){return t.reverse(),E(e,t[0],t.slice(1))}),exports.unfoldr=exports.unfold=C=Gt(function(e,t){var n;return(n=e(t))!=null?[n[0]].concat(C(e,n[1])):[]}),exports.andList=k=function(e){return E(function(e,t){return e&&t},!0,e)},exports.orList=L=function(e){return E(function(e,t){return e||t},!1,e)},exports.any=A=Gt(function(t,n){return Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),E(function(e,n){return e||t(n)},!1,n)}),exports.all=O=Gt(function(t,n){return Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),E(function(e,n){return e&&t(n)},!0,n)}),exports.unique=M=function(e){var t,n,r,i;t=[];if(Kt.call(e).slice(8,-1)==="Object")for(n in e)r=e[n],Yt(r,t)||t.push(r);else for(n=0,i=e.length;n<i;++n)r=e[n],Yt(r,t)||t.push(r);return Kt.call(e).slice(8,-1)==="String"?t.join(""):t},exports.sort=_=function(e){return e.concat().sort(function(e,t){switch(!1){case!(e>t):return 1;case!(e<t):return-1;default:return 0}})},exports.sortBy=D=Gt(function(e,t){return t.length?t.concat().sort(e):[]}),exports.compare=P=Gt(function(e,t,n){switch(!1){case!(e(t)>e(n)):return 1;case!(e(t)<e(n)):return-1;default:return 0}}),exports.sum=H=function(e){var t,n,r,i;t=0;if(Kt.call(e).slice(8,-1)==="Object")for(n in e)r=e[n],t+=r;else for(n=0,i=e.length;n<i;++n)r=e[n],t+=r;return t},exports.product=B=function(e){var t,n,r,i;t=1;if(Kt.call(e).slice(8,-1)==="Object")for(n in e)r=e[n],t*=r;else for(n=0,i=e.length;n<i;++n)r=e[n],t*=r;return t},exports.mean=F=exports.average=j=function(e){return H(e)/v(e)},exports.concat=I=function(e){return E(g,[],e)},exports.concatMap=q=Gt(function(e,t){return I(n(e,t))}),exports.listToObj=R=function(e){var t,n,r,i;t={};for(n=0,r=e.length;n<r;++n)i=e[n],t[i[0]]=i[1];return t},exports.maximum=U=function(e){return x(gt,e)},exports.minimum=z=function(e){return x(yt,e)},exports.scan=X=exports.scanl=W=Gt(function(e,t,n){var r,i;return r=t,Kt.call(n).slice(8,-1)==="Object"?[t].concat(function(){var t,s,o=[];for(t in s=n)i=s[t],o.push(r=e(r,i));return o}()):[t].concat(function(){var t,s,o,u=[];for(t=0,o=(s=n).length;t<o;++t)i=s[t],u.push(r=e(r,i));return u}())}),exports.scan1=$=exports.scanl1=V=Gt(function(e,t){return X(e,t[0],t.slice(1))}),exports.scanr=J=Gt(function(e,t,n){return n.reverse(),X(e,t,n).reverse()}),exports.scanr1=K=Gt(function(e,t){return t.reverse(),X(e,t[0],t.slice(1)).reverse()}),exports.replicate=Q=Gt(function(e,t){var n,r;n=[],r=0;for(;r<e;++r)n.push(t);return n}),exports.take=G=Gt(function(e,t){switch(!1){case!(e<=0):return Kt.call(t).slice(8,-1)==="String"?"":[];case!!t.length:return t;default:return t.slice(0,e)}}),exports.drop=Y=Gt(function(e,t){switch(!1){case!(e<=0):return t;case!!t.length:return t;default:return t.slice(e)}}),exports.splitAt=Z=Gt(function(e,t){return[G(e,t),Y(e,t)]}),exports.takeWhile=et=Gt(function(t,n){var r,i,s,o;if(!n.length)return n;Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=[];for(i=0,s=n.length;i<s;++i){o=n[i];if(!t(o))break;r.push(o)}return Kt.call(n).slice(8,-1)==="String"?r.join(""):r}),exports.dropWhile=tt=Gt(function(t,n){var r,i,s,o;if(!n.length)return n;Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t)),r=0;for(i=0,s=n.length;i<s;++i){o=n[i];if(!t(o))break;++r}return Y(r,n)}),exports.span=nt=Gt(function(e,t){return[et(e,t),tt(e,t)]}),exports.breakIt=rt=Gt(function(e,t){return nt(Zt([en,e]),t)}),exports.zip=it=Gt(function(e,t){var n,r,i,s,o,u,a,f,l;n=[];for(r=0,s=(i=[e,t]).length;r<s;++r){o=i[r];for(u=0,a=o.length;u<a;++u)f=o[u],r===0&&n.push([]),(l=n[u])!=null&&l.push(f)}return n}),exports.zipWith=st=Gt(function(t,n,r){var i,s,o,u,a=[];Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t));if(!n.length||!r.length)return[];for(i=0,o=(s=it.call(this,n,r)).length;i<o;++i)u=s[i],a.push(t.apply(this,u));return a}),exports.zipAll=ot=function(){var e,t,n,r,i,s,o,u,a;e=Qt.call(arguments),t=[];for(n=0,r=e.length;n<r;++n){i=e[n];for(s=0,o=i.length;s<o;++s)u=i[s],n===0&&t.push([]),(a=t[s])!=null&&a.push(u)}return t},exports.zipAllWith=ut=function(t){var n,r,i,s,o,u=[];n=Qt.call(arguments,1),Kt.call(t).slice(8,-1)!=="Function"&&(t=e(t));if(!n[0].length||!n[1].length)return[];for(r=0,s=(i=ot.apply(this,n)).length;r<s;++r)o=i[r],u.push(t.apply(this,o));return u},exports.compose=at=function(){var e;return e=Qt.call(arguments),function(){var t,n,r,i,s;t=arguments;for(n=0,i=(r=e).length;n<i;++n)s=r[n],t=[s.apply(this,t)];return t[0]}},exports.curry=ft=function(e){return Gt(e)},exports.id=lt=function(e){return e},exports.flip=ct=Gt(function(e,t,n){return e(n,t)}),exports.fix=ht=function(e){return function(t,n){return function(){return e(t(t)).apply(null,arguments)}}(function(t,n){return function(){return e(t(t)).apply(null,arguments)}})},exports.lines=pt=function(e){return e.length?e.split("\n"):[]},exports.unlines=dt=function(e){return e.join("\n")},exports.words=vt=function(e){return e.length?e.split(/[ ]+/):[]},exports.unwords=mt=function(e){return e.join(" ")},exports.max=gt=Gt(function(e,t){return e>t?e:t}),exports.min=yt=Gt(function(e,t){return e>t?t:e}),exports.negate=bt=function(e){return-e},exports.abs=wt=Math.abs,exports.signum=Et=function(e){switch(!1){case!(e<0):return-1;case!(e>0):return 1;default:return 0}},exports.quot=St=Gt(function(e,t){return~~(e/t)}),exports.rem=xt=Gt(function(e,t){return e%t}),exports.div=Tt=Gt(function(e,t){return Math.floor(e/t)}),exports.mod=Nt=Gt(function(e,t){var n;return(e%(n=t)+n)%n}),exports.recip=Ct=function(e){return 1/e},exports.pi=kt=Math.PI,exports.tau=Lt=kt*2,exports.exp=At=Math.exp,exports.sqrt=Ot=Math.sqrt,exports.ln=Mt=Math.log,exports.pow=_t=Gt(function(e,t){return Math.pow(e,t)}),exports.sin=Dt=Math.sin,exports.tan=Pt=Math.tan,exports.cos=Ht=Math.cos,exports.asin=Bt=Math.asin,exports.acos=jt=Math.acos,exports.atan=Ft=Math.atan,exports.atan2=It=Gt(function(e,t){return Math.atan2(e,t)}),exports.truncate=qt=function(e){return~~e},exports.round=Rt=Math.round,exports.ceiling=Ut=Math.ceil,exports.floor=zt=Math.floor,exports.isItNaN=Wt=function(e){return e!==e},exports.even=Xt=function(e){return e%2===0},exports.odd=Vt=function(e){return e%2!==0},exports.gcd=$t=Gt(function(e,t){var n;e=Math.abs(e),t=Math.abs(t);while(t!==0)n=e%t,e=t,t=n;return e}),exports.lcm=Jt=Gt(function(e,t){return Math.abs(Math.floor(e/$t(e,t)*t))}),exports.installPrelude=function(e){var t;if((t=e.prelude)==null||!t.isInstalled)tn(e,exports),e.prelude.isInstalled=!0},exports.prelude=exports,exports}()
+body {
+  margin: 0px;
+}
+#box,
+#panel {
+  display: inline-block;
+  box-shadow: 1px 1px 10px #808080;
+  vertical-align: top;
+  margin: 20px;
+}
+#box {
+  width: 500px;
+  height: 500px;
+  display: inline-block;
+}
+#panel {
+  width: 300px;
+}
+#panel div {
+  box-shadow: 0px 0px 10px #e6e6e6;
+  margin: 20px;
+}
+#panel #circle {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+}
+#panel #sample {
+  width: 100px;
+  height: 100px;
+}
+#panel #hsl,
+#panel #rgb {
+  margin: 20px;
+}

File src/handle.ls

+
+hue = 0
+
+get = (id) -> document.getElementById id
+
+p2 = -> pow it, 2
+
+d = (x) -> abs (x - 100)
+
+for key, val of prelude then window[key] = val
+show = (...args) -> console.log.apply console, args
+
+cal-h = (x, y) ->
+    y = -y
+    h = (atan2 x, y) * 180 / pi
+    if h < 0 then h += 360
+    h
+
+cal-color = (x, y) ->
+  # c = 100 # set center at 100, 100
+  distance = sqrt sum map p2, [x, y]
+  if distance > 100
+    'hsl(0,100%,100%)'
+  else
+    h = cal-h x, y
+    s = 100
+    l = 60
+    "hsl(#h,#s%,#l%)"
+
+dep-color = (x, y) ->
+  s = round (x / 5)
+  l = round (y / 5)
+  ret = "hsl(#hue,#s%,#l%)"
+  show ret
+  ret
+
+window.onload = ->
+  box = get \box
+  crl = get \circle
+
+  b = box.getContext \2d
+  window.c = crl.getContext \2d
+
+  show \kk
+
+  for i in [-100 til 100]
+    for j in [-100 til 100]
+      c.fillStyle = cal-color i, j
+      c.fillRect (100 + i), (100 + j), 1, 1
+
+  render = ->
+    b.clearRect 0, 0, 500, 500
+    for j in [0 til 500]
+      l = j / 5
+      gra = b.createLinearGradient 0, 0, 500, 0
+      gra.addColorStop 0, "hsl(#hue,0%,#l%)"
+      gra.addColorStop 1, "hsl(#hue,100%,#l%)"
+      b.fillStyle = gra # dep-color i, j
+      b.fillRect 0, j, 500, 1
+
+    box.onclick = (event) ->
+      x = event.pageX - box.offsetLeft
+      y = event.pageY - box.offsetTop
+      show x, y
+      color = dep-color x, y
+      get(\sample).style.background = color
+      get('hsl').value = color
+
+  crl.onclick = (event) ->
+    x = event.pageX - crl.offsetLeft - 100
+    y = event.pageY - crl.offsetTop - 100
+    window.hue = round cal-h x, y
+    do render
+
+  get('hsl').onmouseover = ->
+    @select()
+
+  get('hsl').oninput = ->
+    color = @value
+    get(\sample).style.background = color

File src/index.jade

+doctype 5
+html
+  head
+    title color-pad
+    link(rel='stylesheet',href='page.css')
+    script(src='lib/prelude-browser-min.js')
+    script(src='handle.js')
+    //- script(src='http://up:8072/doodle.js')
+  body
+    canvas#box(width='500px',height='500px')
+    #panel
+      canvas#circle(width='200px',height='200px')
+      #sample
+      input#hsl hsl(0,0%,0%)
+      p#rgb rgb(0,0,0)

File src/page.styl

+
+body
+  margin 0px
+
+#box, #panel
+  display inline-block
+  box-shadow 1px 1px 10px gray
+  vertical-align top
+  margin 20px
+  
+#box
+  width 500px
+  height 500px
+  display inline-block
+
+#panel
+  width 300px
+
+  div
+    box-shadow 0px 0px 10px hsl(0,0,90)
+    margin 20px
+
+  #circle
+    width 200px
+    height 200px
+    border-radius 100px
+
+  #sample
+    width 100px
+    height 100px
+
+  #hsl, #rgb
+    margin 20px