本記事は Processing Advent Calendar 2020 の25日目の記事です。

はじめに

秘匿されたタンジェント

皆さん、タンジェントは使ってますか？そうです、三角関数の「サイン、コサイン、タンジェント」のタンジェントです。

プログラミングでグラフィックスを作っている人あるあるだと思うのですが、いろいろ表現方法を調べたり本を読んでいたりすると、どこかで三角関数というものに出会うタイミングがありますよね。そして、そこで「三角関数は波」とか「円を作る時に使う」とかを知ることになります。皆さんにも経験はあるのではないでしょうか。

そして、横（X方向）の動きにコサイン、縦（Y方向）の動きにサインを使って円を描いてみよう、というのがよくある流れかと思います。

しかし、三角関数はサインとコサインだけではありません。Wikipediaの「三角関数」を見てみると他にもいろいろあります。

少なくともサインとコサインの他にタンジェントまで含めた3兄弟が、三角関数として良く知られているものかなと思いますが、そのタンジェントまで解説されているものはあまり見ないなぁと感じていました。タンジェントは謎の存在となっているわけです。

tan治郎との出会い

そんなことを考えていた12月半ば。突如「tan治郎」なるキーワードがTwitterのトレンドに並んできました。

そこでは鬼滅の刃のコマを引用して、サインとコサインの壮絶な戦いが繰り広げられていました。

しかし、タンジェントたるtan治郎は蚊帳の外。「そこの発散してばかりの醜いタンジェント」「面倒臭い三角関数」とか言われている始末です。

頑張れtan治郎頑張れ…！そんなわけで、このタンジェントにスポットを当てていこう、というのが本記事の趣旨です。

float t,x,y,F=1,R,T;
void setup(){size(720,720);}
void draw(){
background(-1);
t+=.01;
for(y=0;y<720;y+=40)
for(x=0;x<760;x+=40){
fill(64+32*(F=-F),99+64*F,96+64*F);
square(x+cos(R=int(noise((x*y)*.000005,int(t/PI))*8)*PI/2)*(T=tan(t)*30),y+sin(R)*T,40);
}
}#つぶやきProcessing pic.twitter.com/A3z2OQyBFH

— はぅ君 (@Hau_kun) December 21, 2020

tan治郎にも凄いところがきっとある！

※なお、私は鬼滅の刃を未履修のため、煉獄さんがかっこいいらしい、というぐらいのことしか知りません。鬼滅ネタを期待されていた方がもしいらっしゃったらごめんなさい。ネタは無いです。

タンジェントを使ってみよう

タンジェントのイメージ

サインとコサインは「波」とか「円を使うときに使う」とかよく言われますが、ではタンジェントは一体どういうものなのでしょうか。

私は「減速してきて、一瞬止まって、そのあと加速していくもの」と考えています。「ススーっとやってきて、いったん止まって、ガガーっと行ってしまうもの」というイメージです。

いくつか #つぶやきProcessing で作成した作品を使って説明させていただきます。

縦の動きにタンジェントを使うと下記のようなこんな感じです。
上からやってきて、真ん中でいったん止まって、下に消えていきます。

t=0,setup=()=>createCanvas(720,720)+textSize(200),draw=()=>{for(t+=.02,background(255),x=0;x<720;x+=144)fill((C=int(8*(N=noise)(x,int(T=(s=t-.001*x)/PI)))%4)%3>0?255:0,0,0),text(String.fromCodePoint(127137+16*C+int(26*N(x,int(T),9))%13),x,360+9*tan(s+PI/2))};//#つぶやきProcessing pic.twitter.com/MqQBjacSWT

— はぅ君 (@Hau_kun) March 31, 2020

3Dで、奥行きの動きにタンジェントを使うと下記のような感じです。奥からやってきて、いったん止まって、手前に向かってきます。

float t, r;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
for(r = 0; r < TAU * 9; r+= PI / 8){
translate(cos(r + t) * 50, sin(r + t) * 50, -500 + r * 10 + tan(t) * 100);
rotateY(t += .0001);
box(12);
resetMatrix();
}
}#つぶやきProcessing pic.twitter.com/BtJA2rfOE6

