3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

手軽に虹色を生成する

Last updated at Posted at 2019-01-14

実行例

ブラウザのアドレスバーに以下を入力すると、ページの内容がクリアされ、背景が虹色に変化する。


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としている。

メリット

原色とその組み合わせで線形に表現できるので、分かりやすい。 色相を例えば5分割にしたいとき、6を5で割れば済むので便利。

デメリット

強いて言えば、上記の例が簡単な書き方の一例でしかない。 例えばx<0では使えない。
3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?