2

理論的に単純な効果を実行しようとしています。たとえば、窓の周りで跳ねる 2 つの白い円があります。それらが交差するとき、次のように、交差している円の部分を黒くし、残りの円は白のままにしたい:

交差する 2 つの円盤。交差部分は黒、その他はすべて白

これを行う方法はありますか？

これまでのところ、私はこれを持っています:

for(int i = 0; i < balls.length; i++)
{
    balls[i].move();
    for(int j = 0; j < balls.length; j++)
    {
        if(i != j && balls[i].intersect(balls[j]) && !changed[i] && !changed[j])
        {
            balls[j].swapColor();
            changed[j] = true;
        }
        else
            changed[j] = false;
    }
    balls[i].display();
}

しかし、交差すると円が完全に黒くなりますが、交差点自体を変更したいだけです。

編集:ブレンド作業をよりよく見るために、マゼンタと赤の2つの200x200 pngでblend()を使用してみました。ただし、blend() パラメータは、円を正しく配置するのに役立たないようです。

void setup() {
  size(300, 300);
  background(255);
}

void draw() {  
  PImage img = loadImage("circle.png");
  PImage img2 = loadImage("circle2.png");

  img.blend(img2,0,0,200,200,10,10,200,200,DIFFERENCE);
  image(img,0,0);
  image(img2,50,50);
}

私にこれを与える：

処理中に重なり合う 2 つの円

4

5 に答える 5

3

ここで、これを試してみてください。これは、PImage の代わりに 2 つの PGraphics を使用するブレンド アプローチです。簡単な例。編集:基本楕円が重なっていると、上隅に奇妙なアーティファクトがありますが、理由はありません...探しています。見つかったら、ここに投稿します。EDIT2: アンチエイリアスに関連しているようです。 Smooth() をスキップすると、アーティファクトはなくなります...

PGraphics c;
PGraphics d;
void setup() {
  size(300, 300);
  background(255);
  c = createGraphics(width, height, JAVA2D);
  d = createGraphics(width, height, JAVA2D);
  c.beginDraw();
  c.smooth();
  c.endDraw();
  d.beginDraw();
  d.smooth();
  d.endDraw();
}

void draw() {  
  background(255);
  c.beginDraw();
  c.background(0, 0);
  c.fill(255);
  c.stroke(0);
  c.ellipse(mouseX, mouseY, 30, 30);
  c.endDraw();

  d.beginDraw();
  d.background(0, 0);
  d.fill(255);
  d.stroke(0);
  d.ellipse(width/2, height/2, 30, 30);
  d.endDraw();
  d.blend(c, 0, 0, width, height, 0, 0, width, height, DIFFERENCE);
  image(d, 0, 0);
}
于 2012-11-28T22:33:54.963 に答える
2

残念ながら、現在実行可能なサンプルを提供することはできませんが、視覚効果のためにblend()関数を使用できます(おそらくDIFFERENCEモードで)。

createGraphics btwを使用して、楕円を PImage に描画できます。

于 2012-11-28T16:33:33.853 に答える
1

これを行う面白い方法を考えました。次のコードで新しいスケッチを作成し、キャンバス内でマウスを動かします。

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

void draw() {
  background(0);

  int c1x = width/2;
  int c1y = height/2;
  int c2x = mouseX;
  int c2y = mouseY;

  int d = 100;

  boolean intersect = false;
  if(dist(c1x, c1y, c2x, c2y) < d) intersect = true;

  fill(255);
  stroke(0);
  ellipse(c1x, c1y, d, d);
  ellipse(c2x, c2y, d, d);
  noFill();
  ellipse(c1x, c1y, d, d);

  stroke(0, 0, 255);
  line(c1x, c1y, c2x, c2y);

  stroke(255, 0, 0);
  if(intersect) stroke(0, 255, 0);
  rectMode(CORNERS);
  int mx = (c1x+c2x)/2;
  int my = (c1y+c2y)/2;
  int r = d/2;
  rect(mx-r, my-r, mx+r, my+r); 

  if(intersect) {
    for(int j = my-r; j <= my+r; j++) {
      for(int i = mx-r; i <= mx+r; i++) {
        if(dist(i, j, c1x, c1y) <= r && dist(i, j, c2x, c2y) <= r) {
          stroke(0);
          point(i, j);
        } 
      }
    }   
  }
}

これはコンセプトを示す汚いモックアップです。2 つの円の中心点はわかっています。幅と高さが円の直径に等しい正方形を想像し、その正方形を 2 つの円の中間点に配置します。円がぶつかると、その正方形内の各ピクセルをチェックし、ピクセルが両方の円内にある場合は、そこに点を描画します。

同じ直径の円を使用して単純化しましたが、可変直径に変更するのは簡単です。

円交差塗りつぶしのスクリーンショット

明らかに、緑の四角と青の線を描く必要はありません。これらは参考用です。

于 2012-11-29T21:07:27.397 に答える
0

それらの中心間の距離がそれらの半径の合計よりも小さい場合、それらは交差します

于 2012-11-28T16:20:10.673 に答える
0

これは、白い交点と背景を持つ暗い楕円で、迅速で汚れていますが機能します。

背景が白の場合:

background(255);

次のように呼び出します。

  blendMode(SUBTRACT);
  fill(0);
  ball1.display();
  fill(255);
  ball2.display();

その背後にある数学を見たい場合は、このリンクをチェックしてください。toxiclibs.geom のようなライブラリでもこれを行うことができると思います。

于 2012-12-01T09:30:46.647 に答える