Skip to content

Instantly share code, notes, and snippets.

@termat

termat/colorcanvas.markdown

Created February 28, 2019 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save termat/82953a4b1a8a72901e25e6ec33dcc157 to your computer and use it in GitHub Desktop.
Save termat/82953a4b1a8a72901e25e6ec33dcc157 to your computer and use it in GitHub Desktop.
Download ZIP
ColorCanvas
Raw
index.html
<html>
<head>
<title>ColorCanvas</title>
</head>
<body onload="init()">
<table border="1"><tr><td>
<canvas id="canvas" width="470" height="470"></canvas>
</td></tr></table>
</body>
</html>
Raw
script.js
var isMsie;
var ctx;
var graph;
var n;
var h;
function init(){
var canvas = document.getElementById('canvas');
ctx=canvas.getContext('2d');
n=0;
var timer = setInterval("update()", 10)
};
function update(){
var r=235;
ctx.clearRect(0, 0, 470, 470);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, 470, 470);
ctx.lineWidth=1;
ctx.beginPath();
var px=r;
var py=r;
for(var i=0;i<r;i++){
ctx.beginPath();
ctx.moveTo(px,py);
var rgb=hsv((i/r * 135 + n * 4000)%360,100,100);
ctx.strokeStyle="rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
px=r+(i*Math.cos(i+(i*n)));
py=r+(i*Math.sin(i+(i*n)));
ctx.lineTo(px,py);
ctx.stroke();
}
n +=0.00025;
}
function hsv(h, s, v) {
var r, g, b;
var i;
var f, p, q, t;
h = Math.max(0, Math.min(360, h));
s = Math.max(0, Math.min(100, s));
v = Math.max(0, Math.min(100, v));
s /= 100;
v /= 100;
if(s == 0) {
r = g = b = v;
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
h /= 60;
i = Math.floor(h);
f = h - i;
p = v * (1 - s);
q = v * (1 - s * f);
t = v * (1 - s * (1 - f));
switch(i) {
case 0:
return [Math.round(v * 255), Math.round(t * 255), Math.round(p * 255)];
case 1:
return [Math.round(q * 255), Math.round(v * 255), Math.round(p * 255)];
case 2:
return [Math.round(p * 255), Math.round(v * 255), Math.round(t * 255)];
case 3:
return [Math.round(p * 255), Math.round(q * 255), Math.round(v * 255)];
case 4:
return [Math.round(t * 255), Math.round(p * 255), Math.round(v * 255)];
default:
return [Math.round(v * 255), Math.round(p * 255), Math.round(q * 255)];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment