凄すぎてもう訳が分からない作品へのリンク集

2020/04/26
processing プログラミングジェネラティブアート
6 min read

Table of Content

はじめに

　私が勝手に「凄い！」と思った作品へのリンク集です。どうしてこんなに短いコードで、こんなに凄い表現ができるのか、誰か教えて…。

　※ なお、このページはまだ未完成であり、順次作品が追加されていきます。

Volfegan さんの作品

float i,m,n,p,s,t;void setup(){size(1080,720);noStroke();}
void draw(){background(0);translate(-0.4*1080,-720/4);
for(i=2e3;i>0;i--){p=i%2==0?0:1;m=t/cos(t/i)+p*(t/2+i%t);
rect(960+m*sin(n=t/9+i*i)*cos((p==0?1:0)*i/t),540+m*cos(n+p*2),s=3-cos(n)*3,s);}t+=.05;}#つぶやきProcessing pic.twitter.com/rUTbfyII2n
— Volfegan (@VolfeganGeist) June 18, 2020

　つぶやき Processing で素晴らしい作品、すごすぎて訳が分からない、何が起きているのかが良くわからない作品には、「そこに宇宙がある」としか表現のしようの無いものがあります。

この作品もそうです。まさしく宇宙があります。

　spoiler （ネタバレ）というか、ヒントは以下の URL にあるそうです（清書版のソースコード？）：

https://gist.github.com/volfegan/cf99fa5584c34e98dce0ffb6505aa70d

アさんの作品

W=540;N=200;x,y,t=0,0,0
def setup():size(W,W);noStroke()
def draw():global t;clear();[F(i,j)for i in range(N)for j in range(N)];t+=.1
def F(i,c):global x,y;r=TAU/N;u=sin(i+y)+sin(r*i+x);v=cos(i+y)+cos(r*i+x);x=u+t;y=v;fill(i,c,99);circle(u*N/2+W/2,y*N/2+W/2,2) #つぶやきProcessing pic.twitter.com/nidGdzBMVE
— ア (@yuruyurau) February 10, 2020

　もう、何がなにやら。すごすぎます。

こちらの作品も凄いです。

W=540;N=200;x,y,t=0,0,0
def setup():size(W,W);noStroke()
def draw():global t;clear();[F(i,j)for i in range(N)for j in range(N)];t+=.06
def F(i,c):global x,y;u=sin(i+y)+sin(i+x);v=cos(i+y)+cos(i+x);x=u+t;y=v;fill(c,i,150);circle(u*N/2+W/2,y*N/2+W/2,sin(c))#つぶやきProcessing pic.twitter.com/jpbvb4Rc8o
— ア (@yuruyurau) February 10, 2020

どう表現してよいのか。自分の語彙力のなさに呆然とします。強いて言えば、深海生物の発光パターンのような、そんな印象を持ちました（なんで、このコードでこれが生成されるの？）。

Naoto HIÉDA さんの作品

for(t=[],i=N=200;i>0;i--)t[i]=0;setup=i=>createCanvas(W=400,W),draw=r=>{for(background(x=y=z=0),noStroke(),s=sin,c=cos,i=2;i<N;i+=9,t[i]+=i**-1.5)for(j=0;j<N;j++)[x,y,z]=[c(i+y)+s(2*i+x),s(i+y)+c(2*i+x),c(x)],fill(i,z*N,j),circle(99*x+N,99*y+N,2),x+=t[i]};//#つぶやきProcessing pic.twitter.com/YKHjz4vPyS
— Naoto HIÉDA (@naoto_hieda) February 23, 2020

　もう、これは 1 ツィートの中に宇宙があるとしか思えない作品。そして同じくこちらの作品も：

N=200
x=y=z=w=t=0
draw=_=>{t||createCanvas(W=400,W)
background(0)
noStroke()
t+=.03
c=cos
for(i=0;i<N;i++)for(j=0;j<N;j+=9)[x,y,z,w]=[c(w)+sin(i+x),sin(w)+c(i+y),sin(i+x)+c(i+y),c(i+z)+t],o=abs(z-.5),fill(i,z*N,j,W*exp(-o*3)),circle(x*99+N,y*99+N,exp(o*2)+1)}//#つぶやきProcessing pic.twitter.com/OwODAYkoqX
— Naoto HIÉDA (@naoto_hieda) February 20, 2020

すごすぎます。

　こちらの作品もいい感じにラインがひかれていくのですが、もう訳がわかりません。

t=[N=0],draw=a=>{N||createCanvas(W=400,W),background(0),t[N++%(n=200)]=[f=(r=random)(W),g=r(W),W-f,W,f,g],t.find(a=>{t.find(([,,,,n,r])=>{m=mag(x=a[4]-n,y=a[5]-r)+1,m<40&&(stroke(a),line(a[4]+=cos(B=atan2(y,x)),a[5]+=sin(B),n,r))}),circle(a[4],a[5],4)})};//#つぶやきProcessing pic.twitter.com/QcD9XXecWe
— Naoto HIÉDA (@naoto_hieda) March 29, 2020

はぅ君さんの作品

float x,y,i,t,N;
void setup(){size(720,720);}
void draw(){
clear();
t+=.1;
for(y=-180;y<900;y+=60)
for(x=0;x<780;x+=60)
for(i=60;i>0;i-=9)
arc(x+sin(t+(N=noise(x,y-int(9*t/120)*120)*99))*30,y+(9*t)%120+N,i,i/2,-PI/8+i/15+t+N,PI/8+i/15+t+N);
}#つぶやきProcessing pic.twitter.com/OD0PNhdbW0
— はぅ君 (@Hau_kun) May 24, 2020

　こんな少ないコードで花びらが舞うような表現を実現されています。 arc 関数で描画しているのは分かるのですが、なぜこのような表現になるのか…一見しただけでは分からない作品です。

すごすぎます。

ntsutae さんの作品

#つぶやきProcessing #p5js
t=0,draw=_=>{t++?copy(0,0,w,w,0,1,w,w):createCanvas(w=720,w)
for(x=720;--x;){
stroke(abs(t+((x-t)^(x+t))**3)%997<97?w:0);point(x,0)}} pic.twitter.com/Fi7WGHicYf
— ntsutae (@ntsutae) June 5, 2020

　こんなに短いコードで、回路図のようにも見える模様が生成され続けるとは、なんとも不思議です。

#つぶやきProcessing #p5js
//from https://t.co/0RshkQtxBb
t=0
draw=_=>{t+=.01
createCanvas(700,350);noStroke();fill(0)
pixelDensity(1/7) //important
scale(7)
for(i=0;i<100;i++){for(j=0;j<50;j++){
rect(i,j,(sin(j*j+i/j-t*7)+cos(j**5-i/j*6+t)**3)*j/50,1)
}}} pic.twitter.com/EXFLKCuUcX
— ntsutae (@ntsutae) February 25, 2020

　これも、もう何が何やら。なんでこんなに短いコードで波が表現できるの？不思議です。

　ツィート内でも言及されておられますが、もともとは yonatan さんの作品からの移植のようです。

https://www.dwitter.net/d/10765

　もうひとつ ntsutae さんの作品から：

#つぶやきProcessing #p5js
C=0,draw=_=>{C||createCanvas(W=720,W,WEBGL)+noStroke(T=createGraphics(W,W))
T.clear(background(W))
for(y=0;y<31;y++)for(x=0;x<30;x++)T.fill(noise(x-y,C*.1)*256)+T.rect(x*24,y*24-C%24,17,17)
rotateY(++C*.01);rotateX(C*.005)
texture(T);torus(400,300)} pic.twitter.com/xKWfUHTn2K
— ntsutae (@ntsutae) March 8, 2020

これ、ちょっと分かりにくいかもしれませんが、 rect で真っ直ぐな長方形を書いているだけなのに、トーラスの表面上には「いい感じ」に歪んだ、手書きのような風合いの長方形が並んでいます。

　私自身は p5js はあまり良く知らないのですが、 p5js ならではの技法を使っているのでしょうか？そういう意味でも、すごすぎて良くわからない作品のひとつです。

　ちなみにこの作品は、スゴイというだけでなく、作品そのものの好きです。個人的に好きな作品の方に入れようか、どうしようか悩んだのですが、こちらの技術的にスゴイ作品としてリンクを張るようにしました。

#つぶやきProcessing #p5js
t=0
draw=_=>{t++||createCanvas(w=720,w).textSize(60)
background(0).stroke(w),j=t%(w+100)
for(x=-30;x<w;x+=3.5){
text("s",x,y=w/2+sin((x+t)/50)*x/3)
x<j&&j-x<100&&rect(x+10,y-40,12,16)}} pic.twitter.com/kLCnJ2RUgo
— ntsutae (@ntsutae) May 19, 2020

　こちらの作品も凄いです。プログラムは短いのに、複雑な表現が実現されています。プログラムをみても、もう何がなにやら…すごすぎます。

nasana さんの作品

function setup(){createCanvas(w=360,w);x=w/2;y=x;a=0;r=90;c=r;angleMode(DEGREES);colorMode(HSB,w);background(0);noStroke();}function draw(){if(c==r){c=0;s=random(2)>1?6:-6;}c+=6;a+=s;x+=sin(a)+cos(a*s);y+=cos(a)+sin(a*s);fill(x,y,w);circle(x,y,5)};#つぶやきProcessing #p5js pic.twitter.com/mAxawEubaj
— nasana (@nasana_x) February 13, 2020

　ヒルベルト曲線の一種であるような気もするのですが、詳細不明です。

この作品も、このコード量でなぜ生成されるのか、訳が分かりません。凄いです。