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

2020年4月6日

つぶやきProcessingのまとめ。

和模様にチャレンジした月でした。途中、アルキメデスの螺旋にはまってみたり、後半はdrawingContextを使うためp5.jsを使ってみたりしました。

float r,t,s,z;
void setup(){size(720,720,P3D);noStroke();}
void draw(){clear();lights();t+=.01;for(r=0;r<PI;r+=PI/99){fill(255-9*(z=sin(r+t)*(s=sin(1.9*t+r)*sin(t*r))*99));resetMatrix();translate(cos(r+t)*s*99,cos(1.1*t+r)*99,z-200);rotateZ(t-r);box(3,9,3);}}#つぶやきProcessing pic.twitter.com/b9God1Q6sO
— はぅ君 (@Hau_kun) March 1, 2020

3D上でレンガっぽい形のものを動かしてみたモノ。

float t,x,y;
void setup(){size(720,720);}
void draw(){
clear();
t+=.01;
for(y=0;y<720;y+=40){
for(x=0;x<720;x+=40){
resetMatrix();
translate(x+20,y+20);
rotate(atan2(cos(t*2.9)*300+360-y,sin(t*2)*300+360-x)+PI/2);
rect(-20,-5,40,10);
}
}
}#つぶやきProcessing pic.twitter.com/zvPa3plGXu
— はぅ君 (@Hau_kun) March 2, 2020

マウスカーソルに合わせて矩形が傾くモノ。

int x,y,W=720;
size(720,720);clear();blendMode(32);for(x=0;x<4;x++)for(y=0;y<W;y+=40)circle(x%2*W,x/2*W,y*2);PImage p=get();clear();for(x=0;x<4;x++)circle(x%2*W,x/2*W,W*2);circle(360,360,540);p.mask(get());rect(160,160,400,400,90);image(p,0,0);filter(INVERT);#つぶやきProcessing pic.twitter.com/fuCdNiVKCV
— はぅ君 (@Hau_kun) March 3, 2020

maks()を使って描画範囲を抑制しながらblendMode(DIFFERENCE)で絵を描いてみたモノ。

int i,j,r;
size(720,720);colorMode(HSB);noStroke();for(i=0;i<15;i++){push();translate(i%3*360+i/3%2*180,i/3*180);rotate(PI/4);clip(-128,-128,256,256);for(j=200;j>0;j-=10)for(r=0;r<6;r++){fill((i*99+j)%255,160,255-j/2);circle(cos(r+j)*j,sin(r+j)*j,j);}pop();}#つぶやきProcessing pic.twitter.com/JOP04gade0
— はぅ君 (@Hau_kun) March 4, 2020

clip()で画面を分割してお花のような模様を描いてみたモノ。

float t,r,x,y;
void setup(){
size(720,720);
}
void draw(){
clear();
t++;
for(int i=0;i<121;i++){
if(i%11!=10)
for(r=0;r<TAU;r+=PI/3){
stroke(96,i*2,255-i);
line(i%11*72+(x=cos(r+t)*36),i/11*72+(y=sin(r+t)*36),i%11*72+72-x,(i+1)/11*72-y);
}
}
}#つぶやきProcessing pic.twitter.com/muQqM1Bl7i
— はぅ君 (@Hau_kun) March 5, 2020

線を適当に回転させて独自の模様を創ってみたモノ。

float r,R,y,i,j;
size(720,720);noFill();for(y=0;y<9;y++){for(i=0;i<8;i++)for(r=.2;r<PI;r+=.35){push();translate(cos(R=r+i%2*PI)*50+99*i,sin(R)*50+y*90);rotate(r+1.6);for(j=0;j<3;j++)bezier(random(19)-9,-9,random(9)-4,-19,random(9)-4,19,random(19)-9,9);pop();}}#つぶやきProcessing pic.twitter.com/ctGWjhvdzj
— はぅ君 (@Hau_kun) March 5, 2020

久々にBezierGlyph。曲線に沿って描いてみたモノ。

