Jump to content
Search Community

Color looping individual colors

shanemielke test
Moderator Tag

Recommended Posts

I would like to set an initial palette of colors (2-3) and then have them all individually cycle and loop through the entire color spectrum. Is this a situation where I just manipulate the individual RGB values from their initial point to 255 and then when that is done start a secondary loop that goes from 0 to 255? Any suggestions on simplest ways of doing this?

 

Link to comment
Share on other sites

Hey Shane! Welcome.

 

Could you describe your goal a little more clearly? Namely:

  1. What format would the initial palette of colors be in?
  2. How do you want to loop it through the entire spectrum - is keeping the S (saturation) and L (light) values but rotating the H (hue) sufficient? or do you need more variance than that?
Link to comment
Share on other sites

Hey Zach, 

   Great questions. Sorry for being vague. I've only ever really animated directly between two colors so this is the first time I've ever needed to have any colors loop completely through a full rainbow of colors.

 

1) The project WebGL/three.js. I've basically got 3 texture colors and 2 light colors that area ll set to initial values. There are two primary colors (blue and red) but blue has 3-4 variations of light to dark.. Everything is looking great but I thought that it might be interesting to see the colors slowly rotate through the entire color spectrium over and over.

2) I think this is going to be a loop through the Hue as you said. I did find a little bit of code that essentially does this but because the tween is a tween of the H to 1, at the point that the colors all reached 1 they were all the same color, in sync and don't circle back around to an HSL of 0 to get all of the colors. (Sample code below)

 


		var colorStarfox = starfoxWireframeMaterial.color.getHSL(starfoxWireframeMaterial.color);
		TweenMax.to(colorArray, 30, {
			h: 1,
			repeat: -1,
			ease: Linear.easeNone,
			onUpdate() {
				starfoxWireframeMaterial.color.setHSL( colorStarfox.h, 1, 0.5);
			}
		});

Basically I was just curious if there was a clever way of going from some initial H value all the way to 1 and then restart at 0 and then keep looping. I have it in my head how to do this but it would be a little messy

Link to comment
Share on other sites

@ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent.

 

Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): 

See the Pen mdyzBXN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way. 

  • Like 3
Link to comment
Share on other sites

Both of these definitely have given me the insight I need to create what I'm looking to do. My stumbling point was just figuring out how to take a value that is in between a max/min value (in this case Hue) but have it loop. So often I'm just animating straightforward from/to variables. Not a start at a middle value and then increment/loop between the max/min. Thanks you two ! I should be launching what I have in a couple of days and I'll post the implemented project. :)

  • Like 2
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.
×
×
  • Create New...