Develop Reference

three.js / anime.js / gltfloader - i can't target imported objects - fiddle

UPDATE: In the interest of clarity I have made a fiddle, using two pre-exsisting fiddles that produces the same problem.
Desired result: I would like the imported object to be targetable in the same way that 'cube' is.
Here is the scroll animation fiddle.
Notice how it adresses 'cube' in cube.position in the timeline:
timeline.add({
targets: cube.position,
x: 100,
y: 25,
z: -50,
duration: 2250,
update: camera.updateProjectionMatrix()
})
Here is the object fiddle. - this works as expected.
Here is my mixed fiddle.
In my mixed fiddle - If i try to swap out cube.position for mesh.position in the timeline - it throws an undefined error.
Same?/Similar question on three.js discourse

I got what i wanted by:
1) Creating an addMesh function and calling it in initThree()
2) Creating a mesh = gltf.scene.children
3) Creating a meshGroup from mesh
4) Targeting meshGroup inside of anime.js timeline
timeline.add({
targets: meshGroup.position,
x: 100,
y: 25,
z: -50,
duration: 2250,
update: camera.updateProjectionMatrix()
})
It works here.

Drawing an arc in phaser and apply tween to reduce its length within 5 second

Hey I want to draw a circle with phaser v2.3.0 and reduce it uniformly by applying tween on it.
It should look like this. But starting from a full circle perimeter(kind of hollow disk with some thickness at the perimeter) and reduce its perimeter uniformly withing 5 second.
You can take help with this example
As I am new to phaser so I am able to understand it or if you can give me simple example or solution, it would be better.
Thanks in advance

I got the answer
var GameState = {
update: function () {
this.graphics.clear();
this.graphics.lineStyle(6, 0xffffff);
this.graphics.arc(40, 90, 20, 0,
game.math.degToRad(this.angle.max), true, 128);
this.graphics.endFill();
}
create: function () {
this.graphics = game.add.graphics(0, 0);
this.world.bringToTop(this.graphics)
this.angle = { min: 0, max: 0 };
this.roundArcTween = this.add.tween(this.angle).to({ max: 360 }, 5000);
}
}

physics.js attractors, zero gravity and slowing down velocity

I've been experimenting with attractors in physics.js, rigging up a simple object in zero gravity, with an attractor at a point. This creates a great little 'gravity well' as can be seen here.
Where the simple square vector attracts towards a point, at 'x':200,'y':200, and then orbits around it. I'm looking for a way to turn this attractor into more of a gravity well, so that the objects attracted to it slow down over time and eventually settle static and stationary at the point of the attractor, until it was collided with or dragged with the mouse again. Is this a possibility?
Currently the object is created with:
var bodies = [Physics.body('convex-polygon', {
// place the center of the square at (0, 0)
x: 150,
treatment : 'dynamic',
cof: 0.01,
mass : 1,
y: 100,
vertices: [
{ x: 0, y: 0 },
{ x: 0, y: 200 },
{ x: 200, y: 200 },
{ x: 200, y: 0 }
]
})];
The attractor is created thusly:
var attractor = Physics.behavior('attractor', {
order: 0,
strength: 0.0005
}).applyTo(bodies);
attractor.position({'x':200,'y':200});
Affecting the strength of the attractor doesn't appear to help, it just changes the speed of the attraction and subsequent orbit.
I'm looking for a way, in effect, to add friction to the entire space, which I think will do the job in naturally slowing down the object so it ends up stationary at the attractor point. Not sure how to go about this with PhysicsJS.

There is the possibility to create your own Attractor-Behaviour: See this documentation.
If you don't want to that, you can set the option min of the attractor to the size of the polygon, so the forces stops, when the body is at the center of the attractor. Strength and order are optional options, so you don't need to specify them (According to the API). For example this should work for you:
world.add(Physics.behavior("attractor", {
min: 200,
pos: {"x": 200, "y": 200}
}));

Animating the drawing of a line in the canvas with fabric.js

I can draw a line in the canvas using:
var myLine = new fabric.Polyline([{x:200,y:200},{x:200,y:200}])
var canvas = new fabric.Canvas('c');
canvas.add(myLine);
However, I want to animate the drawing. I tried:
myLine.animate("points","[{x:200,y:200},{x:10,y:10}]",{onChange: canvas.renderAll.bind(canvas)})
But it's not working, and I couldn't see any way to animate the drawing of the line using fabric.js - I know I can use canvas methods directly but I am curious is fabric.js offers something more concise.

I made a jsFiddle based on http://fabricjs.com/polygon-animation/ and I change it into a fabricjs Polyline. You can set the start and end values from here:
var startPoints = [
{x: 1, y: 1},
{x: 2, y: 2}
];
var endPoints = [
{x: 1, y: 1},
{x: 200, y: 200}
];

No solution suited me so far so here a js-fiddle with what i came up with. Its based on the prev solution by Nistor Christian:
I Made a simple function which accepts the Canvas (in case you want to use this on more than one canvas), color, the original Line-Koordinates (StartXY, EndXY) and the new Line-Koordinates (NewStartX,NewStartY).
function animateLine(canvasInstance,color,
startX,startY,endX,endY,
newStartX, newStartY,newEndX,newEndY)

How to create ad-hoc tweens sequence without recursion in KineticJS?

is it possible to create tweens sequence in KineticJS according to data saved in array without recursion?
This is my current solution including recursion:
function tweenFunc( image )
{
setGlobalCoordinates();
tween = new Kinetic.Tween({
node: image,
duration: 1,
x: x,
y: y,
rotation: rot,
onFinish: function(){
if ( counter++ < arr.length )
{
tweenFunc( image );
}
}
});
tween.play();
}
I would like to have solution which creates tweens before first animation and following tweens start from final position of predecessor.
This project includes animation of 4 images in the same time for many position sequence.