Metaballs in Processing as vector

Question

Я пытаюсь создать своего рода метабалл, приятные кривые между двумя кругами.

Нечто похожее на изображение, линии рисуются прямо, но также могут быть более изогнутыми. Мне нужны они как вектор в обработке. Кто-нибудь может мне помочь? благодарим заранее!

Пример в 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

Для удовольствия, однако, я решил сделать удар, сделав очень взломанный v ersion примера вы разделяемый просто рендеринг эллипсов в изображение, затем фильтрует изображение в конце:

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. Исходный код доступен.

Если вам нравится Обработка приведенного выше примера, вы можете использовать простой javascript, используя p5.js. Вы найдете большинство знакомых функций от Processing, но также напрямую используйте библиотеку paper.js.