GSAP with MotionPath and autoRotate not working - gsap

Im using GSAP with MotionPathPlugin and the PixiPlugin to make my square follow a path. I have set autoRotate to true but there seems to be a bug, as you can see in the GIF. Seems like my sprite is over rotating a little bit.
The path is an array of {x, y} values.
I also tried using the array method for autoRotate as such autoRotate: ['x', 'y', 'angle', 90, true], // 4th param is angle in rad
motionPath: {
autoRotate: ['x', 'y', 'angle', 90, true], // 4th param is angle in rad
alignOrigin: [0.5, 0.5],
// autoRotate: true,
align: values,
path: values,
curviness: 0,
},
Thank you for any input.

After a lot of searching I found I need to useRadians: true, in the MotionPath vars option.
gsap.to(sprite, {
motionPath: {
autoRotate: 1.5708,//in radians, offset rotation by 90 degree
path: values,
curviness: 0,
useRadians: true,
},
}

Related

hand-pose model with TensorFlow.js returning `NaN` for scores

Hi there potential helpers, I've been following this guide https://blog.tensorflow.org/2021/11/3D-handpose.html
I seem to have everything setup vaguely correctly
But detector.estimateHands(video) is returning an object with NaN as the score and every coordinate:
[{
handedness: "Right",
score: NaN,
keypoints: [
{x: NaN, y: NaN, name: 'wrist'},
{x: NaN, y: NaN, name: 'thumb_cmc'},
etc...
],
keypoints3d: [
{x: NaN, y: NaN, z: NaN, name: 'wrist'},
etc...
]
}]
The thing that makes me think it's almost working is that it only returns that object if I actually have my hand in front of the webcam. And if I hold two hands up it returns two of these objects. And then if I hide my hands it returns an empty array.
So it is recognising hands, it's just not returning any usable scores.
Here is the essence of the code:
const model = handPose.SupportedModels.MediaPipeHands;
const config = {
modelType:"full",
runtime: "tfjs"
};
const detector = await handPose.createDetector(model, config);
and then in an requestAnimationFrame loop:
const video = shadowRoot.querySelector('video');
const hands = await detector.estimateHands(video);
console.log(hands);
console.log(hands[0]?.score);
I've got all the mentioned npm modules installed
#tensorflow/tfjs
#tensorflow-models/hand-pose-detection
#tensorflow/tfjs-core
#tensorflow/tfjs-converter
#tensorflow/tfjs-backend-webgl
And I've tried playing with config that can be passed into createDetector and estimateHands but with the typescript definitions there's not much choice.
Anyone seen this before and have any idea how to fix it?
Thank you 🙇

c3 charts dynamic bubble size in scatter plot, wrong index

I'm trying to make a chart like with c3.js.
For the bubble size I create an array for each "continent" holding the population as a factor to increase the bubble size. Also the country name is stored in the same manner.
When adding the data points to the chart as well as when adding the bubble sizes/country names to the array, the indices are the same. E.g. col_2[0] in the bubbleInfo array is "China". Also in the data columns col_2[0] and col_2_x[0] are 76 and 12000 which are the values for China.
However, in the section where I dynamically get the bubble radius/country name, the index I get from the function parameter is not the one of the col_2 arrays. Instead I get the index in the order in which the dots are spead along the x-Axis.
E.g. I add for x-Axis China (12000), India(5800), Indonesia(9000) in this order.
I'd expect to get index 1 for India, but I get index 0, because 5800 is the lowest of the x values.
Because of that I cannot properly map the indices on the bubble sizes/country names, since the indices are wrong.
Is this a bug and if so, how can I properly map the bubble sizes/country names then?
Here is the JSFiddle:
var chart_3_bubbleSize = {
"col_2": [10.0, 9.0, 3.9, 2.5, ],
"col_1": [3.0, 2.5, ],
"col_3": [2.5, 5.5, ],
};
...
var chart_3_bubbleInfo = {
"col_2": ["China", "India", "Indonesia", "Japan", ],
"col_1": ["Russia", "Germany", ],
"col_3": ["Mexico", "USA", ],
};
...
columns: [
['col_2', 76, 66, 71, 86],
['col_2_x', 12000, 5800, 9000, 36000],
['col_1', 72, 80.4],
['col_1_x', 25000, 40000],
['col_3', 76, 78],
['col_3_x', 16000, 50000],
],
...
point:
{
r: function(d)
{
/*d.index gives the index according to the order along the x-axis, which leads to wrong result, when trying to map to country names/bubble sizes*/
return 2 * chart_3_bubbleSize[d.id][d.index];
}
},
https://jsfiddle.net/51oLxqyt/1/
The first green bubble in the lower left corner should be India, but it has the label "China" and the bubble size of China, because China is at index 0 in the bubbleInfo and bubbleSize arrays.
There is an not documented attribute data.xSort = false, which keeps the original index, which makes it possible to map more dimension e.g. for scatter charts.
More info here: https://github.com/c3js/c3/issues/547#issuecomment-56292971

Custom interpolation function for Animated values

I'm trying to animate the X value from 0 to PI, and the Y value from 0 to sin(x).
Something like:
this.positionX = new Animated.Value(0);
Animated.timing(
this.positionX, {
toValue: Math.PI,
duration: 1000,
}
).start();
// this obviously won't work
this.positionY = Math.sin(this.positionX);
I tried interpolating the X value with:
this.positionX.interpolate({
inputRange: [0, ..., PI],
outputRange: [0, ..., sin(PI)],
});
but I still get a linear approximation and slows down the animation drastically.
How can I compose an Animated.Value from a custom function the same way Animated.add or Animated.divide work?

Trouble setting up the SimpleVector encoder

Using the commits from breznak for the encoders (I wasn't able to figure out "git checkout ..." with GitHub, so I just carefully copied over the three files - base.py, multi.py, and multi_test.py).
I ran multi_test.py without any problems.
Then I adjusted my model parameters (MODEL_PARAMS), so that the encoders portion of 'sensorParams' looks like this:
'encoders': {
'frequency': {
'fieldname': u'frequency',
'type': 'SimpleVector',
'length': 5,
'minVal': 0,
'maxVal': 210
}
},
I also adjusted the modelInput portion of my code, so it looked like this:
model = ModelFactory.create(model_params.MODEL_PARAMS)
model.enableInference({'predictedField': 'frequency'})
y = [1,2,3,4,5]
modelInput = {"frequency": y}
result = model.run(modelInput)
But I get the final error, regardless if I instantiate 'y' as a list or a numpy.ndarray
File "nta/eng/lib/python2.7/site-packages/nupic/encoders/base.py", line 183, in _getInputValue
return getattr(obj, fieldname)
AttributeError: 'list' object has no attribute 'idx0'
I also tried initializing a SimpleVector encoder inline with my modelInput, directly encoding my array, then passing it through modelInput. That violated the input parameters of my SimpleVector, because I was now double encoding. So I removed the encoders portion of my model parameters dictionary. That caused a spit up, because some part of my model was looking for that portion of the dictionary.
Any suggestions on what I should do next?
Edit: Here're the files I'm using with the OPF.
sendAnArray.py
import numpy
from nupic.frameworks.opf.modelfactory import ModelFactory
import model_params
class sendAnArray():
def __init__(self):
self.model = ModelFactory.create(model_params.MODEL_PARAMS)
self.model.enableInference({'predictedField': 'frequency'})
for i in range(100):
self.run()
def run(self):
y = [1,2,3,4,5]
modelInput = {"frequency": y}
result = self.model.run(modelInput)
anomalyScore = result.inferences['anomalyScore']
print y, anomalyScore
sAA = sendAnArray()
model_params.py
MODEL_PARAMS = {
'model': "CLA",
'version': 1,
'predictAheadTime': None,
'modelParams': {
'inferenceType': 'TemporalAnomaly',
'sensorParams': {
'verbosity' : 0,
'encoders': {
'frequency': {
'fieldname': u'frequency',
'type': 'SimpleVector',
'length': 5,
'minVal': 0,
'maxVal': 210
}
},
'sensorAutoReset' : None,
},
'spEnable': True,
'spParams': {
'spVerbosity' : 0,
'globalInhibition': 1,
'columnCount': 2048,
'inputWidth': 5,
'numActivePerInhArea': 60,
'seed': 1956,
'coincInputPoolPct': 0.5,
'synPermConnected': 0.1,
'synPermActiveInc': 0.1,
'synPermInactiveDec': 0.01,
},
'tpEnable' : True,
'tpParams': {
'verbosity': 0,
'columnCount': 2048,
'cellsPerColumn': 32,
'inputWidth': 2048,
'seed': 1960,
'temporalImp': 'cpp',
'newSynapseCount': 20,
'maxSynapsesPerSegment': 32,
'maxSegmentsPerCell': 128,
'initialPerm': 0.21,
'permanenceInc': 0.1,
'permanenceDec' : 0.1,
'globalDecay': 0.0,
'maxAge': 0,
'minThreshold': 12,
'activationThreshold': 16,
'outputType': 'normal',
'pamLength': 1,
},
'clParams': {
'regionName' : 'CLAClassifierRegion',
'clVerbosity' : 0,
'alpha': 0.0001,
'steps': '5',
},
'anomalyParams': {
u'anomalyCacheRecords': None,
u'autoDetectThreshold': None,
u'autoDetectWaitRecords': 2184
},
'trainSPNetOnlyIfRequested': False,
},
}
The problem seems to be that the SimpleVector class is accepting an array instead of a dict as its input, and then reconstructs that internally as {'list': {'idx0': 1, 'idx1': 2, ...}} (ie as if this dict had been the input). This is fine if it is done consistently, but your error shows that it's broken down somewhere. Have a word with #breznak about this.
Working through the OPF was difficult. I wanted to input an array of indices into the temporal pooler, so I opted to interface directly with the algorithms (I relied heavy on hello_tp.py). I ignored SimpleVector all together, and instead worked through the BitmapArray encoder.
Subutai has a useful email on the nupic-discuss listserve, where he breaks down the three main areas of the NuPIC API: algorithms, networks/regions, & the OPF. That helped me understand my options better.

Dojox chart number of Y axis labels

When I create a DojoX vertical bar chart, it automatically calculates the labels on the Y axis to cover the largest value. In this case, it created 3 Y-axis labels, 100, 200 300.
How do I increase the number of labels, to say intervals of 50 rather than intervals of 100?
When you add an axis, there are several options you can use for the tick marks. Example:
chart.addAxis("y", {
majorTicks : true, // default
majorLabels : true, // default
majorTick : {length: 4, color: "#FFF"},
majorTickStep : 10,
minorTicks : true,
minorLabels : true,
minorTick : { length: 2, color: "#CCC"},
minorTickStep : 5,
...
vertical: true
});
Check the API docs for more: http://dojotoolkit.org/api/1.8/dojox/charting/axis2d/Default