はじめに

この記事はKAYAC Advent Calendar 2022の19日目です。
おはこんばんちは！新卒の中村です！

NEORTさんが募集していたCURATION FREEに作品を出してみた話をしたいと思います。

概要

東京馬喰町のアートギャラリーNEORT++にて壁面投影される作品を投稿してみませんか？というものです。
誰でも参加出来るとのことだったので、ものは試しだ～ということでエントリーしました。
募集要項として、NEORTに投稿できる作品ならどんなフォーマットでも良く、自分はJavaScriptかGLSLを使いたかったので、全画面表示の11012px×1080pxのサイズで作品を作りました。

出した作品

出した作品は以下の3つです。 neort.io neort.io neort.io

行ってみた

場所はここ↓ www.google.co.jp 入口は建物の奥にあります。

NEORT++は3Fです。

以下は展示されている様子です。 youtu.be youtu.be youtu.be 動画の画質が悪いのはお許しください。(スマホだと無理がある) 実際に自分の展示を見てみると、「うわ～～流れてる～～～」ってなりました。

作品解説

流石にtechblogを語っている以上、何か技術の話をしようと思います。
ここでは一番色鮮やかなleadershipについて解説します。

作る前に考えたこと

大前提として、画面サイズは11012px×1080pxになるため、forをゴリゴリ使って色々するのは難しいのではないかと考えました。
そのため、GLSLを使うにしろレイマーチングを行うのは少し無理があるのではないかと思い、2Dでかつエフェクトを出来るだけかけないようにしました。

ソースコードの解説

実はコードの中身自体はそこまで難しいものではありません。
自力で読める人は読んでみてください。関数で分からないものがあれば、この記事を横に置きながら読むことをお勧めします。

とても長いソースコード

precision highp float;

const float PI = 3.1415926;

uniform vec2 resolution;
uniform float time;
uniform vec2 mouse;
uniform sampler2D backbuffer;

float eoq(float x){
    return 1. - pow(1. - x, 5.);
}

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),sin(_angle),cos(_angle));
}

float random(vec2 st){
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

float randV(vec2 st){
    float r = random(vec2(time/100.,ceil((st.y)/5.)));
    float ran = r;

    if(ran > 0.06) {
        ran = 0.0;
    }
    float rr = smoothstep(0.0, 0.06, ran);
    if(rr != 0.0) {
        rr -= 0.5;
        rr += r;
    }
    
    return rr;
}

float circle(vec2 p,float size){
    return max(ceil(size - length(p)),0.);
}

float box(vec2 p,float size){
    float len=max(abs(p).x,abs(p).y);
    return step(len,size);
}

vec2 gst = vec2(0.);

float obj(vec2 p,float s,float size){
    float r = 0.;
    
    p = mod(p,s)-s/2.;
    p = rotate2d(eoq(mod(time,1.))*PI) * p;
    
    float y = gst.y - mod(time,5.)/5. * (resolution.y+400.) + 200.;
    float x = mod(gst.x,resolution.y)-resolution.y/2.;
    vec2 po = vec2(x,y);
    if (circle(po,200.) > 1.) {
        r=circle(p,25.);
    }else{
        r=box(p,25.);
    }
    
    return r;
}

void main(void){
    vec2 uv = gl_FragCoord.xy;
    vec2 st = uv;
    gst = uv;

    uv -= mod(resolution.y,100.)/2.;
    
    uv += vec2(
            eoq(clamp(mod(time,2.),0.,1.))*100.*(step(mod((uv.y+100.)/100.,2.),1.)*2.-1.),
            eoq(clamp(mod(time,2.)-1.,0.,1.))*100.*(step(mod((uv.x+100.)/100.,2.),1.)*2.-1.)
          );
    
    uv.x += randV(uv)*20.;
    
    float boxV = obj(uv,100.,25.);
    vec2 uv2 = uv + vec2(12.5);
    float boxV2 = obj(uv2,100.,25.);
    vec2 uv3 = uv - vec2(12.5);
    float boxV3 = obj(uv3,100.,25.);
    
    vec3 c = vec3(boxV,boxV2,boxV3);
    
    gl_FragColor = vec4(c, 1.0);
}

座標を計算し、あらかじめノイズをかけた座標を元に、四角と丸を描画するというものです。
描画する四角と丸は、時間とノイズをかけた後の座標を元に切り替えています。

このソースコード内で一番読む気が失せる以下のコードについて詳しく解説しようと思います。

uv += vec2(
        eoq(clamp(mod(time,2.),0.,1.))*100.*(step(mod((uv.y+100.)/100.,2.),1.)*2.-1.),
        eoq(clamp(mod(time,2.)-1.,0.,1.))*100.*(step(mod((uv.x+100.)/100.,2.),1.)*2.-1.)
    );

これは四角や丸が上下左右に動くためのコードです。
そのため、x座標を動かすコードとy座標を動かすためのコードにそこまで差異がありません。

それでは分解します。
まず初めに以下のコード。

clamp(mod(time,2.),0.,1.)

これはtimeをmodで0≦x<2にした後、clampで0≦x≦1にしています。

modは剰余関数で、他の言語の書き方をするとtime%2になります。
clampを他の書き方に変えると、clamp(x, a, b) = min(max(x, a), b)になります。

よって、timeが0≦x<2の範囲でループするが、出力される値は0≦x≦1まではそのまま出て、1以降は1のままになるということになります。

なので、

clamp(mod(time,2.)-1.,0.,1.)

だと、modの出力結果の0≦x<2から1を引くことで-1≦x<1になり、clampで0≦x≦1にするため、-1≦x≦0は0のままで、そのあとは0≦x≦1の値が出ます。

それらを囲っているeoqの中身です。

float eoq(float x){
    return 1. - pow(1. - x, 5.);
}

eoqって何の略称だ？ってなりますが、easeOutQuintの略です。
これによって、ふわっとした動きを実現出来ています。
あとは100をかけることで移動します。バンザイ。

しかし、その後に何かかけています。
まず以下のコード。

mod((uv.y+100.)/100.,2.)

uv.yに何故100を足しているのか気になったかと思いますが、以下のコードが原因です。

uv -= mod(resolution.y,100.)/2.;

これは上下左右を程よい感じにはみ出すためのコードになっております。
そのため、uv.yがマイナスになる可能性があるため、100を足すことで無理やりプラスにしています。
その後、modで0≦x<2にしています。

以下はそれを囲っているコード。

step(<さっきのやつ>,1.)*2.-1.

stepはあまり見かけないと思いますが、step(x, a)はxがaより小さければ0、それ以上だと1を出す関数です。
これによって、座標が100pxごとに0と1の値が出ます。その後に2をかけて1引くことで、-1と1にします。

これを先ほど説明した値にかけることで、行と列ごとに動く方向を変えることができます。
よって、上下左右に移動出来ていたという訳です。

最後に

こんな良い体験をさせていただきありがとうございました。
普段からちまちまクリエイティブコーディングをしていたりしますが、いざこういう展示するってなった時に、いい感じのアイデアが思い浮かばないな～～って思いました。

次同じような展示会があればもっとレベルの高いものを出したいと思います！