— はぅ君 (@Hau_kun) July 20, 2019

私は、タンジェントはこういう「ススーっとやってきて、いったん止まって、ガガーっと行ってしまうもの」という動きを作れるものと理解しています。

タンジェントを使ってみよう

タンジェントは、他の三角関数のsin()やcos()と同じような感覚で、tan()を使うことで利用できます。

変化する値（frameCountとか、私のコードで言うと、draw()内で毎回ちょっとずつ増えていく変数tとか）をtan()にいれて、その結果を画面に表示するもの（円とか文字とか）の座標に指定していきます。

tan()も三角関数なので、sin()やcos()と同じように0.01ぐらいの刻みで増やしていくのがおすすめです。

ただ、タンジェントの値の変化はサインやコサインと違って急激であるため、tan()の結果をそのまま座標に使うと、一瞬で画面の外へ消えてしまいます。tan()に適当な数値をかけておくと、画面内にある程度の時間残ってくれて動きが見やすくなります。

タンジェントは、だんだんと減速したり加速したりするため、下に向かって動かすと、疑似的に重力のような動きを表現することができます。

String[] s = split("#,つ,ぶ,や,き,P,r,o,c,e,s,s,i,n,g", ",");
float t;
void setup(){
size(150, 100);
textAlign(CENTER);
}
void draw(){
clear();
for(int i = 0; i < 15; i++){
text(s[i], i * 10 + 5, 55 + tan(-i * .20 + (t += .003))* 5);
}
}#つぶやきProcessing pic.twitter.com/IUVLrfQ7Sl

— はぅ君 (@Hau_kun) August 15, 2019

タンジェントの活用

タンジェントは値が「無限大になってしまう」という特徴があります。つまり、座標の指定に使うと「画面外」に行ってしまうわけです。

このため、何か画面外からやってきて、画面内で止まって、また画面外に飛んでいく、といった動きで使うと相性が良いと思います。

下記の作品ではnoise()で矩形が飛んでいく方向を決めた後、タンジェント使ってその方向へ動かすことで、紙をめくって、また戻すような動きを作っています。

float t,x,y,N,T;
void setup(){size(720,720);noStroke();}
void draw(){
clear();
t+=.005;
for(y=0;y<720;y+=5)
for(x=0;x<720;x+=5)
square(x+cos(N=int(noise(x*.002,y*.002,int(((x+y)*.001-t)/PI*2))*8)*PI/2)*(T=pow(tan((x+y)*.001-t),3)*49),y+sin(N)*T,4);
}#つぶやきProcessing pic.twitter.com/xJOEBJFXdI

— はぅ君 (@Hau_kun) October 12, 2020

タンジェントを偶数乗すると、マイナスの値もプラスになるため、飛んで行った方向から戻ってくるようになります。
下記の作品では、タンジェントを8乗して使っています。円が下に落ちて、また下から戻ってくるという動きになっています。

float x,y,t,N;
void setup(){size(720,720);colorMode(HSB);}
void draw(){clear();t+=.05;for(y=0;y<760;y+=40)for(x=0;x<760;x+=40){
fill((noise(x,y)*765)%255,255,255);
ellipse(x,y+pow(tan((N=noise(x,y,int((x+y+t)/PI)))>.6?x+y+t:0),8)*9,35*cos(N>.6?x+y+t:0),35);
}}#つぶやきProcessing pic.twitter.com/cgo7K8LZxJ

— はぅ君 (@Hau_kun) October 20, 2020

下記の作品ではボックスの縦の動きにタンジェントを使っています。ボックスが画面外に行って見えなくなったところで、次のボックスパターンに切り替えています。

float x,y,z,t,Z;void setup(){size(720,720,P3D);}void draw(){clear();t+=.01;for(z=-63;z<64;z+=6)for(y=-63;y<64;y+=6)for(x=-63;x<64;x+=6){resetMatrix();fill(z*2+128);translate(x,y+tan(Z=z*.01+t)*9,z-200);box(noise(x*.02,y*.02,z*.01+int((Z+PI/2)/PI))>.5?6:0);}}#つぶやきProcessing pic.twitter.com/1XX93Bv1uY

— はぅ君 (@Hau_kun) November 21, 2020

タンジェントクロス

冒頭に記載した通り、円を描く際は、Xの動きにコサイン、Yの動きにサインを使うのが定石です。ここで、その一方をタンジェントにすると、円とは少し変わった図形が描けます。

真ん中で交差するような動きになるので、私は勝手に「タンジェントクロス」と名付けています。必殺技みたいでかっこいいです。

下記の作品のような動きを作ることができます。

float r,d,t,P;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.004;
for(d=1;d<361;d+=30)
for(r=0;r<TAU;r+=.01){
fill((r*d)%255,192,255,255-(P=sq(tan(r*r/9-t))));
circle(tan(r+t+d)*d+360,sin(r+d+t*2)*d+360,P/9);
}
}#つぶやきProcessing pic.twitter.com/1yJ2yzsKIJ

— はぅ君 (@Hau_kun) June 13, 2020

角度などのパラメーターを調整すると少し複雑な動きを描くこともできます。

float t,r,d,P;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.004;
for(d=0;d<360;d+=30)
for(r=0;r<TAU;r+=.01){
fill((r*d)%255,192,255,255-(P=pow(sin(r*d+t),8))*255);
circle(tan(r/5*cos(t+r+d))*d+360,sin(t-r+d)*d+360,P*d/9);
}}#つぶやきProcessing pic.twitter.com/8WFPkWoHA6

— はぅ君 (@Hau_kun) June 11, 2020

タンジェントクロスでパーティクルを散らすと、円とはまた異なった趣のある綺麗なものができます。

float t,r,S,R;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.002;
for(r=0;r<TAU*9;r+=.01){
fill((r*r*r)%255,192,255,255-(S=pow(sin(r+t),8)*255));
circle(tan(r+t)*r*9+cos(R=r*r+t)*90+360,cos(r%TAU+t)*r*9+sin(R)*90+360,S/6);
}}#つぶやきProcessing pic.twitter.com/XKxLnFnJJD

— はぅ君 (@Hau_kun) June 10, 2020

タンジェントで疑似3D

タンジェントで大きさを制御すると、だんだん大きくなったりだんだん小さくなったりするために、疑似的に3Dっぽい見た目になります。ただし、繰り返しになりますがタンジェントには「無限大になってしまう」という特徴があるため、そのまま使うと画面いっぱいに大きくなってしまい、見た目があまりよろしくなくなってしまいます。

そこで、一つのテクニックとして、タンジェントの逆数（1/tan()）を透明度に使うと見た目をよくすることができます。大きさが無限大（＝画面いっぱい）になる時、透明度がほぼ0（1/∞）になって画面から見えなくなるわけです。

タンジェントを二乗したり絶対値を取って、適当な値から引くというテクニックもあります。例えば、255-abs(tan())すれば、タンジェントが大きくなった時には、透明度がものすごいマイナスになってやはり画面から見えなくなります。

上記のようなテクニックを使いながらタンジェントを使って大きさを制御することで、大きいものは手前、小さいものは奥にあるように見えるため、3Dを使っていないにもかかわらず、ぱっと見は3Dのように見える絵を創ることができます。

float t,r,T,R,S;
void setup(){size(720,720);colorMode(HSB);}
void draw(){clear();t+=.005;for(float r=0;r<TAU*9;r+=.02){fill((r*r)%255,255-r*3,255,255-(T=abs(tan(t+r)))*30);arc(cos(r*3+t)*T*r*9+360,cos(t*2-r)*tan(t*2-r)*r*9+360,S=TAU*9*T,S,R=t+r*r,R+PI/32);}}#つぶやきProcessing pic.twitter.com/wyoHZHz97e

— はぅ君 (@Hau_kun) June 7, 2020