float r,R=PI/9,x,y,N;
size(720,720);clear();
for(y=30;y<720;y+=60)
for(x=30-((y-30)/60)%2*30;x<750;x+=60){
fill(255,random(255),192);
for(r=0;r<TAU;r+=R*2)
triangle(cos(r-R)*(N=noise(x,y)*40)+x,sin(r-R)*N+y,cos(r)*20+x,sin(r)*20+y,cos(r+R)*9+x,sin(r+R)*9+y);
}#つぶやきProcessing pic.twitter.com/AtFJQUPygh
— はぅ君 (@Hau_kun) March 6, 2020

triangle()を使って花火みたいな模様を描いてみたモノ。

float x,y,i;
size(720,720);clear();stroke(-1);strokeWeight(2);noFill();for(y=0;y<720;y+=60)for(x=y/60%2*30-60;x<720;x+=60)for(i=3;i>0;i–){circle(x+30,y+30,i*8+30);bezier(x+20,y+random(20)+20,x+int(random(3))*9+20,y+i*10+9,x+40,y+i*10+9,x+40,y+random(20)+20);}#つぶやきProcessing pic.twitter.com/2O0xL2gXsz
— はぅ君 (@Hau_kun) March 7, 2020

BezierGlyphの周りに円を描いてシンボルっぽくしてみたモノ。

int[] O={0,0,-9,15,0,30,0,0,-30,15,-9,15,-30,15,-9,15,0,30};
int x,y,i,s=1;
size(720,720);
for(y=-15;y<750;y+=15){
for(x=y/15%2*30;x<780;x+=60){
beginShape(TRIANGLES);
for(i=0;i<36;s=i<19?1:-1)
vertex(x+O[i++%18]*s,y+O[i++%18]*s);
endShape();
}
}#つぶやきProcessing pic.twitter.com/4Vap6R4CZY
— はぅ君 (@Hau_kun) March 8, 2020

和模様その1。「麻の葉」

int x,y;
size(720,720);
for(y=0;y<800;y+=80)
for(x=0;x<720;x++){
stroke(((x+20)/40%2+y/80%2+((x+20)%40==20?0:1))%2==0?#e83929:#f6bfbc);
line(x,y-abs(40-x%80),x,y+80-abs(40-x%80));
}#つぶやきProcessing pic.twitter.com/OTQDcQKItm
— はぅ君 (@Hau_kun) March 9, 2020

和模様その2。「矢絣」（やがすり）

int x,y;float t;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.01;
for(y=0;y<720;y+=9)
for(x=0;x<720;x+=18){
fill(x/3,160,255-abs(cos(t+x))*99);
circle(x+sin(y*.03+x/45*PI+sq(sin(t))*PI*(x/36%2==0?1:-1))*20,y,sin(t+x)*7);
}
}#つぶやきProcessing pic.twitter.com/eBCDZ26K5y
— はぅ君 (@Hau_kun) March 10, 2020

シンプルに波を描いてみたモノ。

float r,t,L=300;
void setup(){size(720,720);noFill();colorMode(HSB);strokeWeight(6);}
void draw(){
clear();
t+=.1;
translate(360,360);
for(r=0;r<TAU*2;r+=PI/9){
stroke(r*20,160,255);
curve(0,0,0,0,cos(abs(r-TAU))*L,sin(abs(r-TAU))*L,cos(r+t)*L,sin(r+t)*L);
}
}#つぶやきProcessing pic.twitter.com/4Njk5V4743
— はぅ君 (@Hau_kun) March 11, 2020

curve()を重ねたら面白い動きになったモノ。

PImage g;float x,y,s,i;void setup(){size(720,720);noStroke();colorMode(HSB,9);}void draw(){if(–s<0){for(i=0;i<9;)circle(x+i*2-9,y+random(30)-15,i++*5+60);g=get();s=40;x=(x+97)%720;y=(y*x+9)%720;}image(g,0,0);fill(noise(x,y)*9,9,9-s*.1);circle(x,y,s*s*.3+80);}#つぶやきProcessing pic.twitter.com/hB9okNtN93
— はぅ君 (@Hau_kun) March 12, 2020

真上からインクを垂らしているイメージで創ってみたモノ。

