We Keep Coding

How to get the x position of the Facebook AR hand tracker?

For hand trackers, their patch has info X, Y, and Z and when a hand is tracked there are values that appear. How do i get those value via script? is it possible? There aren't any hand tracking script examples.
I have the following so far to determine if a hand is detected, still not sure about getting the position:
//im assuming this is the correct module
const HandTracking = require('HandTracking');
const Scene = require('Scene');
//this is to check if a hand is detected
HandTracking.count.monitor().subscribe(function(e){
if(e.newValue){
Debug.log("hand found");
}
})
UPDATE
So im assuming it has something like this :
var thehand = HandTracking.hand(0);
var posx = thehand.cameraTransform.x.lastValue;
Debug.log(posx);
But this way is deprecated? need to use subscribeWithSnapshot but I'm not sure how to implement this.
Also it needs to be dynamic(?) because the value changes with every movement.

You are on the right track, what you need is simply:
var posx = thehand.cameraTransform.x;
This will give you a signal for the hand x position. To debug this value you can use:
Diagnostics.watch("hand x",posx);
A signal is a value that changes over time, and it can be bound to another object property, for example:
mySceneObject.transform.x = thehand.cameraTransform.x;
This will bind the hand x position signal to the object x position, so that the object will move with the hand.
Read more about signals here: https://developers.facebook.com/docs/ar-studio/scripting/reactive
They are a very powerful tool and essential knowledge for scripting in AR Studio.
Hope this helps!

Is there a Move towards function in three.js

I am new to three.js. I was wondering if there is a function like move towards from unity in it? A function that we can use to move our object from it's current position to some Vector3.
Thanks.

I actually managed to solve this.
Here it is for anyone else stuck on this.
But you have to make sure that the object is a child of a THREE.Group and you move the THREE.Group instead of the object because the function doesn't behave right if the object's rotation is changed.
var targetPosition = new THREE.Vector3(x,y,z);
var objectToMove;
var group = new THREE.Group();
group.add(objectToMove);
var targetNormalizedVector = new THREE.Vector3(0,0,0);
targetNormalizedVector.x = targetPosition.x - group.position.x;
targetNormalizedVector.y = targetPosition.y - group.position.y;
targetNormalizedVector.z = targetPosition.z - group.position.z;
targetNormalizedVector.normalize()
Then you can use this line anywhere to move the object towards the target position.
group.translateOnAxis(targetNormalizedVector,speed);
This will work similar to the Vector3.MoveTowards function in unity. Just make sure the rotation of the THREE.Group is always set to 0 on x,y and z.

Pixi.js how do you use moveTo with an OOP object?

I create a rectangle and a square object with an OOP method.
Next, i would to move my rectangle in an another position. I use the function moveTo.
My rectangle move but from its creation position and not from an absolute position.
What do I have to specify to move this rectangle to x=100,y=100 ?
var container = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(320, 480,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
requestAnimationFrame( animate );
var blue= 0x00c3ff
var red = 0xFF0040
var SHAPE={}
SHAPE.geom = function(posx,posy,width,height,color) {
PIXI.Graphics.call(this,posx,posy,width,height,color);
this.beginFill(color);
this.drawRect(posx,posy,width,height)
}
SHAPE.geom.prototype = Object.create(PIXI.Graphics.prototype);
SHAPE.geom.prototype.constructor = SHAPE.geom;
var square=new SHAPE.geom(10,10,10,10,red)
var rect=new SHAPE.geom(200,400,80,30,blue)
rect.moveTo(100,100)
container.addChild(square,rect);
function animate() {
requestAnimationFrame( animate );
renderer.render(container);
}

Check the PIXI docs for moveTo: https://pixijs.github.io/docs/PIXI.Graphics.html#moveTo
It moves the DRAWING position to some coordinates, not the actual already existing object. So if you would use moveTo and after that draw with the graphics object, it should draw starting from that position. At least in theory (I have not used moveTo ever).
You should use the objects .x, .y or .position properties for setting where you want the display object to reside inside parent container. So something like:
rect.x = 100;
rect.y = 100;
or
rect.position = new PIXI.Point(100, 100);
If there are any issues, please let me know and I will make a plunkr for you to give you a working example. I do not have the time for that now unfortunately.
Also in general it is a good idea to make simple examples like this in plunkr, jsfiddle or something equivalent. Then the person answering you can easily modify your code and show you a surely working example. It will be better for both.

Famo.us: How can I programmatically animate the position of a Scrollview?

I can directly set the position with myScrollview.setPosition(y), or apply a motion manually with myScrollview.setVelocity(delta). However, is there a way to apply a smooth, precise easing transition to the position of a Scrollview? Thanks!

Alternatively you can use the FlexScrollView which uses a physics spring to smoothly pull the scroll-position to the new position. It also has an extended API for setting the scroll position:
https://github.com/IjzerenHein/famous-flex/blob/master/docs/FlexScrollView.md
https://github.com/IjzerenHein/famous-flex/blob/master/docs/ScrollController.md
https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md
https://github.com/IjzerenHein/famous-flex

Here's what I settled on (there's probably a better way to do this):
var self = this; // current view object
var transitionTime = 500; //ms
// How far do we need to move every 16.67 ms (1/60th of a second)?
self.animatedScrollDelta = (self.myScrollview.getPosition() / (transitionTime / 16.6667));
self.animatedScroller = Timer.every(animateScrollerCallback, 1);
function animateScrollerCallback()
{
var pos = self.myScrollview.getPosition() - self.animatedScrollDelta;
self.myScrollview.setPosition(Math.max(0, pos));
if(pos < 0)
Timer.clear(self.animatedScroller);
}
Note: This animates linearly, which was what I needed. I'm sure other easing formulas could be implemented using a TweenTransition.

How do I animate a protovis streamgraph?

I'm having trouble figuring out how to animate a protovis streamgraph. I think the best way is to simply pass an array of i, j indexes to .layers() and have the .x() and .y() functions look up the actual updating values. Is there a simpler way?

Couldn't you just update the data before every render? Assuming that the data has changed, I'm not sure I see the benefit to doing it otherwise, as I think the whole vis will need to re-render.
function getData(offset) {
// get/create your data here, maybe seeded with an offset
}
var offset = 0;
// ... define scales and stuff
var vis = new pv.Panel()
.width(w)
.height(h);
vis.add(pv.Layout.Stack)
// wrap in a function to re-evaluate on render
.layers(function() getData(offset))
.offset("wiggle")
.x(x.by(pv.index))
.y(y)
.layer.add(pv.Area);
// use setInterval to animate
setInterval(function() {
offset++; // still working on the offset idea
vis.render();
}, 20);
This seems to work, though it really depends what kind of animation you're looking to create - there may be more efficient approaches for some kinds of animation.