5

For a metaball animation like this one: http://paperjs.org/examples/meta-balls/ I am creating a path in snap.svg that connects two circles. It looks like this:

<path d="M171 370 C207, 335, 493 335, 529 370 C493, 335, 493 264, 529 229 C493, 264, 207 264, 171 229 z"></path>
  1. What would be better: to redraw the path on each frame or to manipulate it?
  2. How can I manipulate the path? (i.e. move the points and control points around)

If it were more than two circles, I suppose redrawing would be the way to go.

gang
  • 1,758
  • 2
  • 23
  • 36
  • 1
    Have you got a function that calculates the paths ? You can always put it up on a jsfiddle for people to play around with and test. My gut instinct would be to try and keep any redraws etc in a format that the rest of any animation on the screen has (hard to tell if this is part of another project, or just standalone). You could probably just change the d attribute as the mouse event changes or whatever. Its hard to tell without seeing what code you have already . – Ian Jan 13 '14 at 11:03

1 Answers1

2

Just update the d attribute of the path.

<path id="p" d="M171 370 C207, 335, 493 335, 529 370 C493, 335, 493 264, 529 229 C493, 264, 207 264, 171 229 z"></path>

First Select the path if it is not already stored in a variable:

var path = Snap("#p");

Then update:

path.attr({
    d: newD
});
gang
  • 1,758
  • 2
  • 23
  • 36