Jump to content
GreenSock

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

Hue value

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. 

If I set the hue of a clear red square like this:

 

var tl = new TimelineMax();

tl.to(this.square, 1, {easel:{hue:65}})

It turns brown(ish) 

 

If I create a #FF0000 square in Adobe Fireworks and set its hue to 65,  it turns yellow. 

 

Do I miss something in the setting in the script? 

 

I think it's hard to find a doc of all settings for the easel. 

Thanks in advance 

John 

Share this post


Link to post
Share on other sites

I think that the way EaselJS applies it is like a filter - a matrix through which the original color is viewed whereas perhaps Fireworks treats it in a more absolute way (like a raw color). I'm not a Fireworks expert, so I couldn't say for sure. So maybe in Fireworks, a hue of 65 is ALWAYS yellow (absolute) whereas if it's a filter (as in EaselJS), a hue shift of 65 would look completely different if it's on a red object than a blue object.

 

What exactly is your goal? 

  • Like 1

Share this post


Link to post
Share on other sites

Hi !

Thanks for replying. My goal is to aply a hue to a picture, where I need to keep the shadows and bevels etc.

So I think HUE is the best option. But I have to provide several colors. Making a loop through -180 to 180 HUE, doesn't show any yellow colors. probaby because the square is red, and as you say, its a filter thing.

I cant TINT them. But maybe I could use a property more, like saturation, but I think the docs are very little informative as to properties and values

Share this post


Link to post
Share on other sites

In case you haven't seen it: 

https://greensock.com/docs/Plugins/EaselPlugin

 

You might try the "colorize" option, as in colorize:"yellow" (not sure that'll give you exactly what you want - just something to try). Or tint is a different effect that might work. If you have any questions about implementation or something, feel free to ask here. 

Share this post


Link to post
Share on other sites

Hi !

Thanks. I tried it and maybe it'll work, I don't know. The yellow didn't do it. Just made it darker. See attached. Where do I find a list of available properties and settings. Like the colorize. What colors will it take.... yellow, red, white etc.

 

Thanks for your time on this

 

John

hue.png

Share this post


Link to post
Share on other sites

Hi !

If anyone looks at this: https://velorbis.dk

Just click on the brush and choose a color. The bike is colored in the given color preseving the shadows, curves etc. I assume it's hue. But as I said I cant get the same effect with hue alone.

In Fireworks, however, I can.

Any idea how to get this effect?

Share this post


Link to post
Share on other sites

They're definitely using canvas, though I don't have time to dig into all the source code and decipher how they're doing the color. Have you tried starting with a grayscale image and applying colorize or hue to that? 

Share this post


Link to post
Share on other sites

Well, the best result is when the bike has a color. When its grey, the hue has no effect alone. At least not by code.(in fireworks its ok).

I tried the colorize on a grey bike , but it gets distrorted when the amout  is 1. If 0.5 or 0.3, its just vague

var bounds = this.mc.nominalBounds;
this.mc.cache(0, 0, bounds.width, bounds.height);
var tl = new TimelineMax();
tl.to(this.mc, 0.5, {easel:{hue: 50, colorize:"green", colorizeAmount:1}})

I will try with saturation, but I think that theres something missing, that I dont understand of how this works :-)

Screenshot_1.png

Share this post


Link to post
Share on other sites

Hi @SpriteLab

 

I don't how to use Easel, but coloring like that can usually be done using a globalCompositeOperation. You draw a colored rectangle before or after you draw the image. Depending on the order you draw the image and rectangle determines the operation to use. Usually destination-in or source-atop, but there are other techniques, like using copy and multiply.

 

Just search around for how to color/tint an image using a globalCompositeOperation.

Share this post


Link to post
Share on other sites

Just a little FYI, changing the hue of something that is gray/black/white will not work. Fireworks must be changing some other components of the color.

 

Another way to do this is with a transparent overlay. See this demo. It uses SVG, but the same technique can be used for canvas.

 

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

 

 

All I'm changing is the fill color of a shape in the background. I use this transparent overlay to make it look like I'm tinting the entire phone image. Performance wise, this is probably your best option as there is no need to create a composite.

 

phone.png

 

  • Like 4

Share this post


Link to post
Share on other sites

I think you are on to something here. I will look into this, this weekend. Thank you so much

  • Like 1

Share this post


Link to post
Share on other sites

Hi !
It seems like a fast way. How did you create the overlay image? Are there any way to create it from an existing mage?
Or is that done by adding shadows. hilites etc by hand ?

 

Share this post


Link to post
Share on other sites
On 9/4/2017 at 7:19 AM, SpriteLab said:

It seems like a fast way. How did you create the overlay image? Are there any way to create it from an existing mage?
Or is that done by adding shadows. hilites etc by hand ?

 

It's really easy to do in Fireworks. Filter > Other > Covert to Alpha.

 

But before messing around with that, can you tell me more about what you're trying to do, and show me some images or something close to what you are going to be working with? How you prepare your images might depend on the type of material represented in image and the type of color blending you want to do. 

 

I can give better advice if I knew more about what you're doing.

Share this post


Link to post
Share on other sites

Hi !
Thanks. The alpha didn't look good. It gave it a darker, much shiny look.

 

But I found a solution, deep down the javascript road. Only because of your suggestion. So thanks.

 

Heres how it looks

 

function mSetColor(imName, colorImName, hex) {

console.log(":: mSetColor ::")

 

// I have two of the same images, excactly at the same coordinates

var image = pBikeContainer.getChildByName ( imName )

var colorIm = pBikeContainer.getChildByName ( colorImName ) 

 

 

// the one on top has a blending of "hard-light"

image.compositeOperation = "hard-light";

 

// here Im just converting the hex values from #FF0000 to =xFF0000

                hex = mReplace(hex, "#", "0x", false)

hex = Number(hex)

 

// get the bounds, so I can color the image

var mbounds = colorIm.getTransformedBounds();

colorIm.cache(0, 0, mbounds.width, mbounds.height);

 

// The image beneath get a tint. It will be totaly flat and one color, but the image above with a blending of "hard-ligt" will let the color through. (see attached. The left is th original. The right withe 2 images on top of eachother)

var tl = new TimelineMax();

tl.to(colorIm, 0.1, {

easel: {

tint: hex,

tintAmount: 1

}

})

}

Screenshot_1.png

  • Like 1

Share this post


Link to post
Share on other sites

Hi @SpriteLab

 

Yeah, hard-light is close to what that Velorbis site is doing, although they are doing pixel manipulation for gamma correction. That's pretty slow to do unless you are using WebGL.

 

 Like I said, it all depends on what you're doing for how you should prepare your images. Generally, you want your images to be grayscaled with a lot of contrast. 

 

For anybody else looking to do tinting, here's a demo using regular canvas. If hard light-light is not selected, it will use multiply. The controller looks better using multiply, while the bike looks better using hard-light.

 

 

  • Like 3

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×