Currently, I am utilizing gsap and three js to animate a light source.
I have an array containing various colors that I would like to cycle through randomly during the animation process.
My objective is to continuously loop through the random color selection for an infinite duration.
While using onCompleteAll: change, the transition between colors occurs abruptly at the end of each duration, lacking the smooth animation effect I desire.
In an attempt to rectify this issue, I switched to onComplete: change. However, this event never seems to trigger, resulting in only two colors being cycled through instead of the entire array.
Math.floor(Math.random() * std.length)
Are there any glaring errors in my code or potential solutions to this dilemma?
Below is the snippet of code in question:
var std = [new THREE.Color().setHex(0x009dff),
new THREE.Color().setHex(0x001aff),
new THREE.Color().setHex(0x4000ff),
new THREE.Color().setHex(0x7300ff)];
var randomIndex, randomColor, tempColor, camlight3;
randomIndex = Math.floor(Math.random() * std.length);
randomColor = std[randomIndex];
tempColor = randomColor;
// Three.js camera
/* camlight3 = new THREE.PointLight(tempColor, 60, 80, 0.0);
camlight3.power = 60;
camlight3.position.x += 10;
camlight3.position.y += 25;
camlight3.position.z -= 120;
this._camera.add(camlight3); */
gsap.to(camlight3.color,
{
duration: 2,
r: tempColor.r, g: tempColor.g, b: tempColor.b,
onCompleteAll: change,
yoyo: true,
repeat: -1,
repeatRefresh: true,
});
function change() {
randomIndex = Math.floor(Math.random() * std.length);
randomColor = std[randomIndex];
tempColor = randomColor;
camlight3.color = tempColor;
console.log(tempColor);
}
Thank you for any assistance provided.
EDIT: It should be noted that although other animations within my project utilize oncomplete and onupdate events, none of them are related to the light source and do not call the change function.