float t;int x,y,i;
void setup(){size(720,720);noStroke();}
void draw(){t+=.01;background(-1);
for(i=0;i<2;i++){filter(BLUR,i*2);
for(y=0;y<800;y+=80)
for(x=y/80%2*40;x<800;x+=80){
fill(-i,i==0?abs(sin(t+x+y))*128:255);circle(x,y-abs(sin(t+x+y))*i*5,82-i*6);}}}#つぶやきProcessing pic.twitter.com/bE7C5QhAVk
— はぅ君 (@Hau_kun) March 13, 2020

filter(BLUR)の陰で、立体感を表現してみたモノ。

float t,r;
void setup(){size(720,720);stroke(-1);strokeWeight(3);}
void draw(){
clear();
t+=.001;
for(r=0;r<TAU*9;r+=.2-r*.003)
line(cos(r+sin(t*2-r+r/TAU))*r*9+360,sin(r+sin(t*2-r+r/TAU))*r*7+360,cos(r+sin(t))*(r+TAU)*9+360,sin(r+sin(t))*(r+TAU)*7+360);
}#つぶやきProcessing pic.twitter.com/zSwWaQSJfI
— はぅ君 (@Hau_kun) March 14, 2020

アルキメデスの螺旋で何かできないか試してみたモノ。

float t,r,R;
void setup(){size(720,720);noStroke();}
void draw(){clear();t+=.005;scale(9);translate(40,40);for(r=0;r<TAU*9;r+=(R=.2-r*.003))triangle(cos(r)*r,sin(r)*r,cos(r+sin(r*R*t)*.1)*(r+PI),sin(r+sin(r*R*t)*.1)*(r+PI),cos(r)*(r+TAU),sin(r)*(r+TAU));}#つぶやきProcessing pic.twitter.com/qq27Fn29Wk
— はぅ君 (@Hau_kun) March 15, 2020

アルキメデスの螺旋にtriangle()を配置してみたモノ。

float r,t;
void setup(){size(720,720);noStroke();}
void draw(){
clear();
t+=.002;
for(r=0;r<TAU*6;r+=.15-r*.002){
push();
fill(r*7);
translate(cos(r+t)*r*9+360,sin(r+t)*r*9+360);
shearX(r*.8+t);
shearY(r*.8+t);
rotate(r*.3-t);
rect(0,0,r,r*3,r);
pop();
}
}#つぶやきProcessing pic.twitter.com/JuOfvTwacL
— はぅ君 (@Hau_kun) March 16, 2020

アルキメデスの螺旋でshearX()とshearY()を使って、いい感じの動きにならないか試してみたモノ。

float t,r,R;
void setup(){size(720,720);strokeWeight(9);}
void draw(){clear();t+=.0005;for(r=0;r<TAU*9;r+=(R=.2-r*.002)){stroke(r*5);line(cos(r+t)*r*sin(r+r*t)*9+360,sin(r+t*2)*r*9+360,cos(r+t+R)*(r+R)*sin((r+R)+(r+R)*t)*9+360,sin(r+t*2+R)*(r+R)*9+360);}}#つぶやきProcessing pic.twitter.com/GgjKknUZDR
— はぅ君 (@Hau_kun) March 17, 2020

アルキメデスの螺旋を動かしてみたモノ。
複数の縁があるわけではなく、一本の長い線であるところに注目。

float t,x,y,r,N;
void setup(){size(720,720);stroke(-1);strokeWeight(5);}
void draw(){
clear();
t+=.02;
for(y=0;y<772;y+=52)
for(x=y/52%2*90;x<900;x+=180)
for(r=0;r<TAU;r+=PI/3)
line(x,y,cos(N=noise(int((x+y+t)/(PI/3)))>.6?r+x+y+t:r)*58+x,sin(N)*58+y);
}#つぶやきProcessing pic.twitter.com/duQkqSGBHa
— はぅ君 (@Hau_kun) March 18, 2020

線をうまく使って、ひし形が敷き詰められた模様を描いてみたモノ。
回転すると、ひし形が崩れる。

float t,s,r;
void setup(){size(720,720);rectMode(CENTER);noStroke();}
void draw(){
clear();
t+=pow(sin(s),8)*.1;s+=PI/64;
for(r=0;r<TAU*9;r+=.2){push();
translate(cos(r-t)*r*9+360,sin(r-t)*r*9+360);
rotate(r*sin(t*.1)+PI/2);
rect(0,0,r/2,r+(TAU*9-r));
pop();}}#つぶやきProcessing pic.twitter.com/unkE5hIHfv
— はぅ君 (@Hau_kun) March 19, 2020

アルキメデスルの螺旋に沿って矩形を配置して、緩急をつけて回転させてみたモノ。

float t,r,i,R=PI/24,N,W=360;
void setup(){size(720,720);stroke(-1);strokeWeight(2);}
void draw(){clear();t+=.01;for(r=-TAU;r<TAU*9;r+=R)for(i=-1;i<2;i++)
line(cos(r)*r*9+W,sin(r)*r*9+W,cos(r+R*i*(N=2-2*sq(sin(t-r*.03))))*(r+TAU)*9+W,sin(r+R*i*N)*(r+TAU)*9+W);}#つぶやきProcessing pic.twitter.com/ZZjWVslFUx
— はぅ君 (@Hau_kun) March 20, 2020

アルキメデスの螺旋に沿って線を配置して、収縮させることで綺麗な動きを創ってみたモノ。

float r,t,R,P,X,Y;
void setup(){size(720,720);stroke(-1);}
void draw(){clear();t+=.003;
for(r=0;r<TAU*9;r+=PI/48-r*.001)
line((X=cos(r)*r*9+360)+cos(R=r+PI/2+PI/2*pow(sin(t+r+r/TAU),16))*(P=14*log(r)),(Y=sin(r)*r*9+360)+sin(R)*P,X+cos(PI+R)*P,Y+sin(PI+R)*P);
}#つぶやきProcessing pic.twitter.com/PulYdtSmuN
— はぅ君 (@Hau_kun) March 21, 2020

アルキメデスの螺旋に沿って線を配置し、適宜回転させるようにした見たモノ。

float t,x,y,N,S,I;
void setup(){size(720,720);stroke(-1);strokeWeight(2);}
void draw(){clear();t+=.01;S=sin(t%PI)*40;for(y=0;y<720;y+=40)for(x=0;x<720;x+=40)line(x+((N=noise(x,y,I=int(t/PI)))>.6?S:0),N<.4?S+y:y,x+40-((N=noise(y,x,I))>.6?S:0),y+40-(N<.4?S:0));}#つぶやきProcessing pic.twitter.com/e5yhkQkgDQ
— はぅ君 (@Hau_kun) March 22, 2020

線を回転させることで眼色や模様が生成されていくモノ。

t=0,setup=()=>createCanvas(720,720),draw=()=>{for(t+=.01,background(0),noStroke(),fill(48,48,128),(D=drawingContext).shadowBlur=30,D.shadowColor=color(48,48,192),i=0;i<99;i++)circle(720*(N=noise)(i,t),720*N(i,t,5),99*N(i,t,9));filter(POSTERIZE,3)};//#つぶやきProcessing pic.twitter.com/wWZFYgusZh
— はぅ君 (@Hau_kun) March 23, 2020

p5.jsのdrawingContextを使ってみたかったモノ。

t=0,setup=()=>createCanvas(720,720),draw=()=>{for(background(0),noStroke(),t+=.01,fill(85,128,128),(D=drawingContext).shadowBlur=30,D.shadowColor=color(85,160,160),x=0;x<720;x+=15)circle(x,300*(noise(x,t)+sin(.1*x+t))-150+360,90);filter(POSTERIZE,3)};//#つぶやきProcessing pic.twitter.com/okw0kV9Hoo
— はぅ君 (@Hau_kun) March 24, 2020

昨日の結果をもとに、メタボール的なものを創ってみたモノ。
影が多く重なった箇所はfilter(POSTERIZE)で色がつくが、影があまり重ならなかった箇所には色がつかない。

float t,d,N,R,r,S;
void setup(){size(720,720);noStroke();}
void draw(){
clear();
t+=.01;
for(d=0;d<540;d+=9)
for(r=0;r<TAU;r+=PI/4){
fill(255-d/2);
circle(sin(noise(t*.1,d,r)*PI)*cos(R=sin(t-d*.01)/2*PI+r)*d+360,sin(R)*d+360,d/4);
}
}#つぶやきProcessing pic.twitter.com/WM5QDrRTKb
— はぅ君 (@Hau_kun) March 25, 2020

