JSFiddle - React, Tailwind, and code Playground
JavaScript
var windowSize = document.body.clientWidth;
var point = document.createElement('div');
point.style.position = 'absolute';
point.style.height = '2px';
point.style.width = '2px';
point.style.backgroundColor = '#444';
var renderLinePoint = function(x) {
tmp = point.cloneNode(true);
tmp.style.top = '20px';
tmp.style.left = (x * windowSize) + 'px';
document.body.appendChild(tmp);
}
var circleCurve = document.createElement('div');
circleCurve.style.position = 'absolute';
circleCurve.style.top = '50px';
circleCurve.style.left = '50px';
circleCurve.style.width = '100px';
circleCurve.style.height = '100px';
circleCurve.style.borderRadius = '50px';
circleCurve.style.border = '1px solid #aaa';
document.body.appendChild(circleCurve);
var HSVtoRGB = function(h, s, v) {
var r, g, b, i, f, p, q, t;
if (h && s === undefined && v === undefined) {
s = h.s, v = h.v, h = h.h;
}
h = h/360
s = s/100;
v = v/100;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: Math.floor(r * 255),
g: Math.floor(g * 255),
b: Math.floor(b * 255)
};
};
var kyleSat = function(x) {
return 85
+ Math.round(Math.cos((x-10) / 90 * Math.PI) * 10);
}
var kyleBright = function(x) {
return 75
+ Math.round(Math.cos((x) / 60 * Math.PI) * 10)
+ Math.round(Math.cos((x-20) / 90 * Math.PI) * 5)
+ Math.round(Math.cos((x-30) / 180 * Math.PI) * 10);
}
var kyleColor = function(x) {
x *= 360;
x += 200;
x = x % 360;
return HSVtoRGB({h: x, s: kyleSat(x), v: kyleBright(x)});
}
var renderCirclePoint = function(x) {
...