Questions: Z-Index, changing circle radius, animate between different polygons, and text and image support?

[earthling4211573]

I'm considering using Two.js in a library I'm making, what I've seen so far looks very good, but I have a few questions:

1. How do I set the z-index of polygons?

2. How do I change the radius of a circle? I have some code that uses tween.js to tween/animate a bunch of values, one of those values representing an objects radius, so it goes perhaps from 10 to 20 in steps like 10, 10.5, 11, 11.5, etc. And I need to let two.js use those numbers to change the circles radius, something like:

   • New tween frame with new radius value
   • Change a two.js circle radius using said value
   • two.update()

   How would I go about doing that?

3. Is it possible to easily animate between any two polygons in two.js or at all? E.x. from a rect to a circle and a circle to a rect, or a complex 4 sided polygon to a 7 sided polygon?

4. What's the state of Text and Image support in two.js, is it being developed and is there any predictable time-frame for its release?

Anyway, looking forward to playing around with it more and follow its development, looks sweet!

[jonobr1]

1. The only way to organize rendering order at the moment is to group things with two.makeGroup(poly1, poly2, poly3);. Check out this example as a reference.
2. At the moment the only way to change the radius of a circle is to modify the corresponding Two.Polygon's vertices attribute like so:

_.each(circle.vertices, function(v) {
  v.setLength(radius);
});

You can also fake this by simply changing the scale attribute of the circle. You have to think about your application a little bit differently, but if you're using the svg or canvas renderer this is more efficient than changing verts every frame:

var circle = two.makeCircle(x, y, 5);
circle.scale = 2; // radius is effectively 10

1. Technically it is, but it's not that straightforward. You can use Tween.js to interpolate between a set of vertices and a destination set of vertices. The most important thing to remember is that the polygons need to have the same amount of vertices. This would be some pseudo code with Tween.js assuming shape1 and shape2 have the same number of verts:

var tweens = _.map(shape1.vertices, function(v, i) {
  var u = shape2.vertices[i];
  return new TWEEN.Tween(u)
    .to(u, 1000)
    .start();
});

1. As the overview states, Two.js does not support text of images. There are discussions starting around an image or sprite object that could be implemented, but it's not being actively developed and cannot foresee a timeline for these topics.

Hope that helps!

[earthling4211573]

Thanks! Got z-index to work with groups, changing radius by manipulating vertices was too slow but using scale works fine:

var next_radius = data.r;
var scale = next_radius / polygon.original_radius;
var linewidth = attrs.linewidth / scale;
polygon.scale = scale;
polygon.linewidth = linewidth;

You just have to divide the new radius value with the original radius value and to keep linewidth constant you just divide it with the scale value.

Haven't tried interpolation of vertices yet but I found an example of some complex shape tweening here: http://bl.ocks.org/mbostock/3081153 , going to see if I can implement it in two.js at some point.