実行例
ブラウザのアドレスバーに以下を入力すると、ページの内容がクリアされ、背景が虹色に変化する。
javascript:body=document.getElementsByTagName("body")[0];body.innerHTML="";x=0;id=setInterval(()=>{x+=5;r=128+127*Math.cos(x/180*Math.PI);g=128+127*Math.cos((x+120)/180*Math.PI);b=128+127*Math.cos((x-120)/180*Math.PI);body.setAttribute("style",`background-color:rgb(${r},${g},${b});`);},100);
以下を入力すると、色の変化が停止する。
javascript:clearInterval(id);
コード
body = document.getElementsByTagName("body")[0];
body.innerHTML = "";
x = 0;
id = setInterval(() => {
x += 5;
r = 128 + 127 * Math.cos(x / 180 * Math.PI);
g = 128 + 127 * Math.cos((x + 120) / 180 * Math.PI);
b = 128 + 127 * Math.cos((x - 120) / 180 * Math.PI);
body.setAttribute("style", `background-color: rgb(${r}, ${g}, ${b});`);
}, 100);
コア部分
r = 128 + 127 * Math.cos(x / 180 * Math.PI);
g = 128 + 127 * Math.cos((x + 120) / 180 * Math.PI);
b = 128 + 127 * Math.cos((x - 120) / 180 * Math.PI);
角度(位相)を120度ずつずらすことで、
rとgとbのうち1つが強い時は他の2つが弱い
rとgとbのうち2つが強い時は他の1つが弱い
という関係になる。
イメージとしては三相交流が近い。
ここでは簡単のため、1周期を360としている。
メリット
R,G,BやC,M,Yといった原色を通らないので、(彩度は落ちるが)やさしい印象になる。 色相を例えば5分割にしたいとき、360を5で割れば済むので便利。デメリット
三相交流のイメージがないと分かりにくい。原色を通るようにする
body = document.getElementsByTagName("body")[0];
body.innerHTML = "";
x = 0;
id = setInterval(() => {
x += 0.1;
r = Math.min(Math.max(Math.abs((x + 5) % 6 - 3) - 1, 0), 1);
g = Math.min(Math.max(Math.abs((x + 3) % 6 - 3) - 1, 0), 1);
b = Math.min(Math.max(Math.abs((x + 1) % 6 - 3) - 1, 0), 1);
body.setAttribute("style", `background-color: rgb(${r*255}, ${g*255}, ${b*255});`);
}, 100);
M -> R -> Y -> G -> C -> B -> M ...
こちらも位相をずらしている点では同じ。
ここでは簡単のため、1周期を6としている。