Relative Color Values

[00:00:00]
>> Sarah Drasner: How would we turn a many element scene from day to night? How would you, you, turn a many element scene from day to night?
>> Speaker 2: I might just layer opaque blue on top of my scene and then maybe add a filter to that to multiply it or something and mess with that.

[00:00:28]
>> Sarah Drasner: Cool, that's a really, really great answer. So you could make a giant panel that's overlaid on top and maybe you change the opacity slowly, maybe you change a filter slowly. Totally great way of doing it. And that is actually a way that most people do do that.

[00:00:46]
But we can also play with this idea of HSL relative color which GreenSock has inside of the TweenMax one as well. And HSL in the design for developers course yesterday, I talked about how that's my favorite color value because it's very human readable. It's very human legible. And what it allows us to do is take the colors from where they're at and say I want to increment it a little bit from there or change it a little.

[00:01:15]
So you don't have to actually change every individual color like you normally would. Or even if you wanna do the overlay, that's totally great. But if you need to interact with anything, then you run into that z-indexing issue of like you can't access any of those things. If you wanted to change all of those elements just slightly based on where they are, HSL relative color is a great way to do it too.

[00:01:42]
So you're not wrong at all, but this is another way of doing that. So hue, saturation, and lightness. Hue is a 360 degree thing. It goes around and around. This is part of why it's one of my favorite color values, because it never fails if you wanna make generative color.

[00:02:03]
1% is the same thing as 361, and you can keep going around unlike other color values that would eventually fail. Saturation goes 0% to 100%. Lightness goes 0% to 100%. So I made these turtles. They kind of show you each one. So I keep poking them cuz I like poking them.

[00:02:26]
Is that weird? I think they're cute. Look at the little tail. Is it weird to make stuff and like it like the things you like? Hi, turtles? Okay, so eventually saturation, I'll stop, or eventually the saturation gets to a certain point of highness, and it can't go any further, and same with lightness.

[00:02:44]
But that hue, I can keep going. And I will cuz it's cute. [LAUGH] And you can kinda play with it and see how you would move each one of them. So in this incrementing, this is how it looks. You might have used HSL before, so it's the same kind of format.

[00:03:03]
HSL in parens, and then kind of comma-separated values for HSL. And we're changing the percentage. So we have that incrementer that you saw earlier changing the percentage for each one. Now here, I'm storing the value and then I'm using it twice. Why would I do that? Does anybody know?

[00:03:31]
>> Speaker 3: Well in this case, it looks like you need to make sure that the fill and the background color, so the fill for your target object and the background color from the body move kinda together, but with different properties.
>> Sarah Drasner: That's exactly right. So if I need to change all of the elements in a scene together, and maybe I'm not sure how much I'm gonna adjust it by, I wanna store that as a variable, so I can change it in one place and have it affect both.

[00:04:01]
Because for body, I'm gonna change background color. And for all of the elements, the SVG elements, I'm gonna use fill, perfect. So here's another CodePen thing. And actually, that's one of those examples of I didn't do that, and so it looks bad when I first. Well, now it's gonna be fine.

[00:04:23]
But did you see the flash of all of the elements? I didn't do that before. You saw how to do that with the visibility hidden. So I can make this come on to the scene a few different ways. I can click this, that kind of lever thing, or I can use this guy.

[00:04:42]
That's another draggable to kinda bring it on to the scene. And I can change the colors of the scene and maybe make them work off of each other. So they're kind of, you can do them in different variations and kind of play with the color values. And then I can, just for fun, change the perspective of these buildings and things like that.

[00:05:05]
So all sorts of little levers and gears that we can play with to manipulate stuff.
>> Sarah Drasner: And I made this CodePen, this is another one with Vue. So this is actually local time, and then I can choose other things that are nearby or far away. And you can see how it will go later.

[00:05:29]
And then the scene kind of adjusts and changes to a night sky and then we'll go back to Los Angeles. So basically I take the scene and I have this lever. And rather than using Moment, I'm using a native [COUGH] thing called toLocaleTimeString. So you can get rid of Moment if you're using that.

[00:05:55]
It will actually respect daylight savings. And that native thing is now very well-supported. So I'm using this dial, and I've created a whole animation that makes it go all the way around. And it makes it go from day to night. And then I find I'm using Watchers and Vue to listen to the change events here basically and then figure out what's the difference between those two times.

[00:06:20]
And then I use the progress to kinda go back and forth on that timeline.