型くりこ「Difference Overlapping/差分重ね」について

2023年1月4日2023年1月5日

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

「Difference Overlapping/差分重ね」について

blendMode(DIFFERENCE)を指定した状態で図形をたくさん重ねながら描くことで複雑な模様を表現する技法です。

図形を重ねた部分の色が反転するため、複数重ねることでテクスチャのように使うこともできますし、単純な模様として扱うこともできます。

使い方

blendMode(DIFFERENCE)を指定すると、色が重なった部分の色が反転します。

これを利用し、図形を重ねて描いていきます。なおbackground()する際には、いったんblendMode(BLEND)に戻す必要があります。そうしないと、background()のによって画面全体の色が反転してしまうためです。

Java版の場合、P2DモードだとblendMode(DIFFERENCE)がサポートされていないので注意が必要です。

void setup(){
  size(720, 720);
  background(0);
  blendMode(DIFFERENCE);
  
  for(float r = 0; r < TAU; r+= PI /16){
    circle(cos(r) * 100 + width / 2, sin(r) * 100 + height / 2, 100);
  }
}

function setup(){
  createCanvas(720, 720);
  background(0);
 blendMode(DIFFERENCE);
  
  for(var r = 0; r < TAU; r+= PI /16){
    circle(cos(r) * 100 + width / 2, sin(r) * 100 + height / 2, 100);
  }
}

円をぐるっと一周分並べた場合に、そのままの状態と`blendMode(DIFFERENCE)`を使用した状態との比較。
重なった部分の色が反転することで思いもよらなかった模様となる。

例

型くりこ「Difference Overlapping/差分重ね」を使って、たくさんの図形を重ねて描いてみた例。

blendMode(DIFFERENCE)はbeginShape()～endShape()で描いた図形にも適用されます。簡単に複雑な模様を描くことができます。

void setup() {
  size(720, 720);
  noStroke();
}

void draw() {
  blendMode(BLEND);
  background(0);
  blendMode(DIFFERENCE);
  int direction = 1;
  
  for (float r = 0; r < TAU; r+= PI / 10) {
    beginShape();
    for (float length = 0; length < 360; length += 10) {
      float offset = (noise(frameCount / 200f - length / 50) - 0.5) * 2 * direction;
      vertex(cos(r + offset) * length + width / 2, sin(r + offset) * length + height / 2);
    }
    endShape();
    
    direction = -direction;
  }
}

function setup() {
  createCanvas(720, 720);
  noStroke();
}

function draw() {
  blendMode(BLEND);
  background(0);
  blendMode(DIFFERENCE);
  var direction = 1;

  for (var r = 0; r < TAU; r+= PI / 10) {
    beginShape();
    for (var length = 0; length < 360; length += 10) {
      var offset = (noise(frameCount / 200 - length / 50) - 0.5) * 2 * direction;
      vertex(cos(r + offset) * length + width / 2, sin(r + offset) * length + height / 2);
    }
    endShape();

    direction = -direction;
  }
}

応用編

たくさん図形を並べて動かすと面白い模様が現れてきます。

型くりこ「Difference Overlapping/差分重ね」を使って、複数の円を描き、noise()でわずかに回転させてみた例。

円が重なった部分が少し複雑な模様となり、単純な円ではなく生き物の脚のようにも見えてくる。

void setup() {
  size(720, 720);
}

void draw() {
  blendMode(BLEND);
  background(0);
  blendMode(DIFFERENCE);

  for (float length = 0; length < 360; length += 10) {
    for (float r = 0; r < TAU; r+= PI / 8) {
      float offset = noise(frameCount / 100f - length / 100f) / 3;
      circle(cos(r + offset) * length + width / 2, sin(r + offset) * length + height / 2, 20);
    }
  }
}

function setup() {
  createCanvas(720, 720);
}

function draw() {
  blendMode(BLEND);
  background(0);
  blendMode(DIFFERENCE);

  for (var length = 0; length < 360; length += 10) {
    for (var r = 0; r < TAU; r+= PI / 8) {
      var offset = noise(frameCount / 100 - length / 100) / 3;
      circle(cos(r + offset) * length + width / 2, sin(r + offset) * length + height / 2, 20);
    }
  }
}

その他作品

