Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Garrettlynch

Tweening the hue in hsl colours

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

 

I'm trying to tween between colours but it's not quite what I expected (code below) - it seems to fade from one colour to the next rather than animate through all the colours in between.  I think this is because it's doing it in rgb, I want to tween between hues in hsl colours so for example from hsl(0, 100%, 50%) to hsl(120, 100%, 50%).

 

I've tried to get hsl to work in the TweenLite.to() function but am unclear how this works, how is hsl used in the function?  Will using hsl tweening through hues 0 -> 120 or also just fade from one to the next?

 

//colours
var colours = {
  0: new THREE.MeshPhongMaterial({ color: "hsl(120, 100%, 50%)" }),
  1: new THREE.MeshPhongMaterial({ color: "hsl(200, 100%, 50%)" }),
  2: new THREE.MeshPhongMaterial({ color: "hsl(240, 100%, 50%)" }),
  3: new THREE.MeshPhongMaterial({ color: "hsl(360, 100%, 50%)" })
}

//animate to next colour
colourTo(colourplane, colours[0], 5);

//colour tween
function colourTo(target, value, speed)
{
    var initial = new THREE.Color(target.material.color.getHex());
    var value = new THREE.Color(value.color.getHex());
    
    //tween colour
    TweenLite.to(initial, speed, {
        r: value.r,
        g: value.g,
        b: value.b,
    
        onUpdate: function () {
              target.material.color = initial;
        }
}

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

GSAP can animate complex string values which means that you can tween one hsla value to another


 

var hsla = {value:"hsla(120, 100%, 20%, 1)"};

TweenLite.to(hsla, 0.3, {value:"hsla(360, 100%, 80%, 1)", onUpdate:function(){
 console.log(hsla.value)
}})

 

 

Click "RUN DEMO" and then the "EDIT ON CODEPEN" button to see the demo in its own window 

 

See the Pen ypyzXN by GreenSock (@GreenSock) on CodePen

 

 

Also read about relative hsla values here: https://greensock.com/gsap-1-18-0

 

Also, the ColorPropsPlugin may help you to: https://greensock.com/docs/Plugins/ColorPropsPlugin

 

If you need more help please provide a very simple demo where you are only animating the value of of once color of one object.

I really can't tell what your code is doing without actually seeing it run and I don't use Three.js at all so a working demo will be of great help.

thanks

 

 

  • Like 6
Link to comment
Share on other sites

Yeah, a demo would help. One thing I noticed is that you're getting the hex value, which will look different than hsl when animating. Doesn't three.js have a .getHSL method?

Link to comment
Share on other sites

4 hours ago, Carl said:

Hi and welcome to the GreenSock forums,

 

GSAP can animate complex string values which means that you can tween one hsla value to another


 


var hsla = {value:"hsla(120, 100%, 20%, 1)"};

TweenLite.to(hsla, 0.3, {value:"hsla(360, 100%, 80%, 1)", onUpdate:function(){
 console.log(hsla.value)
}})

 

I think it's something to do with the hsl format and converting it, tweenlite's hue runs from 0.0->360.0 but three.js uses 0.0->1.0 (three.js also doesn't use hsla).

 

Your example posted here plugged into mine the stream looks like this:

Object {value: "hsla(122.5531733333333, 100%, 20.638293333333326%, 1)", _gsTweenID: "t0"}

 

I haven't mapped it to the colour in three.js but I assume the format is right.  When I try with rgb and three.js it looks like this:

T…E.Color {r: 0, g: 0.09046127853134676, b: 0.21761911344805118, _gsTweenID: "t0"}

 

and that works just fine, when I use the hsl format based on what you posted like so:

T…E.Color {_gsTweenID: "t0", value: "hsl(0.59722222223, 100%, 50%)"}

 

it doesn't work (and yes I did try with alpha just in case).

 

Can't stand codepen sorry - the script is online here http://www.asquare.org/work/blend2/ function animate() calls function colourTo() which is in a linked file here http://www.asquare.org/work/blend2/resources/javascript.js

 

 

 

 

Link to comment
Share on other sites

Just throwing this in:

 

 

I didn't give too much thought on the issue but this works in a way. Note that you will need to add in a step to normalise the 360 degrees into a 0.0 - 1.0 range if you need to support degrees as an input.

 

Also note that I'm using the ModifiersPlugin - sorry about lumping it in, I'm being lazy here. ;P

 

Welcome to the forums @Garrettlynch!

 

 

  • Like 4
Link to comment
Share on other sites

14 hours ago, Dipscom said:

Just throwing this in:

 

I didn't give too much thought on the issue but this works in a way. Note that you will need to add in a step to normalise the 360 degrees into a 0.0 - 1.0 range if you need to support degrees as an input.

 

Also note that I'm using the ModifiersPlugin - sorry about lumping it in, I'm being lazy here. ;P

 

Hi, this has got me a bit closer.  Three.js had me confused as to how it sets hsl, setting it in a material's color seems to only work as a string 'hsl(120, 100%, 50%)' but using setHSL it's like so: setHSL( 0, 1, 0.5 ).  What I have below is now setting each colour if I use valueh (the hsl target hue) but not fading from initial through all the colours in between as you have in your demo - can't understand what the updating value is within the to() function and how I access it to plug it into the h of hsl (see 'what goes here?' in the code).

 

    TweenLite.to(initial, speed, {
        value: valueh,
        
        onUpdate: function () {
              target.material.color.setHSL( 'what goes here?', 1, 0.5 );
        },

        onComplete: function() {
            //if colourcounter equals 3
            if (colourcounter == 3)
            {
                //reset colourcounter
                colourcounter = 0;
            }
            else
            {
                //increment colourcounter
                colourcounter++;
            }
            //allow next animation
            colouranimation = 0;
        }
        
    });

 

Link to comment
Share on other sites

Just tween the color object. If you need any more help, please make a demo.

 

var color = material.color.getHSL()

TweenMax.to(color, 5, {
  h: 1,
  onUpdate() {
    material.color.setHSL(color.h, color.s, color.l)
  }
})

 

  • Like 3
Link to comment
Share on other sites

I provided an example in a link above.  I asked one question in the last post, I have colour changes working with three I just need to know what the updating value in the Tweenlite's to() function is.

Link to comment
Share on other sites

Hi Garret,

 

target.material.color.setHSL( 'what goes here?', 1, 0.5 );

 

I'm guessing maybe initial.value because that is what you are tweening.

 

Again its very difficult to trouble shoot an isolated code snippet.

 

I tried looking at your demo and all I saw was a blank page that loaded a javascript file with a few hundred lines of code. 

 

If you don't like CodePen you can try using:

 

https://plnkr.co/

https://jsfiddle.net/

http://liveweave.com/

http://jsbin.com/

http://cssdeck.com/

http://kodtest.com/

 

Dipscom's demo already loads TweenMax and Three.js so all you have to do is fork it and paste a little code in (the smallest amount possible to replicate the issue). 

 

If you provide a simple demo that we can play with and edit there are multiple people willing to jump in and help.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, Garrettlynch said:

I provided an example in a link above.  I asked one question in the last post, I have colour changes working with three I just need to know what the updating value in the Tweenlite's to() function is.

 

And I provided you with a correct answer. Did you even try it? I already know the answer to that.

 

All I needed was a simple demo to see what you were doing, and that I could edit in a live environment. 

 

See the Pen jYPVKN?editors=0010 by osublake (@osublake) on CodePen

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

@OSUblake Weirdly demo you just posted throws error while running it on forum. On codepen it works.

 

Quote

TypeError: THREE.OrbitControls is not a constructor

 

 

Link to comment
Share on other sites

5 minutes ago, Sahil said:

@OSUblake Weirdly demo you just posted throws error while running it on forum. On codepen it works.

 

 

 

Yeah, I noticed that too, that's why I posted the link instead. It's @Dipscom code, so I'm not sure what the issue is... 

 

Oh, found it.

 

See the Pen jYPVKN by osublake (@osublake) on CodePen

 

@Dipscom When using JS from another Codepen file,  delete all the options from the url (from the ?), and add a .js extension.

 

https://codepen.io/dipscom/pen/peVzVz.js

 

 

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

And I provided you with a correct answer. Did you even try it? I already know the answer to that.

 

All I needed was a simple demo to see what you were doing, and that I could edit in a live environment. 

 

You didn't provide me with an answer that helped.  It may have been correct, I don't know because yes I tried and couldn't get it working.  An example building on what I posted would have been more helpful rather than an example that used TweenMax instead of TweenLite, changes all of the variable names, how onupdate is calling a function and doesn't respond to the question I asked - your example couldn't have been more confusing for someone who is trying to use TweenLite for the first time.  In my working example I used explicit variable names so I could try to understand what is occurring - in yours you used 'h: 1' and 'color.h' and until Carl clarified I didn't know whether those were the same h's or the h in the original color variable.

 

 

Many thanks Carl for clarifying as mentioned above and for pointing out https://plnkr.co/ which looks useable to me (hate the three pane designs of all the others - find them very unintuitive).  I think I understand what should be happening but unfortunately I still can't get TweenLite and Three.js to play nicely.  Jumped ship to tween.js and got it working in 30 minutes (online here - http://www.asquare.org/work/blend2/) - so something odd is happening, either in converting between hsl formats or the color itself from the tween not being understood by three.js.

 

Link to comment
Share on other sites

2 hours ago, Garrettlynch said:

 

You didn't provide me with an answer that helped.  It may have been correct, I don't know because yes I tried and couldn't get it working.  An example building on what I posted would have been more helpful rather than an example that used TweenMax instead of TweenLite, changes all of the variable names, how onupdate is calling a function and doesn't respond to the question I asked - your example couldn't have been more confusing for someone who is trying to use TweenLite for the first time.  In my working example I used explicit variable names so I could try to understand what is occurring - in yours you used 'h: 1' and 'color.h' and until Carl clarified I didn't know whether those were the same h's or the h in the original color variable

 

 

Sorry, but the code you posted makes sense to you, and only you. There is no way for anybody to know what's going on, or what you're having trouble with without more context. That is why you were asked on multiple occasions to provide a demo. It's not because we're curious, and want to see what you're working on. It's because we can't help you fix a problem if we don't see one.

 

TweenLite.to(initial, speed, {
  value: valueh,
        
  onUpdate: function () {
    target.material.color.setHSL( 'what goes here?', 1, 0.5 );
  },

  onComplete: function() {
    //if colourcounter equals 3
    if (colourcounter == 3)
    {
      //reset colourcounter
      colourcounter = 0;
    }
    else
    {
      //increment colourcounter
      colourcounter++;
    }
      //allow next animation
      colouranimation = 0;
    }
        
});

 

 

What is initial? Could be anything. Same thing with valueh. And what about colourcounter, clourcounter, or colouranimation? And what does changing those values even do? Those are all unknowns to us.

 

So not knowing what those values are, or where they are coming from, I provided a very simple example of how to tween and set an hsl color. I used 'h: 1' and 'color.h' because that is the property of the hsl object returned by calling getHSL, so that is the property that needs to be tweened. I can't tween a "value" property if it doesn't exist. I clearly showed how I was getting the hsl color object, so I'm not sure why that was confusing.

 

As to why I used TweenMax instead of TweenLite, it's because I copied and pasted the tween from Dipscom's demo into the post, and edited there. You didn't ask Dipscom about why he was using TweenMax, so I'm assumed you knew the difference. For what you're trying to do, there is no difference. TweenMax is TweenLite, but with some extra methods. Sorry if that confused you.

 

So after posting that example is when I noticed you posted some links to your code, but it was still hard to understand because you're using global values that are split up across different files. I copied as much of the needed functionality from your code into a fork of Dipscom's demo, and showed how to tween and set an hsl value.

 

Did that not help? I'm using the same ip values from your demo, so it works. The only thing I couldn't figure from your code is what the onComplete callback does, so I just made it recursively call the colourTo function again to keep the animation going.

 

I don't know why you're having trouble with GSAP and Three.js, but there shouldn't be any problems. My guess is it's something you're doing with three.js, or with some data your using. Put what you have on plnkr, and we can take a look at it for you. It shouldn't be that hard to figure out where the problem is coming from.

 

  • Like 2
Link to comment
Share on other sites

2 hours ago, Garrettlynch said:

Jumped ship to tween.js and got it working in 30 minutes (online here - http://www.asquare.org/work/blend2/) - so something odd is happening, either in converting between hsl formats or the color itself from the tween not being understood by three.js.

 

I don't see that working either. Just a bunch of errors in console.

Link to comment
Share on other sites

22 minutes ago, OSUblake said:

 

I don't see that working either. Just a bunch of errors in console.

 

Working in Chrome, Firefox and Safari across desktop and mobile so not sure what you are looking at it in.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×