少し周期をずらして円を配置してみたモノ。

int x,y,c;float t,S;
void setup(){size(720,720);clear();noStroke();x=y=360;}
void draw(){fill(c);
rect(x+20-(S=sin(t)*40)/2,y,S,40);t+=.2;
if(t>PI){t=0;
if(random(1)<.5)x=(x+int(random(2))*80+680)%720;else y=(y+int(random(2))*80+680)%720;
c=255-get(x,y)&255;}}#つぶやきProcessing pic.twitter.com/NaEvyxaD6u
— はぅ君 (@Hau_kun) March 26, 2020

状態管理をせず、ピクセル情報を使うことで、白黒反転を実現してみたモノ。

float t,x,y,N,W=60,T;
void setup(){size(720,720);noStroke();}void draw(){t+=.1;for(y=0;y<780;y+=W)for(x=y/W%2*30-W;x<720;x+=W){fill(N=noise(x,y,T=int(t/PI)),N*255,(T*N*999)%255);triangle(N>.6?sin(t%PI)*W+x:x,y,x+W-(N<.4?sin(t%PI)*W:0),y,x+30,y+sin(t%TAU)*W);}}#つぶやきProcessing pic.twitter.com/DF2x0NvUkY
— はぅ君 (@Hau_kun) March 27, 2020

triangle()の使い道を模索してみたモノ。
カーブが描かれるのがチャームポイント。

float t,x,y;
void setup(){size(720,720);noStroke();}
void draw(){
clear();
t+=.01;
for(y=0;y<780;y+=60)
for(x=0;x<720;x+=9)
bezier(x,y+sin(x*.01+t)*50,x+sin(t+(x+y)*.01)*30,y-sin(x*.02-t+y)*30,x+9,y-sin((x+9)*.02-t+y)*30,x+9,y+sin((x+9)*.01+t)*50);
}#つぶやきProcessing pic.twitter.com/z84kMakbHs
— はぅ君 (@Hau_kun) March 28, 2020

bezier()を配置してとげとげした波を描いてみたモノ。

float t,x,y,M,T,W=40;
void setup(){size(720,720);stroke(-1);}
void draw(){
clear();
t+=.05;
for(y=0;y<720;y+=W)
for(x=0;x<720;x+=W)
bezier(x,(M=(x+y)/W%2)==0?y:y+W,x+20+sin(T=t+x+y)*W,y+20+cos(T)*W,x+20+cos(T)*W,y+20+sin(T)*W,x+W,M==0?y+W:y);
}#つぶやきProcessing pic.twitter.com/2Sghm5K8iD
— はぅ君 (@Hau_kun) March 29, 2020

bezierのポイントを外側において、模様を描いてみたモノ。

setup=()=>createCanvas(720,720)+background(255),draw=()=>{for((D=drawingContext).shadowColor=color(0,16),D.shadowBlur=20,d=dist(360,360,mouseX,mouseY),a=atan2(mouseY-360,mouseX-360),f=-1,r=0;r<TAU;r+=PI/4)ellipse(cos(r+a*(f*=-1))*d+360,sin(r+a*f)*d+360,30)};//#つぶやきProcessing pic.twitter.com/yVsJ0Sq0qm
— はぅ君 (@Hau_kun) March 29, 2020

drawingContextで影を付けた対称定規。さらに交互に一部反転もしている。
濃淡のある綺麗な絵が出来上がる。影凄い。

t=0,a=0,W=720,setup=()=>createCanvas(W,W),draw=()=>{for(clear(),t+=4*pow(abs(sin(a+=.0196)),4),textSize(70),x=-80;x<W;x+=80)for(y=0;y<W;y+=80)drawingContext.strokeText((F=String.fromCodePoint)(55399)+F(56652+int(578*noise(x-80*int(t/80),y))),x+t%80,y+60)};//#つぶやきProcessing pic.twitter.com/7RZxsRiE6p
— はぅ君 (@Hau_kun) March 30, 2020

drawingContext.strokeText()で白抜きテキストを描いてみたモノ。
魚編の感じだけど、合成（？）の領域のようなので、常用漢字外。

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

Unicodeでトランプが定義されていたので使ってみたモノ。

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

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

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

関連

コメント

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

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