型くりこ「Posterize Blur/ポスタライズブラー」について

2024年1月7日

型くりこについてはこちらをご覧ください。

「Posterize Blur/ポスタライズブラー」について

p5.jsのv1.8から高速化されたfilter(BLUR)とfilter(POSTERIZE)を組み合わせて、液体や粘性のある流体のような表現を行う技法です。

色同士が液体やメタボールのように繋がったり、色が狭い部分は広い部分の色に徐々に侵食されていったりと一風変わった面白い効果が得られます。

v1.7以前のp5.jsやJavaモードではfilter(BLUR)の処理が低速で実用性に難があるため、使うにはp5.jsのv1.8以上である必要があります。本記事でもその前提で記載いたします。

p5.jsのバージョンの確認方法

p5.js Editorを使用している場合は、ファイルメニュー（①）を展開し、index.html（②）を開き、その中にあるp5.jsのパスの階層（③）にバージョン番号が記載されています。

下記例では1.9.0が使われていることがわかります。

それ以外のエディターを使用している場合も、同じような記述をどこかでしているはずなので、探してみていただければと思います。

使い方

filter(BLUR)とfilter(POSTERIZE)を続けて使用します。

1 2	filter(BLUR); filter(POSTERIZE);

BLURフィルター

filter(BLUR)すると、描画した内容（色）が周囲にぼやけるようになります。

POSTERIZEフィルター

filter(POSTERIZE)すると、描画した内容（色）のグラデーションを単純化します。

上側が黒から白までのグラデーションを描いた長方形。下側はそれをfilter(POSTERIZE)したもの。
グラデーションが4段階に単純化されている。

なお、filter(POSTERIZE)の第二引数で、何段階に単純化するか設定できます。省略した場合のデフォルトは4なので、上図では4段階に単純化されています。

BLURフィルターとPOSTERIZEフィルターの組み合わせ

filter(BLUR)した後に、filter(POSTERIZE)を行うことで「ぼやけた状態」のグラデーションが「単純化」されます。その結果、「色が似ている箇所が緩やかに繋がりながら、周りの色に侵食されていく」という効果が得られます。

標準状態、filter(BLUR)を行った状態、filter(BLUR)とfilter(POSTERIZE)を行った状態の比較。

例

型くりこ「Posterize Blur/ポスタライズブラー」を使って、5つの円の大きさを変えながら回転させてみた例。

円の軌跡がだんだんと消えて行ったり、円が大きくなった時、液体やメタボールのように白色の部分が繋がったりします。

function setup(){

createCanvas(720, 720);

background(0);

noStroke();

angleMode(DEGREES);

}

function draw(){

background(0, 10);

for(i = 50; i < 300; i += 50){

circle(cos(frameCount * 2) * i + 360,

sin(frameCount * 2) * i + 360,

frameCount % 45);

}

filter(BLUR);

filter(POSTERIZE);

}

応用編

色はRGB（赤、緑、青）のそれぞれの要素で繋がっていきます。

上段は両方の円とも赤色が共通であるため近づいた際に繋がる。
中段の赤色と青色の円は、共通の色が無いため、近づいても繋がりはしない。
下段の赤色と黄色は、赤の要素が共通である（黄色はRGBで表現すると（255, 255, 0）である）ため、赤色の部分のみ繋がる。

その他作品

型くりこ「Posterize Blur/ポスタライズブラー」の考え方を使った作品をいくつか紹介いたします。

#つぶやきProcessing になってしまっているので、コードは圧縮されている箇所が多いですが、基本的な考え方は本記事に記載した内容と同等です。

t=0
P=[]
draw=_=>{t++||createCanvas(W=720,W)+background(0)
colorMode(HSB)
noStroke()
N=a=>noise(t%3,t/W,a)
F=filter
P[t%W]={x:N(0)*W,y:N(9)*W,r:N(5)*99,c:t%3*120}
P.forEach(e=>fill(e.c,W,W)+circle(e.x+=cos(e.r)*3,e.y+=sin(e.r)*3,15))
F(POSTERIZE)
F(BLUR)}#つぶやきProcessing pic.twitter.com/qhN53cUSOx
— はぅ君 (@Hau_kun) November 6, 2023

t=0
P=[]
draw=_=>{t++||createCanvas(W=720,W)
colorMode(HSB)
background(0,.1)
noStroke()
R=random
P[t%W]={x:t*2%W,y:W,a:R(2)-1,b:-R(9),s:45,c:t%360}
P.forEach(e=>fill(e.c,W,W)+circle(e.x+=e.a,e.y+=e.b+=.05,e.s*=.99))
filter(BLUR)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/mwY24DV1dn
— はぅ君 (@Hau_kun) November 15, 2023

t=0
P=[]
draw=_=>{t++||createCanvas(W=720,W)+background(0)
colorMode(HSB)
noStroke()
P[t%W]={x:X=t%2*W,y:W,a:t%2*-2.6+1.3,b:-random(5.2),c:(X/4+t/6)%360,s:40}
P.forEach(e=>fill(e.c,W,W)+circle(e.x+=e.a,e.y+=e.b+=.02,e.s*=.993))
filter(BLUR)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/dvUhB1EKmF
— はぅ君 (@Hau_kun) November 20, 2023

t=0
draw=_=>{t++||createCanvas(W=720,W)+background(0)
noStroke()
F=1
for(r=0;r<TAU*2;r+=PI/8)fill(C=r>TAU?W:0)+circle(cos(R=r+(F=-F)*noise(T=t/(C?60:15),C)*9)*(D=noise(T,C,9)*360)+360,sin(R)*D+360,(S=sin(t/30))*30)
filter(BLUR,S**4*9)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/JG8RqgkaiA
— はぅ君 (@Hau_kun) December 2, 2023

t=0
draw=_=>{t++||createCanvas(W=720,W)+background(0)
colorMode(HSB)
X=360
for(x=Y=0;x<W;x++)strokeWeight(x/60+3)+stroke(t%360,W,C=(S=sin(t/9))>0?W:0)+line(X,Y,X+=(noise(x/99,t)-.5)*4,Y++)
fill(C)
circle(X,Y,40)
filter(BLUR,S=abs(S)*4+1)
filter(POSTERIZE,S)}#つぶやきProcessing pic.twitter.com/7zg9ltanwf
— はぅ君 (@Hau_kun) December 7, 2023

t=0
P=[]
draw=_=>{t++||createCanvas(W=720,W)+background(0)
colorMode(HSB)
noStroke()
P[t%W]={x:X=random(W),y:0,c:t/4%360}
P.forEach(e=>fill(e.c,W,W)+circle(e.x+=cos(R=noise(e.x/99,e.y/99,t/99)*PI),e.y+=sin(R),9))
filter(BLUR)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/lRlKv5FZsx
— はぅ君 (@Hau_kun) November 14, 2023

t=0
P=[]
draw=_=>{t++||createCanvas(W=720,W)+background(0)
colorMode(HSB)
noStroke()
P[t%W]={x:360,y:800,c:t*99%360,s:90,a:(noise(t/2)-.5)*20,b:0}
P.forEach(e=>fill(e.c,85,W)+circle(e.x+=e.a*=.97,e.y+=e.b-=.1,e.s*=.985))
filter(BLUR,9)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/TE4XsgZC8r
— はぅ君 (@Hau_kun) November 16, 2023

t=0
draw=_=>{t++||createCanvas(W=720,W)+background(0)
F=1
colorMode(HSB)
noStroke()
fill(t%360,W*cos(t/4)+1,W*sin(t/9)+1)
for(r=0;r<TAU;r+=PI/8)circle(cos(R=r+(F=-F)*noise(t/99)*9)*(D=noise(t/49,9)*360)+360,sin(R)*D+360,25)
filter(BLUR)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/y1rIswsFkL
— はぅ君 (@Hau_kun) November 21, 2023

t=0
draw=_=>{t++||createCanvas(W=720,W)+background(A=1)
colorMode(HSB)
noStroke()
for(r=0;r<12.5;r+=PI/6)fill(F=r>6?0:W)+circle(cos(R=r+(A=-A)*noise(T=t/29,F))*(D=noise(T,F,9)*300)+360,sin(R)*D+360,60*sin(r*6+T))
filter(BLUR,sin(t/20)**8*9)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/oVjBqgMNv2
— はぅ君 (@Hau_kun) December 4, 2023

t=0
draw=_=>{t++||createCanvas(W=720,W)
stroke(W)
background(0,40)
strokeWeight(abs(S=sin(t/9))*6+1)
X=Y=360
for(r=0;r<TAU*9;r+=.01)line(X,Y,X=asin(cos(r))*(D=r*9+(noise(r,t/9)-.5)*99)+360,Y=asin(sin(r))*D+360)
filter(BLUR,abs(S)*5)
filter(POSTERIZE)}#つぶやきProcessing pic.twitter.com/r6ZqNtgLwa
— はぅ君 (@Hau_kun) December 8, 2023

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

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