#つぶやきProcessing 2020年3月まとめ 2020 4/06 コンピュータ Processing つぶやきProcessing 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でトランプが定義されていたので使ってみたモノ。 関連 コンピュータ Processing つぶやきProcessing URLをコピーしました! コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 新しいコメントをメールで通知 新しい投稿をメールで受け取る Δ このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメント