HSL Lum test 3

hsl-lum-test-3.markdown

HSL Lum test 3

A Pen by ashleedawg on CodePen.

License.

index.html

<div id='cont'>
  <canvas id="canvas"></canvas>
  <table id='vals'>
    <tr>
      <td>L</td>
      <td><input type="range" id="l-sld" min="0" max="100"></td>
      <td class='unit' data-unit='%'><input type="text" id="l-val" minlength='1' maxlength='3' value='50' data-max='100'></td>
    </tr>
  </table>
</div>
<div id='test'></div>

script.js

console.clear();
var degrees_step=0.05;
var doc=document, de=doc.documentElement,radius, sto=0, msg,
    c=doc.getElementById("canvas"), ctx=c.getContext("2d");
var lsld=doc.getElementById('l-sld'), 
    lval=doc.getElementById('l-val');
var startAt=0, stopAt=0;

function drawIt(){
  startAt=stopAt; stopAt=startAt+27; //must be divisible by 360
  for(var angle=startAt;angle<stopAt;angle+=degrees_step ){
    ctx.beginPath();
    var x=radius+Math.round(radius*Math.cos(angle*Math.PI/180));
    var y=radius+Math.round(radius*Math.sin(angle*Math.PI/180));
    var grad=ctx.createLinearGradient(radius,radius,x,y);
    grad.addColorStop(0, "hsl("+angle+" 0% "+lval.value+"%)");
    grad.addColorStop(1, "hsl("+angle+" 100% "+lval.value+"%)");
    ctx.strokeStyle = grad;
    ctx.moveTo(radius,radius);
    ctx.lineTo(x,y);
    ctx.stroke();
  }
  if(stopAt<360-degrees_step){setTimeout(function(){drawIt();},0)}
  if(stopAt>=360){stopAt=0};
}

jQuery(function($) {
  $(':input').on('input', function(el) {
    var sib=this.id.charAt(0)+(this.type=='range'?'-val':'-sld');
    $('#'+sib).val($(this).val());
    //recalc visible values, reposition sliders & dot
    if(sto!=0){clearTimeout(sto);}
    sto=setTimeout(function(){ 
      drawIt();
      sto=0;
    },0);
  });
});

$(window).on("load resize",function(e){
    c.width=c.height=Math.min(de.clientWidth,de.clientHeight)-1;
    radius=Math.floor(0.5*c.width);
    drawIt();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.css

*{margin:0; padding:0; }
body{ background:dimgray; font-family:'Fredoka One'; font-size:22px;height:100vh; position:relative; user-select: none; }

#canvas {right:0; top:0; position:absolute;
  width:100vmin; height:100vmin; } 


input[type=range]{ width:100%; margin-left:5px; vertical-align:bottom; }
input[type=text]{ font-size:20px;opacity:80%; text-align:center;}
#l-val{min-width:3.5ch; max-width:4.5ch; width:calc(100% - 1em); }

#test { position:absolute; top:70px; left:6px; color:yellow; }

styles

<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" />