#つぶやきProcessing 2020年1月まとめ

2020年2月2日

#つぶやきProcessingのまとめ。2020年1月はピクセル操作縛りにしてみました。

毎日loadPixels()→for()でyとxについての繰り返し処理→pixels[]へ値を計算→updatePixels()という流れで、ほとんど計算部分の一行しか変わっていませんが、思っていたよりもバリエーションが作れて楽しいものでした。そしてまだまだ可能性がありそうでもありました。

xとyを使った格子パターンと、dist()の距離とatan2()の角度を使った円パターン、およびその組み合わせが主となっています。

float t;
void setup(){size(720,720);}
void draw(){
t+=.02;
loadPixels();
for(int y=0;y<720;y++)
for(int x=0;x<720;x++)
pixels[y*720+x]=color(((255-dist(x,y,360,360)*(noise(x*.01,y*.01,t*.3)>.5?1:-1)*.5)+t*20)%20*12);
updatePixels();
}#つぶやきProcessing pic.twitter.com/OIyZmVJNnl
— はぅ君 (@Hau_kun) January 1, 2020

noise()によって、内側に進むものと外側に進むものを区別してみた

int x,y;float t,n;
void setup(){size(720,720);}
void draw(){
t+=.02;
loadPixels();
for(y=0;y<720;y++){
for(x=0;x<720;x++){
n=noise(dist(x,y,360,360)*.01+t,atan2(360-y,360-x)*2);
pixels[y*720+x]=color(n>.5&&n<.6?255:0);
}
}
updatePixels();
}#つぶやきProcessing pic.twitter.com/tZG0awd7gW
— はぅ君 (@Hau_kun) January 2, 2020

2価化（n<.6?255:0）することでロールシャッハ的な何かになった

float t,n;
void setup(){size(720,720);}
void draw(){
loadPixels();
t+=.01;
for(int y=0;y<720;y++)for(int x=0;x<720;x++)
pixels[y*720+x]=color((dist(x,y,360,360)+(n=noise(x*.01,y*.01,t))*150+sin(atan2(y-360,x-360))*10+n*10+t*10)%50*5);
updatePixels();
}#つぶやきProcessing pic.twitter.com/a8AhgOKevd
— はぅ君 (@Hau_kun) January 3, 2020

%演算子を使うと層を作ることができる

https://twitter.com/Hau_kun/status/1213388927916105728

吸い込まれていく感じが作りたかったので作ってみたモノ

int x,y;float t;
void setup(){size(720,720);}
void draw(){
t+=.0002;
loadPixels();
for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color(((atan2(360-x,360-y)+PI)+noise(x*.01,y*.01,(dist(x,y,360,360)-t*5000)*.01+t)+t)%(PI/16)<PI/32?0:255);
updatePixels();}#つぶやきProcessing pic.twitter.com/grDYHp5d7T
— はぅ君 (@Hau_kun) January 5, 2020

距離や角度にnoise()を使うと、いい感じのずれが現れる

int x,y;float t;
void setup(){size(720,720);}
void draw(){
t+=.004;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color((noise(sin((atan2(360-x,360-y)+PI)*3),t)*noise((dist(x,y,360,360)-t*500)*.01,t))>.2?255:0);
updatePixels();}#つぶやきProcessing pic.twitter.com/X9ELS8BJQP
— はぅ君 (@Hau_kun) January 6, 2020

角度をn倍にすることで繰り返しパターンを作る
家紋のような絵が描かれる

int x,y;float t,a;
void setup(){size(720,720);}
void draw(){
t+=.004;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(noise(sin((a=atan2(360-x,360-y)+PI)*9),((dist(x,y,360,360)-t*500)+a*50)*.01,t)>.5?255:0);
updatePixels();}#つぶやきProcessing pic.twitter.com/vpWc5waAwI
— はぅ君 (@Hau_kun) January 7, 2020

繰り返しごとに少し時差を入れてみた

float t,a,x,y,H=360,P=PI/2;
void setup(){size(720,720);}
void draw(){t+=.004;loadPixels();
for(int i=0;i<518400;i++)
pixels[i]=color(abs(noise(dist(x=i%720,y=i/720,H,H)*.01+t*((a=(atan2(H-x,H-y)+PI)*1.5)%P>P/2?1:-1),sin(a%P),t)*2000%250-125));
updatePixels();}#つぶやきProcessing pic.twitter.com/5h0tspmuMj
— はぅ君 (@Hau_kun) January 8, 2020

外側と内側を区別するものパート2

int x,y;float t,d;
void setup(){size(720,720);}
void draw(){
t+=.004;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(abs(sin(log(d=dist(x,y,360,360))+(atan2(360-x,360-y)+PI+noise(d*.01,t)*2)*2.5+t)*10))*25;
updatePixels();}#つぶやきProcessing pic.twitter.com/4mUDI9Qu0I
— はぅ君 (@Hau_kun) January 9, 2020

log()を使ってみたかったモノ

int x,y;float t,d;
void setup(){size(720,720);}void draw(){t+=.05;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)pixels[y*720+x]=color(((d=dist(x*.1,y*.1,360,360)+t)%5>2?1:0)*((atan2(360-x,360-y)+PI+t*.2+noise(d,t)*.5)%(PI/4)>PI/8?1:0)*255);updatePixels();
}#つぶやきProcessing pic.twitter.com/i36MKqOWO0
— はぅ君 (@Hau_kun) January 10, 2020

扇風機のようなものを作りたくて作ってみたモノ

int x,y;float t;
void setup(){size(720,720);}
void draw(){
t+=.004;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(noise(dist(x,y,360,360)*.01,sin((atan2(360-x,360-y)+PI)*8)*.3,t)%.1*2550);
updatePixels();}#つぶやきProcessing pic.twitter.com/FtLZjyxKpe
— はぅ君 (@Hau_kun) January 12, 2020

対称性があると絵として安定する
繰り返しパターンは対称性を作るのにとても最適

int x,y;float t,d;
void setup(){size(720,720);}
void draw(){
t+=.005;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(abs(tan(noise(d=dist(x,y,360,360)*.01,sin(sin(d+t)*d+(atan2(360-x,360-y)+PI)*3.5),t)*TAU))*255);
updatePixels();}#つぶやきProcessing pic.twitter.com/eAGfSB3l9b
— はぅ君 (@Hau_kun) January 13, 2020

三角関数を二重に使ってみたらとても良い動きになったので気に入ったモノ
時計回りと反時計回りが綺麗にMixされている点も好き

int x,y;float t,d,s;
void setup(){size(720,720);}
void draw(){t+=.01;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)pixels[y*720+x]=color(noise(sin((atan2(360-x,360-y)+PI)*2+(d=dist(x,y,360,360)*.01)*.5-(s=asin(d%1))*.12)*4,s*.01,t-d*4)*255);updatePixels();}#つぶやきProcessing pic.twitter.com/Ij1dBvFqEp
— はぅ君 (@Hau_kun) January 14, 2020

段差を付けて、真上から見た噴水、のようなものを作りたかったモノ

int x,y;float t,m,n;
void setup(){size(720,720);}
void draw(){
t+=.002;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(noise((m=abs((x+(y/90)%2*45)%90-45)*.01)+t,(n=abs(y%90-45)*.01)-t,noise(m,n,t)*10)%.5*500);
updatePixels();}#つぶやきProcessing pic.twitter.com/6i6eS130wq
— はぅ君 (@Hau_kun) January 15, 2020

横の並びは段毎にずれるようにするとちょっとおしゃれに見える

int x,y;float t,o;
void setup(){size(720,720);}
void draw(){
t+=.002;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(sqrt(dist(180,180,x%360,y%360))%1*(noise(abs(x%360-180)*.01,abs(y%360-180)*.01,t)%.2)*1275);
updatePixels();}#つぶやきProcessing pic.twitter.com/GoQs6IoEm6
— はぅ君 (@Hau_kun) January 16, 2020

%演算子で繰り返しパターンを作って4分割してみたモノ

int x,y;float t;
void setup(){size(720,720);}
void draw(){
t+=.005;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(log(dist(120,120,x%240,y%240))%(x/180+y/180)*(noise(abs(x%240-120)*.1,abs(y%240-120)*.1,t)%.4)*200);
updatePixels();}#つぶやきProcessing pic.twitter.com/3SALQdGZh4
— はぅ君 (@Hau_kun) January 17, 2020

領域ごとに明るさを定義して、noise()をテクスチャ的に貼ったようにしてみたもの

int x,y;float t,c;
void setup(){size(720,720);}
void draw(){
t+=.05;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color((c=noise((abs(x-y/120%2*t)%120-60)*.05,(abs(y-x/120%2*t)%120-60)*.05,t*.1)%.3)<.1?c*3000:0);
updatePixels();}#つぶやきProcessing pic.twitter.com/ud9pMgRB9i
— はぅ君 (@Hau_kun) January 18, 2020

少しずつずれていくとどうなるかを試してみたモノ
悪くない

int x,y;float t,c;
void setup(){size(720,720);}
void draw(){
t+=.005;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color((c=noise((abs(x%90-y/90%6*15)%90-45)*.05,(abs(y%90-x/90%6*15)%90-45)*.05,t)%.3)<.03?255:0);
updatePixels();}#つぶやきProcessing pic.twitter.com/7pn6hsBciB
— はぅ君 (@Hau_kun) January 19, 2020

noise()の結果を二値化することで、面ではなく線として扱えるようにしてみたもの

https://twitter.com/Hau_kun/status/1219286417697755136

log()や三角関数を使って何か作れないか試してみたもの

int x,y;float t,a;
void setup(){size(720,720);}
void draw(){
t+=.01;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(255*((dist(0,0,x%144-72,y%144-72)%40)+sin((a=atan2(360-y,360-x))*5+t)*25+sin(a*4+t)*25)/270.0);
updatePixels();}#つぶやきProcessing pic.twitter.com/klV49W71t1
— はぅ君 (@Hau_kun) January 21, 2020

いい感じに影っぽい明るさの増減が作れたので、サーチライトのようなものができたモノ

int x,y;float t,a;
void setup(){size(720,720);}
void draw(){
t+=.006;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(192-((dist(40,40,x%80,y%80))*abs(tan((a=atan2(y-360,x-360)+noise(x*.01,y*.01))*3+t)*sin(t+a)*9)));
updatePixels();}#つぶやきProcessing pic.twitter.com/AkEBfgzq0C
— はぅ君 (@Hau_kun) January 22, 2020

等間隔に配置された点がnoise()に基づいて塗られるモノ
煙のように見えるけど、煙同士がぶつかる時は一瞬、氷のように固まったような見え方をする

int x,y;float t,d;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.01;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color(d=dist(0,0,abs(360-x)&byte(noise(t)*255),abs(360-y)&byte(noise(t,1)*360)),192,d<30?0:99);
updatePixels();}#つぶやきProcessing pic.twitter.com/xPgmfi8QmW
— はぅ君 (@Hau_kun) January 23, 2020

&演算子でビット演算してみたもの
グリッチのような効果になった

int x,y,F=255;float t,a;
void setup(){size(720,720);colorMode(HSB);}void draw(){t+=.002;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)pixels[y*720+x]=color(a=(atan2(abs(360-y)&byte(noise(t)*F),abs(360-x)&byte(noise(t,9)*F)))*F,F,a%25<1?0:F);updatePixels();}#つぶやきProcessing pic.twitter.com/HQblElGWtq
— はぅ君 (@Hau_kun) January 24, 2020

昨日はdist()による距離を活用したモノだったので
本日はatan2()による角度を使ってみたモノ

int x,y,H=360;float t;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.003;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color((dist(0,0,H-x,H-y)+atan2(y-H,abs(x-H))*(int(noise(x*.01,y*.01,t)*720)&63))%255,H,H);
updatePixels();}#つぶやきProcessing pic.twitter.com/Bj6L61896K
— はぅ君 (@Hau_kun) January 25, 2020

中心から配置された虹色が、noise()によってよい感じにずれているもの
色のついた油が混ざり合っているかのよう

int x,y,H=360;float t,d;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.002;
loadPixels();
for(y=0;y<720;y++)
for(x=0;x<720;x++)
pixels[y*720+x]=color(d=dist(0,0,H-x,H-y)/2,255-(d*(int(noise((x-H)*.01,(y-H)*.01,t)*21)&21))%255,H);
updatePixels();}#つぶやきProcessing pic.twitter.com/6VJAycQxJM
— はぅ君 (@Hau_kun) January 26, 2020

HSBモードのcolor()の第二引数は、白色化できるので、輝きを表現できる
加算合成と違い、単色で輝かせられるのが利点

int x,y,H=360;float t,d;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.1;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)pixels[y*720+x]=color(d=(((atan2(abs(H-y)&int(t),abs(H-x)&int(t))+PI)%.7*324)+dist(H,H,x,y))%255,255-d,255);updatePixels();}#つぶやきProcessing pic.twitter.com/MzfMt5kHBm
— はぅ君 (@Hau_kun) January 27, 2020

&演算子でビット演算をしてみたモノ
ある意味二進数の可視化

int x,y,t;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t++;
loadPixels();
for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color((((x%255)&(y%255))+t)%255,200,255);
updatePixels();
}#つぶやきProcessing pic.twitter.com/x3WGfQiF6i
— はぅ君 (@Hau_kun) January 28, 2020

座標の論理積を取ると、綺麗なマス目ができるので色を付けてみたモノ

int x,y;float t;
void setup(){size(720,720);}
void draw(){t+=.01;
loadPixels();
for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color((dist(72,72,x%144,y%144)/.2*(noise(atan2(360-y,360-x)%(PI/16)*5+t,x*.01,y*.01)))%85)*3;
updatePixels();
}#つぶやきProcessing pic.twitter.com/YpSu1Nff4O
— はぅ君 (@Hau_kun) January 29, 2020

分割した領域で鏡のような効果が出たモノ

int x,y;float t,a,b,c;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.005;loadPixels();
for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color(c=noise(a=abs(x%144-72)*.02,c=abs(y%144-72)*.02,a*b+t)*765%255,192-c%128,255-c%128);updatePixels();}#つぶやきProcessing pic.twitter.com/cNHu4Aa1Fj
— はぅ君 (@Hau_kun) January 30, 2020

値を765%255で3層に分けてみたもの。
領域の厚みが小さくなるので模様として見やすくなった

int x,y,H=360;float t;
void setup(){size(720,720);colorMode(HSB);}
void draw(){t+=.003;loadPixels();for(y=0;y<720;y++)for(x=0;x<720;x++)
pixels[y*720+x]=color(noise((45-dist(H,H,x,y)%90)*.01,PI/8-(PI+atan2(H-y,H-x))%(PI/4),t)*765%255,192,160);
updatePixels();}#つぶやきProcessing pic.twitter.com/ZM3OSE4ZWj
— はぅ君 (@Hau_kun) January 31, 2020

昨日はx,yによる格子パターンだったので、
本日はdist()とatan2()で円パターンにしてみたモノ

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

#つぶやきProcessing 2020年1月まとめ

関連

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル