1

Coming from this Question Tweening Colors on Spark AR via Script i now try to make start and end color dynamically bounded. I propably havn't swallowed the whole concept of reactive programming yet, but i tried to make a factory so the value is a function... yet its not working, or only with the initial values. Using the set function and restarting animation doesnt change a thing. What am i missing? Thank you and best regards!

const pink = [.99, .682, .721, 1];
const blue = [.0094, .0092, .501, 1];
const yellow = [0.9372, .7725, 0, 1];

function ColorFactory() {
    this.sourceCol = pink;
    this.targetCol = blue;

    this.set = function (_col1, _col2) {
        this.sourceCol = _col1;
        this.targetCol = _col2;
    }

    this.get = function (id) {
        switch (id) {
            case 'source': return this.sourceCol;
            default: return this.targetCol;
        }
    }
}


var colfac = new ColorFactory();

const timeDriver = Animation.timeDriver(timeDriverParameters);
const rotSampler = Animation.samplers.easeInQuad(0, 35);
const alphaSampler = Animation.samplers.linear(1, 0);
const colSampler = Animation.samplers.linear(colfac.get('source'), colfac.get('target'));
const colorAnimation = Animation.animate(timeDriver, colSampler);

timedriver.start();

//doesnt make change anything, same colors as before:
colfac.set(blue, yellow);
timedriver.reset();
timedriver.start();

So how could i make the set of colors dynamic? Anyone?

Wolfgang Müller
  • 205
  • 1
  • 4
  • 16
  • When you create an instance of sampler you can not change it, but you can create a new one. And of course you need to bind the animation again. This will work for discrete changes in color, but not for smooth changes. So what kind of effect you want to achieve? Can you clarify? – lisichka ggg Jan 11 '20 at 00:29
  • hi. yes i realized that i have to make a new sampler, but it makes me wonder... there is a Transition Patch which makes exactly what i need, animating a v3 with dynamic source and target values. since all patches must have an equivalent in script i wonder what that might be – Wolfgang Müller Jan 11 '20 at 16:57
  • and to clearify: i have a product that comes in different colors. i want the user to click a nativeui button and let the selected color fade in to the new one. since the user can tap in any order, i must have the possibility to set source and target value dynamically. and i have already achieved my goal by creating a new sampler and animation on every tap, but i seems not very elegant to me... – Wolfgang Müller Jan 11 '20 at 17:00
  • Ok, you want the transition from one color to another, right? – lisichka ggg Jan 11 '20 at 23:17
  • By the way patches and the "scripting", that we are using have different level of access. We are inside of isolated bubble, can't do much here, everything is forbidden( – lisichka ggg Jan 11 '20 at 23:27
  • damn :) too sad. – Wolfgang Müller Jan 17 '20 at 13:36

1 Answers1

1

The only "good" option for you is to do something like this: 

const colors = [];
const driver = A.timeDriver({ durationMilliseconds : 1000 });

// On NativeUI monitor selected index event 
ui.selectedIndex.monitor.subscribe(
(val) => {
   const sampler = A.samplers.linear(colors[val.oldValue, colors[val.newValue]);
   const colorAnimation = A.animate(driver, sampler);

   // bind here to shader

})
lisichka ggg
  • 563
  • 3
  • 15
  • In patches i guess that you will use counter for switching between colors. I've implemented my version of it in scripting, but it look kind of strange and based on TimeDrivers. The main feature is to have a bridge between "vanila js' and 'reactive js'. – lisichka ggg Jan 12 '20 at 12:06