Support for interpolation/tweening arrays of values

[davidpuetter]

The standard TWEEN library allows you to pass an array of values to the tween to be able to interpolate (linearly, catmull or bezier) between those values and change the tweened object like that.

https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#tweening-to-arrays-of-values

Looking at this library, it doesn't seem to support it. It would be super cool if that could be implemented one day.

[kungfooman]

Just wrote some code to tween between multiple colors, which is quite simple to use:

function genCurveSet(curvesetdata) {
	var n = curvesetdata[0].length;
	var curves = new Array(n);
	for (var i=0; i<n; i++) {
		var curve = [];
		var time = 0;
		var timeAdd = 1 / (curvesetdata.length - 1); // e.g. 1/(3-1) == [0, 0.5, 1]
		for (var j=0; j<curvesetdata.length; j++) {
			var curvedata = curvesetdata[j];
			curve.push(time);
			curve.push(curvedata[i]);
			time += timeAdd;
		}
		curves[i] = curve;
	}
	return new pc.CurveSet(curves);
}

And then we can define some animations:

	var curveset_rgb = genCurveSet([
		[1, 0, 0],
		[0, 1, 0],
		[0, 0, 1]
	]);

	var curveset_rainbow = genCurveSet([
		[1, 0, 0], // red
		[1, 1, 0], // yellow
		[0, 1, 0], // green
		[0, 0, 1], // blue
		[1, 1, 1], // white
	]);

	var curveset_redgreen = genCurveSet([
		[1, 0, 0], // red
		[0, 1, 0], // green
	]);

curveset_redgreen.value(0) /* = */ [1, 0, 0]
curveset_redgreen.value(1) /* = */ [0, 1, 0]
curveset_redgreen.value(0.3) /* = */ [0.784, 0.216, 0]

And a material could be animated like:

	var target = {time: 0};
	var to = {time: 1};
	var testTween = app.tween(target)
	.to(to, 3.0, pc.SineInOut)
	.loop(true)
	.yoyo(true)
	.on('update', function () {
		var newColor = new pc.Color(curveset_rainbow.value(this.target.time))
		appSimplified.red.diffuse = newColor;
		appSimplified.red.update();
	})
	.start();