Connect UI Slider to Hair color?

Bit of a hacky way to do it:

First need to add the ui, the hair color template already uses an ortho cam so u can put it under there. Tip: Resize it in the 3D scene to resize everything easily, position in 2D.

Next make a new script, add it to its own object and put it at the top of the scene so it exists before the color picker script. We will call this script from the color picker.

Now click on the UI Color Picker object. 

Look for the script component and check Edit Event Callbacks.

Choose callback type custom function.

Add your custom script we made to the custom function script input.

Add an on color changed value which will be the function name to call, you can make it anything but make sure it matches the script. I chose to use onColorChange.

Now double click your custom script in resources and open up the script editor.

First we need to add an input to access our hair controller script.

use //@input Component.ScriptComponent hairController

next we need to make the script function for the UI color picker to call.

Using the name from earlier it should be script.api.onColorChange = function(color){}

then inside this we need to change it to use rgb only to make it easier later on.

We added a color parameter in the last step so we will access that and create a new variable called rgb set to a vec3 and pull out the rgb values from color.

var rgb =  new vec3(color.x, color.y, color.z)

Now we need to connect it to the hair controller.

We will use script api and our imported hairController script to do this.

Use script.hairController.api.setColor1(rgb) to call a setColor1 function in the hair controller's script api and use the rgb value we made as the input.

Full script for the custom:

//@input Component.ScriptComponent hairController

script.api.onColorChange = function(color){

var rgb = new vec3(color.x, color.y, color.z)

script.hairController.api.setColor1(rgb)

}

Now connect your hair controller script to this script, by selecting your custom script in the object panel and adding the hair controller script to the input on the script component.

You may notice we still get errors, this is because the setColor1 function does not yet exist, we need to make it. So find the HairColorController script in resources and double click it to open it in the script editor.

In the screenshot you can see I added a custom function at the top of the script, it's easiest to add it there.

We are making an api method called setColor1 which our custom script calls and inputs a color to. 

That looks like script.api.setColor1 = function(color){}

inside this we are hijacking the script.colorVal1 variable and the colorVal1 variable, really you could skip the first var update and just directly update colorVal1 but this is a nicer way.

Update script.colorVal1 to the color from our custom script  with script.colorVal1 = color

then we need to update the colorVal1 variable again so do colorVal1 = script.colorVal1

then to actually apply this update we will call the enable function again using enable()

it should be working now. Color 2 is updated the same way just need to find the variables and change them with another function or the same if you want the colors to be the same. Though you don't need to use 2 colors.

Note, the colors shown on the hair controller script are now irrelevant but we just keep them in case we wanna go back in the future.

Full code to add to HairColorController script:

script.api.setColor1 = function(color){

    script.colorVal1 = color

    colorVal1 = script.colorVal1

    enable()

}

Make sure to save the scripts if you see they don't do anything, check this video for help with script usage:

https://www.youtube.com/watch?v=fRDOTia_F1Q

References/Further Reading:

https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/

https://lensstudio.snapchat.com/guides/scripting/scripting-overview/

https://lensstudio.snapchat.com/templates/face/hair-color/

https://lensstudio.snapchat.com/api/classes/vec3/

I didnt know that it was that complex 😳

But thank you so much! I will try it now :D

Cheers,

SirQu3ntin