加工中的元球作为矢量

问题描述

我正在尝试在两个圆之间创建一种变形球，漂亮的曲线.

类似于图像，线条是笔直的，但也可以更弯曲.我需要它们作为处理中的向量.有没有人可以帮助我?提前致谢！

paperjs 中的示例:

请注意，最终结果是光栅，而不是矢量.

如果您想达到确切的效果，您需要将您的示例从 JavaScript 移植到 Java.源代码可用.

如果您喜欢处理上面的示例，您可以使用 p5.js 使用纯 javascript.您会在 Processing 中找到大部分熟悉的功能，但也可以直接使用 paper.js 库.

i am trying to create a kind of metaball, nice curves between two circles.

Something like the image, the lines are drawn straight but can also be more curved. I need them as a vector in Processing. Does anyone can help me?thanks in advance!

Example in paperjs:http://paperjs.org/examples/meta-balls/

image:http://www.smeulders.biz/tmp/metaballs.png

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

解决方案

With a bit of math (to workout distance between circles) and a bit of pixel manipulation to set pixel colours based on these calculated distances, you can render 2D metaballs and there plenty of examples

For fun however I decided to take a stab at making a very hacky version of the example you shared by simply rendering ellipses into an image, then filtering the image at the end:

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);
}

Note that the end result is raster, not vector.

If you want to achieve the exact effect you will need to port your example from JavaScript to Java. The source code is available.

If you like Processing the above example you could use plain javascript using p5.js. You'll find most of the familiar functions from Processing, but also directly use the paper.js library.

这篇关于加工中的元球作为矢量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！