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.

Countdown animation circular - CreateJS / EaselJS / TweenJS

I am quite new with createJS - I want to achieve like a countdown timer animation:
I stumbled upon this issue which have this fiddle - I want to achive something like this but I want to create an arc shape:
I tried adjusting the code and changed the point values but it only gave me a diamond one instead of a perfect curve.
Do I need to point every values to achieve a perfect circle like:
points = [{x: 50, y: 0}, {x: 51, y: 1}, {x:52, y: 2}, ...etc]
Or is there other way (maybe a function or plugin) that does this stuff? I wasn't able to find anything on their documentation

You might be interested in using an arc() graphic, along with the EaselJS "Command" approach to graphics:
1) Create a full arc
var s = new createjs.Shape().set({x:100,y:100});
s.strokeCmd = s.graphics.s("red")
.ss(10,"round")
.arc(0,0,80,0,Math.PI*2)
2) Store off the last "command"
var cmd = s.command; // This will be the arc command
3) Set the command endAngle to 0. You can do this in the arc() method too
cmd.endAngle = 0;
4) In your animation, increment the endAngle over time. In this example I normalize 100 to mean 100% of the radius (Math.PI*2)
var index = 0;
function tick(event) {
index += 1; // Fake Percent
cmd.endAngle = index/100 * Math.PI*2;
stage.update(event);
}
Here is a quick fiddle: https://jsfiddle.net/lannymcnie/pgeut9cr/
If instead you just want to animate the circle over a fixed period, you can tween the endAngle value. Here is an example using TweenJS: https://jsfiddle.net/lannymcnie/pgeut9cr/2/
createjs.Tween.get(cmd)
.to({endAngle:Math.PI*2}, 2000, createjs.Ease.quadInOut);
Cheers,

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}
}));

Use a variable for Highcharts yAxis.Max

Im trying to pass a variable('maxValue') into my Highcharts guage . I cant get the variable to pass in successfully, the graph renders but without the value.
Ive tried Number and parseInt Functions but neither make a difference.
I setup a JS fiddle here: http://jsfiddle.net/d5d4cgbe/16/
The code section in question:
var maxValue = 120; //set the maxValue var
$('#visitPerformanceWeek').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: maxValue,
title: {
text: 'Hours Worked'
}
},
I will eventually be passing a value collected from an AJAX request, this part I have working but have excluded from the fiddle to keep it simple. Help appreciated

For setting the maxValue dynamically, something like setExtremes should do it. Try
chart.yAxis[0].setExtremes(0,maxValue);
Another alternative is the update method:
chart.yAxis[0].update({ max: maxValue });
For the maxValue to be displayed by the solidgauge, you need to specify a tickerInterval which divides into the maxValue. Presently, the chart is generating a default tick interval e.g. 10, which adds up to 100. For example, a maxValue of 120, you may set the tickInterval to 12
yAxis: {
min: 0,
max: 120,
tickInterval: 12,
...
}
JSFiddle

Check here : http://jsfiddle.net/d5d4cgbe/23/
you can set value using following command :
chart.yAxis.max = maxValue;
check browser console for yAxis value.

Getting the Jcrop coordinates back into Jcrop through javascript variable?

If I set a variable like this:
var coords = jcrop_api.tellSelect();
It returns my current Jcrop selections coordinates in an x,y,x2,y2,h,w format.
Now if I want to set my coordinates back to that, I could go:
jcrop_api.animateTo(coords)
But the animateTo function only takes an array of 4, [x, y, w, h]
When I try to do the above way, it eventually breaks the code.
So how do I change my variable coords to fit this format?
Thanks

The API functions you mention at least at the 0.9.12 version of the plugin..
jcrop_api.tellSelect() returns an object like this:
{
x: 0,
y: 0,
x2: 10,
y2: 10,
w: 10,
h:10
}
and jcrop_api.animateTo needs one array like [x,y,x2,y2], so, try this:
var c = jcrop_api.tellSelect();
jcrop_api.animateTo([c.x,c.y, c.x2, c.y2]);