The forum on this site is closed for new comments and posts. Continue the conversation in our Snap AR Discord server.

Change Baseball Cap's logo and color

  • Hi Vince

    First you'll need to crate a script and call it something like TapChange.js. Then use the below code and create a new scene object and place this script on that new scene object bound to the "Initialize" event.

    // -----JS CODE-----

    //@input Asset.Texture[] logos
    //@input Component.ScriptComponent BaseballCapProperties
    //@input vec4[] primaryCapColors

    var currentIndex = 0;
    var currentColorIndex = 0;
    var logoAspect = 1.0;
    var uvWidth = remap(0.5, 0, 1, 0.4, 0.7);
    var uvHeight = remap(0.5, 0, 1, 0.2, 0.4);
    var logoOffset = new vec2(0,0);
    var uvAspect = uvWidth / uvHeight;
    var capColor = script.BaseballCapProperties.api.capMaterialPrimary.mainPass.baseColor;

    function tap(eventData)
    {
    // Logo
    var logo=script.logos[currentIndex];
    script.BaseballCapProperties.api.logoMaterial.mainPass.baseTex=logo;
    var logoWidth = logo.getWidth();
    var logoHeight = logo.getHeight();
    logoAspect = logoWidth/logoHeight;

    var newScaleX = 1;
    var newScaleY = 1;

    if(logoAspect>=uvAspect)
    {
    // Logo image is wider than mappable area
    newScaleX = 1 / uvWidth;
    newScaleY = 1 / (uvWidth/logoAspect);
    }
    else
    {
    // Logo image is taller than mappable area
    newScaleX = 1 / (uvHeight*logoAspect);
    newScaleY = 1 / uvHeight;
    }

    var logoScale = new vec2(newScaleX, newScaleY);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Scale=logoScale;

    var logoPlacement = new vec2( (1-logoScale.x) /2, (1-logoScale.y) /2);

    logoOffset = new vec2(-logoPlacement.x*logoOffset.x, logoPlacement.y*logoOffset.y);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Offset=logoPlacement.sub(logoOffset);

    // Color
    var randColor=script.primaryCapColors[currentColorIndex];
    randColor.a = 1.0;

    script.BaseballCapProperties.api.capMaterialPrimary.mainPass.baseColor = randColor;

    currentIndex++;
    currentColorIndex++;

    if(currentIndex>script.logos.length-1)
    {
    currentIndex=0;
    }

    if(currentColorIndex>script.primaryCapColors.length-1)
    {
    currentColorIndex=0;

    }

    }
    var tapEvent = script.createEvent("TapEvent");
    tapEvent.bind(tap);

    function remap(value, low1, high1, low2, high2) {

    return low2+ (high2-low2) * (value-low1) / (high1-low1);

    }



    You'll need to link the textures you want to use as logos to this new script as well as define a group of colors you want to switch between on screen taps. These colors are represented as vec4's because we currently don't have the ability to define an array of widget colors so you'll have to define your colors in this format. The values of a vec4 for color are RGBA for each float respectively. Don't worry about the fourth float value because in the script we always force it to 1.0;

    This is what the script should probably look like with everything hooked up.

    And this is where you can find the Baseball Cap Script Properties reference. Found under the camera object.

    Let me know if this doesn't work :)

    Best

    Doug

    Comment actions Permalink
  • It's working! Thank you very much! Can I change the secondary color of the cap?, thanks again.

    Comment actions Permalink
  • You should be able to duplicate the array of Vec4's in the above script and associate them with the secondaryMaterial from baseball cap properties. You should be able to use this version of the script :)

    // -----JS CODE-----

    //@input Asset.Texture[] logos
    //@input Component.ScriptComponent BaseballCapProperties
    //@input vec4[] primaryCapColors
    //@input vec4[] secondaryCapColors

    var currentIndex = 0;
    var currentColorIndex = 0;
    var logoAspect = 1.0;
    var uvWidth = remap(0.5, 0, 1, 0.4, 0.7);
    var uvHeight = remap(0.5, 0, 1, 0.2, 0.4);
    var logoOffset = new vec2(0,0);
    var uvAspect = uvWidth / uvHeight;

    function tap(eventData)
    {
    // Logo
    var logo=script.logos[currentIndex];
    script.BaseballCapProperties.api.logoMaterial.mainPass.baseTex=logo;
    var logoWidth = logo.getWidth();
    var logoHeight = logo.getHeight();
    logoAspect = logoWidth/logoHeight;

    var newScaleX = 1;
    var newScaleY = 1;

    if(logoAspect>=uvAspect)
    {
    // Logo image is wider than mappable area
    newScaleX = 1 / uvWidth;
    newScaleY = 1 / (uvWidth/logoAspect);
    }
    else
    {
    // Logo image is taller than mappable area
    newScaleX = 1 / (uvHeight*logoAspect);
    newScaleY = 1 / uvHeight;
    }

    var logoScale = new vec2(newScaleX, newScaleY);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Scale=logoScale;

    var logoPlacement = new vec2( (1-logoScale.x) /2, (1-logoScale.y) /2);

    logoOffset = new vec2(-logoPlacement.x*logoOffset.x, logoPlacement.y*logoOffset.y);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Offset=logoPlacement.sub(logoOffset);

    // Color
    var randColor=script.primaryCapColors[currentColorIndex];
    var randColorSecond=script.secondaryCapColors[currentColorIndex];
    randColor.a = 1.0;

    script.BaseballCapProperties.api.capMaterialPrimary.mainPass.baseColor = randColor;
    script.BaseballCapProperties.api.capMaterialSecondary.mainPass.baseColor = randColorSecond;

    currentIndex++;
    currentColorIndex++;

    if(currentIndex>script.logos.length-1)
    {
    currentIndex=0;
    }

    if(currentColorIndex>script.primaryCapColors.length-1)
    {
    currentColorIndex=0;
    }

    }
    var tapEvent = script.createEvent("TapEvent");
    tapEvent.bind(tap);

    function remap(value, low1, high1, low2, high2) {
    return low2+ (high2-low2) * (value-low1) / (high1-low1);
    }
    Comment actions Permalink
  • Thanks. But the secondary color is not as good as the one in the controller.

    Comment actions Permalink
  • Hi Vince,

    I assume you mean that the version I've presented here doesn't provide you with a color picker? I chose this method to allow you to define many colors quickly but just adding new entries from the inspector. If you would like to use color pickers instead you would have to manually define the color pickers in the script.. Maybe something like this instead?

     

    // -----JS CODE-----

    //@input Asset.Texture[] logos
    //@input Component.ScriptComponent BaseballCapProperties

    //@input vec3 PrimaryColor1 = {1,0,0} {"widget":"color"}
    //@input vec3 PrimaryColor2 = {1,0,0} {"widget":"color"}
    //@input vec3 PrimaryColor3 = {1,0,0} {"widget":"color"}
    //@input vec3 PrimaryColor4 = {1,0,0} {"widget":"color"}

    //@input vec3 SecondaryColor1 = {1,0,0} {"widget":"color"}
    //@input vec3 SecondaryColor2 = {1,0,0} {"widget":"color"}
    //@input vec3 SecondaryColor3 = {1,0,0} {"widget":"color"}
    //@input vec3 SecondaryColor4 = {1,0,0} {"widget":"color"}

    var currentIndex = 0;
    var currentColorIndex = 0;
    var logoAspect = 1.0;
    var uvWidth = remap(0.5, 0, 1, 0.4, 0.7);
    var uvHeight = remap(0.5, 0, 1, 0.2, 0.4);
    var logoOffset = new vec2(0,0);
    var uvAspect = uvWidth / uvHeight;

    var primaryCapColors = [script.PrimaryColor1,script.PrimaryColor2,script.PrimaryColor3,script.PrimaryColor4];
    var secondaryCapColors = [script.SecondaryColor1,script.SecondaryColor2,script.SecondaryColor3,script.SecondaryColor4];

    function tap(eventData)
    {
    // Logo
    var logo=script.logos[currentIndex];
    script.BaseballCapProperties.api.logoMaterial.mainPass.baseTex=logo;
    var logoWidth = logo.getWidth();
    var logoHeight = logo.getHeight();
    logoAspect = logoWidth/logoHeight;

    var newScaleX = 1;
    var newScaleY = 1;

    if(logoAspect>=uvAspect)
    {
    // Logo image is wider than mappable area
    newScaleX = 1 / uvWidth;
    newScaleY = 1 / (uvWidth/logoAspect);
    }
    else
    {
    // Logo image is taller than mappable area
    newScaleX = 1 / (uvHeight*logoAspect);
    newScaleY = 1 / uvHeight;
    }

    var logoScale = new vec2(newScaleX, newScaleY);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Scale=logoScale;

    var logoPlacement = new vec2( (1-logoScale.x) /2, (1-logoScale.y) /2);

    logoOffset = new vec2(-logoPlacement.x*logoOffset.x, logoPlacement.y*logoOffset.y);

    script.BaseballCapProperties.api.logoMaterial.mainPass.uv2Offset=logoPlacement.sub(logoOffset);

    // Color
    var randColor=primaryCapColors[currentColorIndex];
    var randColorSecond=secondaryCapColors[currentColorIndex];

    script.BaseballCapProperties.api.capMaterialPrimary.mainPass.baseColor = new vec4(randColor.x, randColor.y, randColor.z, 1.0);
    script.BaseballCapProperties.api.capMaterialSecondary.mainPass.baseColor = new vec4(randColorSecond.x, randColorSecond.y, randColorSecond.z, 1.0);

    currentIndex++;
    currentColorIndex++;

    if(currentIndex>script.logos.length-1)
    {
    currentIndex=0;
    }

    if(currentColorIndex>primaryCapColors.length-1)
    {
    currentColorIndex=0;
    }

    }
    var tapEvent = script.createEvent("TapEvent");
    tapEvent.bind(tap);

    function remap(value, low1, high1, low2, high2) {
    return low2+ (high2-low2) * (value-low1) / (high1-low1);
    }
    Comment actions Permalink

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!