Skip to content

Instantly share code, notes, and snippets.

@adkatrit

adkatrit/index.html

Created August 19, 2012 20:45
Show Gist options
  • Save adkatrit/3397623 to your computer and use it in GitHub Desktop.
Save adkatrit/3397623 to your computer and use it in GitHub Desktop.
Download ZIP
just visualizing some math. looking to add slide bars to see value changes in real time.
Raw
index.html
<html>
<head>
</head>
<body>
<canvas style="background-color: black" id="canvas" height="1000px" width="1000px" ></canvas>
<div id="controls" ></div>
</body>
</html>
Raw
script.js
function hsvToRgb(h, s, v) {var a,b,c,d,e,f,g,i,k;s/=100;v/=100;0==s&&(a=b=c=v,k=[Math.round(255*a),Math.round(255*b),Math.round(255*c)]);h/=60;d=Math.floor(h);e=h-d;f=v*(1-s);g=v*(1-s*e);i=v*(1-s*(1-e));switch(d){case 0:a=v;b=i;c=f;break;case 1:a=g;b=v;c=f;break;case 2:a=f;b=v;c=i;break;case 3:a=f;b=g;c=v;break;case 4:a=i;b=f;c=v;break;default:a=v,b=f,c=g}k =[Math.round(255*a),Math.round(255*b),Math.round(255*c)];return k;}
(function() {
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
var ctx2 = c.getContext('2d');
var x = 0;
function resizeCanvas() {
c.width = window.innerWidth;
c.height = window.innerHeight;
ctx.translate(c.width/2,c.height/2);
}
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
var a = setInterval(
function(){
ctx.rotate((((x++%260)*Math.PI)/180));
rgb = hsvToRgb((x%361),80,80);
ctx.strokeStyle="rgb("+rgb[2]+","+rgb[1]+","+rgb[0]+")";
ctx.stroke();
ctx.fillStyle="rgb("+rgb[2]+","+rgb[1]+","+rgb[0]+")";
ctx.lineWidth=.5;
ctx.lineJoin='round';
ctx.lineTo(x%c.width,x%c.height);
ctx2.fillStyle="rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
ctx2.fillRect(x%c.width,x%c.height,x%c.width/10,x%c.height/10);
},50);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment