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

2020年3月7日

#つぶやきProcessingのまとめ。先々月と先月は緩く縛りを入れていたので、今月は自由に制作する方針で進めました。

後半はベジェ曲線や線で文字を作る技法を見つけた（BezierGlyphと勝手に命名）ので少し深堀してみました。

2020年2月はPCD2020が開催されていたので、#つぶやきProcessingを布教した月でもありました。（PCD2020 参加レポートはこちらの記事になります。）

float t;
void setup(){size(720,720);textSize(240);}
void draw(){
clear();
t+=.1;
for(int i=0;i<15;i++){
resetMatrix();
translate(i%5*130+100,230*(i/5+1));
scale(cos(noise(i,int((i+t)/TAU))>.5?i+t:TAU),1);
text("P C DTokyo2020 ".charAt(i),-75,0);
}
}#つぶやきProcessing #PCD2020 pic.twitter.com/RdpNCTyxMP
— はぅ君 (@Hau_kun) January 31, 2020

PCD2020開催！

int x,y,i,t;
void setup(){
size(720,720);
noStroke();
}
void draw(){
clear();
t++;
for(x=0;x<=720;x+=20)
for(y=-50+t%50*((x/20%2)==0?1:-1);y<770;y+=50)
for(i=-15;i<15;i++)
circle(x+sq((360-y-i)*.03)*-cos(PI*x/720.0),y+i+x/20%2*25,10);
}#つぶやきProcessing pic.twitter.com/MONSTQ0nWG
— はぅ君 (@Hau_kun) February 1, 2020

PCD2020の会場の椅子の背もたれ部分の模様からインスピレーションを得て作成

int x,y,i,t,n;
void setup(){size(720,720);colorMode(HSB);noStroke();}
void draw(){
clear();
t++;
for(y=-80;y<=720;y+=80)
for(x=0;x<=720;x+=80)
for(i=-15;i<15;i++){
fill((x+t)%255,abs(255-(n=y+t%80+i)%510),255);
circle(x+noise(x*.1,n*.1)*50,n,8);
}
}#つぶやきProcessing pic.twitter.com/Qy8RQUsasR
— はぅ君 (@Hau_kun) February 3, 2020

うねうね

float t,r;
void setup(){
size(720,720);
colorMode(HSB);
clear();
}
void draw(){
t+=.01;
for(r=0;r<TAU;r+=PI/15){
fill(r*40,128,255);
circle(sin(t*3)*cos(r+t)*300+360,sin(t*2)*sin(r-t)*300+360,50);
}
copy(this.get(),0,0,720,720,1,1,718,718);
}#つぶやきProcessing pic.twitter.com/E2yi53xX9D
— はぅ君 (@Hau_kun) February 4, 2020

copy()で画面をわずかに縮小していくことで、疑似的に奥行きのある映像ができる。

int m,n,A=270,B=180;float t,i;
void setup(){size(720,720);}
void draw(){t+=.005;
for(i=0;i<400;i++){fill(99,99,noise(i)*255);circle(i%20*36,i/20*36,10);}
for(i=0;i<TAU;i+=PI/2)
copy(this.get(),(m=int(cos(t+i)*A))+A,(n=int(sin(t+i)*A))+A,B,B,m+B,n+B,360,360);
}#つぶやきProcessing pic.twitter.com/aYlR4zi4l2
— はぅ君 (@Hau_kun) February 5, 2020

copy()で拡大鏡のようなものを作っていたらいい感じになったモノ。

float[][] p=new float[9][4];
int i,t;
void setup(){
size(720,720);
}
void draw(){
translate(360,360);
t++;
for(i=1;i<9;i++){
square(p[i][0]+=p[i][2],p[i][1]+=p[i][3],3);
if(t%(i*6)==0){
p[i][2]=((int)random(2))*2-1;
p[i][3]=((int)random(2))*2-1;
}
}
}#つぶやきProcessing pic.twitter.com/sx5EXzrR22
— はぅ君 (@Hau_kun) February 6, 2020

それぞれ異なった間隔で90度曲がる矩形が描く模様。

float t,h,a,x,y;
void setup(){size(720,720);}
void draw(){clear();t+=.2;translate(360,360);circle(-310,h+=(a+=.1),40);for(int i=0;i<99;i++){circle(x=cos(i)*((t+i)%99)*5,y=sin(i)*((t+i)%99)*5,9);if(dist(x,y,-310,h)<25)background(-1);}}void mousePressed(){a=-3;}#つぶやきProcessing pic.twitter.com/L4iuOuS2hk
— はぅ君 (@Hau_kun) February 7, 2020

PCD2020以降、FlappyBirdと弾幕の作品をよく見かけるのでMIXしてみたもの。
混ぜるな危険。

float t,i;
void setup(){
size(720,720);
colorMode(HSB);
clear();
}
void draw(){
t+=.01;
for(i=0;i<4;i++){
fill((t*20+i*64)%255,192,255);
circle(i<2?sin(t+i*PI)*360+360:(i-2)*720,i>1?cos(2*t+i*PI)*360+360:i*720,9);
}
copy(this.get(),0,0,720,720,1,1,718,718);
}#つぶやきProcessing pic.twitter.com/Nd2EsI7Ctc
— はぅ君 (@Hau_kun) February 8, 2020

これもcopy()で全体を縮小していくもの。カラフルな廊下のようなものが出来上がる。

void setup(){size(720,720);}
void draw(){f(0,0,720,0);}
void f(float x,float y,float s,int d){
if(d<9){
float n=noise(x,y,frameCount*.001)*255;
if(n>d*25)
for(int i=0;i<4;i++)
f(x+i%2*s/2,y+i/2*s/2,s/2,d+1);
else{
fill(0,255-n,n,8);
square(x,y,s);
}
}
}#つぶやきProcessing pic.twitter.com/XAWv75M4Sd
— はぅ君 (@Hau_kun) February 9, 2020

再帰で矩形を描画していくもの。SimCityみたい。

float t,r;
void setup(){size(720,720);}
void draw(){t+=.01;f(360,360,720,0,0);}
void f(float x,float y,float s,int d,float a){
if(d<6){circle(x,y,s);
for(int i=1;i<5;i++){
fill((d+i)*25);f(cos(r=t+a+PI/2*i)*s/3.5+x,sin(r)*s/3.5+y,s/2.5,d+1,a+sin(t*d*d*i));
}}}#つぶやきProcessing pic.twitter.com/zjXzfk44l2
— はぅ君 (@Hau_kun) February 10, 2020

昨日は再帰で矩形を作ったので、本日は円を再帰させたモノ。

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

適当に動く円の軌跡。fill(64,8)の矩形を全体にかけると、軌跡の残像がいい感じに残る。
ファンタジーの世界の本で、表紙の次のページとかに描いてありそう。

float x,y,t,c;
void setup(){size(720,720);colorMode(HSB);}
void draw(){
fill(0,2);
square(0,0,720);
t+=3;
if(t%99==0){
x=random(720);
y=random(720);
c=random(255);
}
translate(x,y+t%99);
rotate(t*.1);
fill(color(c,192-t%99,255));
square(-10,-10,20);
}#つぶやきProcessing pic.twitter.com/lfyMF5iQE9
— はぅ君 (@Hau_kun) February 12, 2020

昨日と同じ手法に色を付けてみたもの。色が失われていくけど微妙に残っている様がいい感じ。

float x,y,t,r,T;
void setup(){size(720,720);colorMode(HSB);}
void draw(){fill(0,2);square(0,0,720);fill(noise((int)(t/49))*255,128,255);if((T=t%49)==0){x=random(720);y=random(720);}for(r=0;r<TAU;r+=PI/5)circle(2*cos(r)*T+x,2*sin(r)*T+y,cos(T/49*PI/2)*30);t++;}#つぶやきProcessing pic.twitter.com/xGSDeoTazU
— はぅ君 (@Hau_kun) February 13, 2020

昨日のものを花火状にしてみたもの。朽ちていく感じがわびさび。

float t;
void setup(){size(720,720);}
void draw(){fill(0,1);square(0,0,720);fill(-1);t+=.01;translate(360,360);scale(sin(t));rotate(t);clip(-260,-260,520,520);for(int i=0;i<81;i++){resetMatrix();translate(i%9*80,i/9*80);rotate(i*.1+t*3);square(-36,-36,72);}}#つぶやきProcessing pic.twitter.com/Ha2rleWpBL
— はぅ君 (@Hau_kun) February 15, 2020

clip()を使って何かできないかなと模索していたらできたモノ

float t;int i;
void setup(){size(720,720);colorMode(HSB);}
void draw(){
t+=.1;
fill(0,8);
square(0,0,720);
clip(0,(t%9)*90-90,720,9);
for(i=0;i<81;i++){
fill((i*t)%255,255,255);
resetMatrix();
translate(i%9*90,i/9*90);
rotate(t);
square(-30,-30,60);
}
}#つぶやきProcessing pic.twitter.com/RASDQEJwrt
— はぅ君 (@Hau_kun) February 15, 2020

本日もclip()を使用。
現実世界でも暗い部屋でレーザーみたいな光を照射すると同じ事ができると思う。

float t;
void setup(){size(720,720);colorMode(HSB);}
void draw(){fill(0,2);square(0,0,720);fill(64);t+=.04;shearX(t);shearY(t*.7);clip(0,0,520,520);for(int i=0;i<81;i++){stroke(i*3,255,255);resetMatrix();translate(i%9*90,i/9*90);rotate(t);square(-35,-35,70);}}#つぶやきProcessing pic.twitter.com/Egu94rdfsQ
— はぅ君 (@Hau_kun) February 16, 2020

clip()とfill(0,2)の組み合わせ。
残った個所が色鉛筆で描いたような、手書きっぽくなるところがお気に入り。

float d,r,t;
void setup(){size(720,720,P3D);}
void draw(){hint(DISABLE_DEPTH_TEST);noStroke();t+=.01;for(d=199;d>0;d-=9){for(r=0;r<TAU+1;r+=PI/6){resetMatrix();translate(0,0,-99);rotateY(t+d);fill(0,192-d,64);box(d,d,.1);}}}#これを見た人は緑色の画像を貼れ #つぶやきProcessing pic.twitter.com/RChq7bJUlN
— はぅ君 (@Hau_kun) February 16, 2020

気になるハッシュタグを見つけてしまい、血が騒いでしまったモノ。

float t,r,d,i,j;
void setup(){size(720,720);noStroke();}
void draw(){
fill(0,8);
square(0,0,720);
fill(64,255,99);
t+=.01;
for(j=0;j<12;j++){
r=j*TAU/12+t;
d=500;
for(i=40;i>0;i–){
circle(cos(r)*d+360,sin(r)*d+360,i/4);
d-=8+noise(j,t)*6;
r+=i*.001;
}
}
}#つぶやきProcessing pic.twitter.com/octFPwXCEc
— はぅ君 (@Hau_kun) February 17, 2020

渦の軌跡が残るモノ。noise()ですこし揺れる。

float[] p=new float[720];float t,R;
void setup(){size(720,720);}
void draw(){clear();t+=.01;for(int d=0;d<720;d+=2)circle((p[d]+=(cos((R=radians(d/2+t))*int(noise(int(t))*9))-p[d])/9)*300+360,(p[d+1]+=(sin((R)*int(noise(int(t),9)*9))-p[d+1])/9)*300+360,9);}#つぶやきProcessing pic.twitter.com/0oTLAlRXyL
— はぅ君 (@Hau_kun) February 18, 2020

リサジュー曲線が作りだす模様に周期的に変化していくもの。

float t;
int x,y,n;
void setup(){size(720,720);
fill(128);
strokeWeight(9);
stroke(-1);
}
void draw(){
clear();
t+=.001;
for(y=0;y<9;y++){
for(x=0;x<9;x++){
n=int(noise(x,y,t)*8)%4;
arc(x*80+n%2*80,y*80+n/2*80,80,80,n*PI/2,(n+1)*PI/2);
}
}
}#つぶやきProcessing pic.twitter.com/gQGltxKxaD
— はぅ君 (@Hau_kun) February 19, 2020

arc()がパズルのように組み合わせっていくモノ。

float t;String[]s={"Over","1000","works"};int[]p={110,220,80,450,40,680};void setup(){size(720,720);textSize(230);}void draw(){clear();t+=.03;for(int i=0;i<3;i++){resetMatrix();translate(p[i*2]+tan(t-i)*50,p[i*2+1]);shearX(sin(t*2-i)*.2);text(s[i],0,0);}}#つぶやきProcessing https://t.co/U302gCmMeN pic.twitter.com/721f1pupLm
— はぅ君 (@Hau_kun) February 20, 2020

#つぶやきProcessingに投稿された総作品数が1000を越えたので、記念に作ってみたモノ。
文字に対しshearX()をかけると揺れているような効果を与えることができる。

float t,i,x,y;
void setup(){size(720,720);}
void draw(){
clear();
i=0;
t+=.01;
for(y=0;y<720;y+=48){
for(x=0;x<720;x+=48){
clip(x,y,48,48);
i++;
fill(0,i%6*32+64,(i/6)%6*32+64);
ellipse(360,360,cos(t+i)*540+360,sin(t*2+i)*540+360);
}
}
}#つぶやきProcessing pic.twitter.com/ZUxfyRTFXl
— はぅ君 (@Hau_kun) February 22, 2020

clip()を使って複数の楕円を重ね合わせてみたモノ。

float r,d,i,j,x,y;
size(720,720);
colorMode(HSB);
fill(0,64);
clear();
for(j=0;j<99;j++){
stroke(random(255),96,99,64);
circle(x=random(720),y=random(720),(d=random(80-y*.1))*2);
for(i=0;i<d*299;i++)
point(x+cos(r=random(TAU))*random(d),y+sin(r)*random(d));
}#つぶやきProcessing pic.twitter.com/pPF76ANuhT
— はぅ君 (@Hau_kun) February 22, 2020

サンドアート的なことをやってみたくて試したモノ。
一定範囲にランダムな点を打ちまくる。

float x,y,s,r=0,i,l;
size(720,720);
x=y=360;
colorMode(HSB);
clear();
for(l=0;l<9000;l++){
stroke(l%255,96,192);
if(l%5==0)
r+=int(random(3))*PI/3;
for(i=0;i<19;i++)
point(x+cos(s=random(TAU))*random(5),y+sin(s)*random(5));
x+=cos(r)*6;
y+=sin(r)*6;
}#つぶやきProcessing pic.twitter.com/GvBd59zBYg
— はぅ君 (@Hau_kun) February 22, 2020

引き続きサンドアート的なことをやってみたかったモノ。

float r,d,t,i;
void setup(){size(720,720);colorMode(HSB);clear();}
void draw(){t+=.03;stroke(t*9%255,96,255);for(i=0;i<90;i++)point(cos(r=random(TAU))*(d=random(i/3))+cos(t*.9+i/90)*325+360,sin(r)*d+sin(t*.7+i/90)*325+360);copy(get(),0,0,720,720,1,1,718,718);}#つぶやきProcessing pic.twitter.com/o4Z1oQIjQT
— はぅ君 (@Hau_kun) February 23, 2020

サンドアート的なものとcopy()で縮めていくものを合わせたモノ。
魔法のエフェクトみたい。

int x,y,i;
size(720,720);noFill();strokeWeight(5);for(y=36;y<720;y+=72){line(0,y+36,720,y+36);for(x=18;x<720;x+=36)for(i=0;i<random(7);i++)bezier(x,y+(int(random(3))-1)*26,x-9,y+random(8)-4,x+9,y+random(8)-4,x+(int(random(3))-1)*20,y+(int(random(3))-1)*26);}#つぶやきProcessing pic.twitter.com/yMEycFLR3D
— はぅ君 (@Hau_kun) February 23, 2020

ベジェ曲線を使って文字みたいなものを創ってみたもの。
BezierGlyphと命名。

float r,i,d;
size(720,720);strokeWeight(2);for(d=960;d>9;d-=80)for(r=0;r<TAU;r+=PI/d*5){resetMatrix();translate(cos(r)*d/2+360,sin(r)*d/2+360);rotate(r+PI/2);for(i=0;i<random(3);i++){line(0,0,(int(random(3))-1)*7,(int(random(3))-1)*14);line(-4,-20,4,-20);}}#つぶやきProcessing pic.twitter.com/KEvg4OwN7x
— はぅ君 (@Hau_kun) February 24, 2020

BezierGlyphの技法に直線を使ってみたものを円状に並べたもの。ルーン文字みたい。
外周に行くにつれて文字の数を増やすことで、見た目の文字密度をぱっと見一定にしている。

float x,d,i,a=0,b=0,r;
size(720,720);
for(d=360;d>0;d-=35)
for(r=0;r<TAU;r+=PI/2){
resetMatrix();
translate(360,360);
rotate(r);
for(x=d+15;x<=705-d;x+=12)
for(i=0;i<6;i++)
line(a=i%2==0?x+1-360:a,b=i%2==0?d+1-360:b,a+=int(random(2))*6,b+=int(random(2))*8);
}#つぶやきProcessing pic.twitter.com/CV4sPEZqbE
— はぅ君 (@Hau_kun) February 25, 2020

BezierGlyphの技法で連続する直線を描くようにしてみたもの。古代の文字っぽい。

float r,i;
size(720,720);noFill();for(r=TAU;r<TAU*8;r+=PI/4/(++i+r*.5)){resetMatrix();translate(cos(r)*r*10+360,sin(r)*r*10+360);rotate(r+PI/2);for(i=0;i<random(6);i++){bezier(0,0,0,0,0,random(9),(int(random(3))-1)*8,(int(random(3))-1)*20);line(-3,30,3,30);}}#つぶやきProcessing pic.twitter.com/Dc9pgr0Vhb
— はぅ君 (@Hau_kun) February 26, 2020

BezierGlyphの技法で直線を強くしてみたもの。円はアルキメデスの螺旋を採用。

float t,x,y,r,o;
void setup(){
size(720,720);
}
void draw(){
t+=.01;
for(y=40;y<760;y+=80){
for(x=40;x<760;x+=80){
for(r=0;r<6;r++){
resetMatrix();
translate(x,y);
rotate(r*PI/3+t);
triangle(o=sin(t+x*y)*19+9,o,40,o,o,40);
}
}
}
}#つぶやきProcessing pic.twitter.com/srtlafWYXj
— はぅ君 (@Hau_kun) February 27, 2020

triangle()を円状に並べてみたモノ。

t=0,setup=()=>createCanvas(720,720)+background(0),draw=()=>{for(t+=.2,y=0;y<720;y+=90)for(x=y/90%2*45-90;x<720;x+=90)for(r=0;r<TAU;r+=PI/int(9*noise(x,y)))resetMatrix(),translate(x+45+(N=60*noise(y,x))*cos(r),y+45+N*sin(r)),rotate(r+t),square(9*cos(t),0,10)};//#つぶやきProcessing pic.twitter.com/MTtw4vpubn
— はぅ君 (@Hau_kun) February 28, 2020

@naoto_hiedaさんの「つぶやきProcessing Editor」を使ってみたモノ。

minify()してくれるし、GIFも出してくれるし、とても便利。

float t,x,y;void setup(){size(720,720);noStroke();}void draw(){fill(0,1);square(0,0,720);t+=.01;for(y=0;y<720;y+=20)for(x=0;x<720;x+=20){clip(x,y,18,18);fill(x/3,(x*y+t)%255,255-y/3);ellipse(360,360,cos(t+x+y)*999,sin(2*t+x+y)*999);}}#つぶやきProcessing #ツイッターで楽しむ展覧会 pic.twitter.com/FS7OldcjDy
— はぅ君 (@Hau_kun) February 29, 2020

気になるハッシュタグを（以下略）

float t,r;
void setup(){size(720,720);}
void draw(){t+=.001;fill(255,4);square(0,0,720);for(r=0;r<TAU;r+=PI/6){resetMatrix();translate(cos(r+t)*cos(t*r)*300+360,sin(r+t)*cos(t*r)*300+360);rotate(t*r*9);clip(-60,-60,120,120);circle(0,0,cos(t*10+r)*200);}}#つぶやきProcessing pic.twitter.com/I78UuaFS2N
— はぅ君 (@Hau_kun) February 29, 2020

clip()からはみ出た部分は面白い形を作れる。

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

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

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

関連

コメント

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

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