Metaballs在处理中作为矢量

Question

我试图在两个圆圈之间创造一种元球，漂亮的曲线。

像图像一样，线条是直线绘制的，但也可以更弯曲。我需要它们作为Processing中的向量。有人能帮帮我吗？ 提前谢谢！

paperjs中的示例： http://paperjs.org/examples/meta-balls/

图像： http://www.smeulders.biz/tmp/metaballs.png

void setup() {
  size(500,500);
  ellipse(100, 250, 100, 100);
  ellipse(350, 250, 200, 200);
}
void draw() {}

Answer 1

通过一些数学运算（对于圆之间的锻炼距离）和一些像素操作来根据这些计算出的距离设置像素颜色，您可以渲染2D元球并plenty of examples

为了好玩，我决定通过简单地将椭圆渲染成图像，然后在最后过滤图像来制作一个非常hacky版本的共享示例：

PGraphics pg;//a separate layer to render into
int dilateAmt = 3;
PImage grid;//pixels of the grid alone, minus the 'cursor'

void setup(){
  size(400,400);
  //create a new layer
  pg = createGraphics(width,height);  
  pg.beginDraw();
  //draw a di-grid inside
  pg.background(255);
  pg.noStroke();pg.fill(0);
  for(int y = 0 ; y < 5; y++)
    for(int x = 0 ; x < 5; x++)
      pg.ellipse((y%2==0?40:0)+(x * 80),40+(y * 80), 40, 40);
  pg.endDraw();
  //grab a snapshot for later re-use
  grid = pg.get();
}
void draw(){
  pg.beginDraw();
  //draw the cached grid (no need to loop and re-render circles) 
  pg.image(grid,0,0);
  //and the cursor into the layer
  pg.ellipse(mouseX,mouseY,60,60);
  pg.endDraw();
  //since PGraphics extends PImage, you can filter, so we dilate
  for(int i = 0; i < dilateAmt; i++) pg.filter(DILATE);
  //finally render the result
  image(pg,0,0);
}
void keyPressed(){
  if(keyCode == UP) dilateAmt++;
  if(keyCode == DOWN) dilateAmt--;
  if(dilateAmt < 1) dilateAmt = 1;
  println(dilateAmt);
}

请注意，最终结果是栅格，而不是矢量。

如果要实现确切的效果，则需要将示例从JavaScript移植到Java。源代码可用。

如果你喜欢处理上面的例子，你可以使用p5.js使用普通的javascript。您可以在Processing中找到大多数熟悉的函数，但也可以直接使用paper.js库。