型くりこ「Difference Overlapping/差分重ね」の考え方を使った作品をいくつか紹介いたします。

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

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
blendMode(BLEND)
background(0)
blendMode(DIFFERENCE)
noStroke()
push()
circle(360,360,W)
drawingContext.clip()
for(i=0;i<9;i++)for(r=0;r<TAU;r+=PI/8)circle(cos(r)*(D=180)+360,sin(r)*D+360,(90+sin(t+i/9)*9)*i)
pop()}#つぶやきProcessing pic.twitter.com/DPOcrp2poo
— はぅ君 (@Hau_kun) May 25, 2021

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
colorMode(HSB)
B=blendMode
B(BLEND)
background(0)
B(DIFFERENCE)
for(r=0;r<TAU*9;r+=.05-r*.0008)fill(noise(r/4)*W%360,70,W)
+circle(cos(R=r+noise(r+t))*(D=r*(9+sin(r*3-t*2)**9))+360,sin(R)*D+360,TAU*(3+sin(r*4+t)))}#つぶやきProcessing pic.twitter.com/Gk8sNIY7R2
— はぅ君 (@Hau_kun) July 17, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
B=blendMode
B(BLEND)
background(F=1)
B(DIFFERENCE)
for(r=0;r<TAU+!(F=-F);r+=PI/6)for(i=0;i<69;)circle(cos(R=r+bezierTangent(0,0,0,sin(noise(i/30-t)-.5),sin(i/99+t))*F)*(L=i*8*noise(i/69-t))+360,sin(R)*L+360,70-i++)}#つぶやきProcessing pic.twitter.com/IyZBpDAYeP
— はぅ君 (@Hau_kun) July 16, 2022

float t,r,d,R,D;
void setup(){size(720,720);}
void draw(){
clear();
t+=.001;
blendMode(DIFFERENCE);
for(r=0;r<TAU;r+=PI/22)
for(d=550;d>99;d-=9)
circle(cos(R=r+(noise(r,d*.01+t*5)-.5)*.5)*(D=d-(sin(noise(r*3,t)*9)*99))+360,sin(R)*D+360,d/15);
}#つぶやきProcessing pic.twitter.com/PYwVf3Jtnf
— はぅ君 (@Hau_kun) October 2, 2020

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
B=blendMode
B(BLEND)
background(F=1)
B(DIFFERENCE)
noStroke()
for(r=0;r<TAU;r+=PI/18){
beginShape()
F++
for(d=0;d<420;d+=9)vertex(cos(R=r+noise(d/200-t,t)*(L=F%6-2.5))*(D=d*L/3)+360,sin(R)*D+360)
endShape()}}#つぶやきProcessing pic.twitter.com/OB1mWDUVzW
— はぅ君 (@Hau_kun) September 29, 2022

float t,r,d,n,S;
void setup(){size(720,720);}
void draw(){
clear();
t+=.004;
blendMode(DIFFERENCE);
for(r=0;r<TAU;r+=PI/8){
for(d=n=0;d<300;d+=9){
circle(cos(r+(n+=(noise(r,d*.01-t*3)-.5)*.2))*d*(S=sin(t+n*2)*.2+1)+360,sin(r+n)*d*S+360,sin(d*.01)*30);
}
}
}#つぶやきProcessing pic.twitter.com/aOg7ysqhoQ
— はぅ君 (@Hau_kun) September 29, 2020

float t,r,d,N;
void setup(){size(720,720);}
void draw(){
clear();blendMode(DIFFERENCE);
t+=.02;for(r=0;r<TAU;r+=PI/8)for(d=0;d<160;d+=5)circle(cos(r+(N=d*d*(noise(r,t/9)-.5)*.0001))*d*(sin(N)+2)+360,(sin(r+N))*d*(sin(N)+2)+360,sin(r+d*.05-t)*40*cos(d*.04+N));}#つぶやきProcessing pic.twitter.com/AZt6AA1wAJ
— はぅ君 (@Hau_kun) September 30, 2020

t=0,setup=()=>{createCanvas(192,157),noStroke()},draw=()=>{for(t+=.005,(B=blendMode)(NORMAL),background(0),B(DIFFERENCE),i=0;i<6;i++)for(d=0;d<72;d+=4)ellipse(cos(N=noise(i,t-.002*d)*TAU*2)*d+96+30*cos(t),sin(N)*d+90,9-sqrt(d))};//#tinycode @CCodeMadrid #p5t #つぶやきProcessing https://t.co/1z8BVZUlEv pic.twitter.com/LyWdbtiq00
— はぅ君 (@Hau_kun) December 4, 2020

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

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

型くりこ「Difference Overlapping/差分重ね」について

「Difference Overlapping/差分重ね」について

使い方

例

応用編

その他作品

関連

コメント

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

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