Jump to content
GreenSock

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

Search the Community

Showing results for tags 'hue'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 4 results

  1. GreenSock

    PixiPlugin

    PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you the headaches: //old way (without plugin): TweenMax.to(pixiObject.scale, 1, {x:2, y:1.5}); TweenMax.to(pixiObject.skew, 1, {x:30 * Math.PI / 180}); TweenMax.to(pixiObject, 1, {rotation:60 * Math.PI / 180}); //new way (with plugin): TweenMax.to(pixiObject, 1, {pixi:{scaleX:2, scaleY:1.5, skewX:30, rotation:60}}); PixiJS requires that you define color-related values in a format like 0xFF0000 but with PixiPlugin, you can define them the same way you would in CSS, like "red" | "#F00" | "#FF0000" | "rgb(255,0,0)" | "hsl(0, 100%, 50%)" | 0xFF0000. You can even do relative HSL values! "hsl(+=180, +=0%, +=0%)". Another big convenience is that PixiPlugin recognizes some special values like saturation, brightness, contrast, hue, and colorize (which all leverage a ColorMatrixFilter under the hood). Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter property and it'll handle animating between states. See the Pen PixiFilter (shortcodes and combineCMF) by GreenSock (@GreenSock) on CodePen. Lastly, PixiPlugin recognizes blur, blurX, and blurY properties, so it's very simple to apply a blur without having to create a new BlurFilter instance, add it to the filters array, and animate its properties separately. PixiPlugin significantly improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production. See the docs for details.
  2. SpriteLab

    Hue value

    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
  3. Cefn

    Tweening HSL color

    Hi all. GSAP is a great framework, really enjoying using it. However I'm struggling to get Hue tweening using HSL within the Color plugin (via CSS automatic binding). A terse attempt to set a background box which tweens its color slowly through the color wheel is as below, but no change seems to happen. TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); TweenMax.to(".wash",60,{backgroundColor:"hsl(+360_cw,50%,50%)",repeat:-1,yoyo:true,ease:Linear.easeNone}); If I remove the 'set' line, then there are some tweened changes to color, (visible in real time within Chrome when the element is selected) but they don't seem to visit the whole 360 degrees of the color wheel. Can anyone help tell me how this is meant to be specified or is a bug/missing feature with respect to degrees in HSL? For now I have the following kludge in place, but I don't like it much as I think something like the simpler syntax should work... TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); var washTl = new TimelineLite(); washTl.to(".wash",10,{backgroundColor:"hsl(120,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(240,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(360,50%,50%)",ease:Linear.easeNone}); washTl.yoyo = true; washTl.repeat = -1; washTl.play();
  4. I am using version 12.0, and I am wondering if this hue situation is a bug, or a limitation. I expect to take a solid colored object, adjust its hue around the 360 color wheel, and get a solid color back, but the colors I get are muddled. The saturation is off. I make a solid green object of 0x00FF00 (100% green). When I adjust the hue by 180, I expect it to go to the opposite side of the RGB color wheel to 100% purple, but it goes to 0xFF6EFF, or 255 for red and blue, as expected, but a green value of 110 (not 0), giving me a muddled purple. Similarly, when I try to adjust the same bright green object to bright red, using a hue adjustment of 240, it is a muddled red. I poked into the code, and see the use of Luminosity constants for R, G, and B at 0.212671, 0.715160, and 0.072169. Perhaps these are not the best constants? Perhaps the algorithm for hue adjustment on line 165 in ColorMatrixPlugin.as in version 12.0 is incorrect? var c:Number = Math.cos(n), s:Number = Math.sin(n), temp:Array = [(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]; It is pretty complex, as I assume it needs to be, but could there be something askew in there? If I use a bright green object of 0x00FF00, and adjust the hue value by 60, 120, 180, 240, or 300; I was hoping I could get bright versions of teal, blue, purple, red, yellow. but it appears I can not get bright objects out of the hue transformation function. [in my attached image, I use two identical looking bright green circles, and adjust the right one to get bright red using code, but it does not come out as bright red. TweenMax.to(adjustedSprite, 1, {colorMatrixFilter:{hue:240 }} ); I remember reading about how Flash doesn't always work like Photoshop does, but this is just a color wheel hue issue, no? Thanks in advance, jimmi.
×