あと、tan(0)とtan(PI)がタンジェントの結果が0になるポイントなので、「ずれ」具合にタンジェントを使うことで、あるタイミングでピタッとはまる動きを創ることもできます。

float t,r,d,N,T;
void setup(){size(720,720);noStroke();}
void draw(){
clear();
t+=.005;
for(d=0;d<60;d++)
for(r=0;r<TAU-.01;r+=PI/3/d){
fill(-1,500/(T=pow(tan(PI/4+t+(N=noise(d,sin(r),t))),4)*9));
circle(cos(r)*d*(9+T)+360,sin(r)*d*(9+T)+360,T+9);
}
}#つぶやきProcessing pic.twitter.com/sqFNLpiMJi

— はぅ君 (@Hau_kun) October 13, 2020

お気に入り

最近タンジェントを使って創ったものでお気に入りの作品は下記2つです。

まず、下記は上方に水滴が溜まって、そして下に垂れていくような効果を作ってみた作品です。上下の動きにタンジェントを使うと、簡単に重力表現が作れるため、とても便利です。

float t,x,T;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
t+=.01;
blendMode(BLEND);
fill(0,8);
square(0,0,720);
blendMode(ADD);
for(x=0;x<720;x+=5){
fill(x/3,99,99,T=tan(t+x*x)*60);
circle(x,99+T+sin(x*.01+t)*90,500/T+2);
}
}#つぶやきProcessing pic.twitter.com/A69ytbfblv

— はぅ君 (@Hau_kun) December 14, 2020

タンジェントは画面外に行ったのち、同じように画面内に戻ってくるため、繰り返しのような絵を創ることもできます。下図は繰り返しを利用して不思議な模様を描いてみた作品です。

float t,x,y,T,R,C;
void setup(){size(720,720);noFill();colorMode(HSB);}
void draw(){
clear();
t+=.01;
for(y=0;y<720;y+=90)
for(x=0;x<720;x++){
T=tan((R=x*.005+y*.3)+t);
stroke((x+y)*.5%255,99,C=90*abs(T),C);
rect(x,1/T*99+y,noise(y,x*.02+t)*300*sin(R),9);
}
}#つぶやきProcessing pic.twitter.com/3hckk5IbgS

— はぅ君 (@Hau_kun) December 17, 2020

まとめ

今まで、タンジェントにスポットを当てた解説をあまり見なかったので今回タンジェント特集の記事を作成させていただきました。

本記事を読んでタンジェントを使ってみたくなってきたのであれば嬉しい限りです。

Twitterの検索で「#つぶやきProcessing tan(」と調べれば、タンジェントを使った作品（ソースコード付き）を簡単に探すことができます。是非タンジェントをガンガン使って、凄いtan治郎を見つけてみてください。

おまけ

tan治郎と煉cosさんの共演！

float x,y,t,T;
void setup(){size(720,720);noStroke();}void draw(){t+=.01;for(y=0;y<720;y+=60)for(x=0;x<720;x+=9){fill(lerpColor(lerpColor(0xFFC02010,0xFFE0B030,(1+cos(x*.1+y*.01+t))/2),(T=tan((x-y)*.005-t))>0?0xFF60A0A0:0xFF202020,abs(T)*.2));rect(x,y,9,60);}}#つぶやきProcessing pic.twitter.com/6sJpUe79ig

— はぅ君 (@Hau_kun) December 22, 2020

そんな二人の前に立ちはだかる正弦の猗窩sinさん。

float t,r,d;
void setup(){size(720,720);noStroke();}
void draw(){background(-1);t+=.1;for(d=120;d<270;d+=70)for(r=0;r<TAU;r+=.05){fill(64,72,96,sin(d*r-t)*70+120);circle(sin(r+PI)*d+(r<PI?720:0),sin(r+PI/2)*d*1.2+360,30);circle(360,r*360-1700,40+sin(r*3)*9);}}#つぶやきProcessing pic.twitter.com/hxHnN8kLn6

— はぅ君 (@Hau_kun) December 23, 2020