Author Topic: Question: tween from rgb to rgb  (Read 4342 times)

Offline djtoon

  • Dr. Type
  • ****
  • Posts: 290
    • View Profile
Question: tween from rgb to rgb
« on: 2011-Jan-31 »
hi im trying to tween from

rgb(200,193,23) to rgb(100,200,100)

any ideas?
im stuck:(

10x

Offline matchy

  • Prof. Inline
  • *****
  • Posts: 1540
    • View Profile
Re: Question: tween from rgb to rgb
« Reply #1 on: 2011-Jan-31 »
I presume that is an example as you can use any colour. Split into R,G & B and apply a produce ratio (and/or sin fade) and then stitch them back.

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4144
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: Question: tween from rgb to rgb
« Reply #2 on: 2011-Jan-31 »
Do you want that as a grduated gradient sort of thing?

I use this (based on someone else's code, who I can't remember now, but thanks to them).

Code: GLBasic [Select]
// Gradient
FUNCTION gradient: x1, y1, x2, y2, colour1, colour2

  LOCAL cr1, cg1, cb1
  LOCAL cr2, cg2, cb2
  LOCAL dr, dg, db
  LOCAL red, green, blue
  LOCAL count

  SplitColour(colour1, cr1, cg1, cb1)
  SplitColour(colour2, cr2, cg2, cb2)

  count = y2 - y1 + 1

  dr = (cr1 - cr2) / count
  dg = (cg1 - cg2) / count
  db = (cb1 - cb2) / count

  FOR i = 0 TO count
    red = cr1 - i * dr
    green = cg1 - i * dg
    blue = cb1 -i * db
    DRAWLINE x1, y1 + i, x2, y1 + i, RGB(red, green, blue)
  NEXT

ENDFUNCTION


// Split colours down into components
FUNCTION SplitColour: colour, BYREF red, BYREF green, BYREF blue

  red = BAND(colour, 255)
  green = BAND(colour / 256, 255)
  blue = BAND(colour / POW(256, 2), 255)

ENDFUNCTION
 

I used this function in my Blitz game to give every level a nice gradient. The colours you specified give the result seen in the attachment. Is this what your wanted?

[attachment deleted by admin]
I came. I saw. I played.

Offline BdR

  • Dr. Type
  • ****
  • Posts: 303
    • View Profile
    • BdR Games
Re: Question: tween from rgb to rgb
« Reply #3 on: 2011-Jan-31 »
@djtoon: your questions always seem to be a bit short and cryptic.. What have you tried that didn't work? Also, I don't know what "tween" means.

edit: aha just saw the post by Ian Price, you mean a smooth transition from one RGB value to another..
« Last Edit: 2011-Jan-31 by BdR »

MrTAToad

  • Guest
Re: Question: tween from rgb to rgb
« Reply #4 on: 2011-Jan-31 »
Tween is a smooth transition from one colour to another.  An example would be a day to night transition

Offline Slydog

  • Prof. Inline
  • *****
  • Posts: 930
  • KodeSource
    • View Profile
    • KodeSource
Re: Question: tween from rgb to rgb
« Reply #5 on: 2011-Jan-31 »
To start, here's a portion of my Tween library:

Code: GLBasic [Select]
CONSTANT TWEEN_TRANSITION_LINEAR = 1
CONSTANT TWEEN_TRANSITION_SPRING = 2
CONSTANT TWEEN_TRANSITION_BOUNCE = 3
CONSTANT TWEEN_TRANSITION_QUAD_IN = 5
CONSTANT TWEEN_TRANSITION_QUAD_OUT = 6
CONSTANT TWEEN_TRANSITION_QUAD_INOUT = 7
CONSTANT TWEEN_TRANSITION_CUBIC_IN = 8
CONSTANT TWEEN_TRANSITION_CUBIC_OUT = 9
CONSTANT TWEEN_TRANSITION_CUBIC_INOUT = 10
CONSTANT TWEEN_TRANSITION_QUART_IN = 11
CONSTANT TWEEN_TRANSITION_QUART_OUT = 12
CONSTANT TWEEN_TRANSITION_QUART_INOUT = 13
CONSTANT TWEEN_TRANSITION_QUINT_IN = 14
CONSTANT TWEEN_TRANSITION_QUINT_OUT = 15
CONSTANT TWEEN_TRANSITION_QUINT_INOUT = 16
CONSTANT TWEEN_TRANSITION_SINE_IN = 17
CONSTANT TWEEN_TRANSITION_SINE_OUT = 18
CONSTANT TWEEN_TRANSITION_SINE_INOUT = 19
CONSTANT TWEEN_TRANSITION_EXPO_IN = 20
CONSTANT TWEEN_TRANSITION_EXPO_OUT = 21
CONSTANT TWEEN_TRANSITION_EXPO_INOUT = 22
CONSTANT TWEEN_TRANSITION_CIRC_IN = 23
CONSTANT TWEEN_TRANSITION_CIRC_OUT = 24
CONSTANT TWEEN_TRANSITION_CIRC_INOUT = 25
CONSTANT TWEEN_TRANSITION_BACK_IN = 26
CONSTANT TWEEN_TRANSITION_BACK_OUT = 27
CONSTANT TWEEN_TRANSITION_BACK_INOUT = 28

FUNCTION Tween_Get: transition_type%, p1, p2, time
        LOCAL p
        SELECT transition_type
        CASE TWEEN_TRANSITION_LINEAR;           p = TweenTransition_Linear        (p1, p2, time)
        CASE TWEEN_TRANSITION_SPRING;           p = TweenTransition_Spring    (p1, p2, time)
        CASE TWEEN_TRANSITION_BOUNCE;           p = TweenTransition_Bounce    (p1, p2, time)
        CASE TWEEN_TRANSITION_QUAD_IN;          p = TweenTransition_QuadIn    (p1, p2, time)
        CASE TWEEN_TRANSITION_QUAD_OUT;         p = TweenTransition_QuadOut   (p1, p2, time)
        CASE TWEEN_TRANSITION_QUAD_INOUT;       p = TweenTransition_QuadInOut (p1, p2, time)
        CASE TWEEN_TRANSITION_CUBIC_IN;         p = TweenTransition_CubicIn   (p1, p2, time)
        CASE TWEEN_TRANSITION_CUBIC_OUT;        p = TweenTransition_CubicOut  (p1, p2, time)
        CASE TWEEN_TRANSITION_CUBIC_INOUT;      p = TweenTransition_CubicInOut(p1, p2, time)
        CASE TWEEN_TRANSITION_QUART_IN;         p = TweenTransition_QuartIn   (p1, p2, time)
        CASE TWEEN_TRANSITION_QUART_OUT;        p = TweenTransition_QuartOut  (p1, p2, time)
        CASE TWEEN_TRANSITION_QUART_INOUT;      p = TweenTransition_QuartInOut(p1, p2, time)
        CASE TWEEN_TRANSITION_QUINT_IN;         p = TweenTransition_QuintIn   (p1, p2, time)
        CASE TWEEN_TRANSITION_QUINT_OUT;        p = TweenTransition_QuintOut  (p1, p2, time)
        CASE TWEEN_TRANSITION_QUINT_INOUT;      p = TweenTransition_QuintInOut(p1, p2, time)
        CASE TWEEN_TRANSITION_SINE_IN;          p = TweenTransition_SineIn    (p1, p2, time)
        CASE TWEEN_TRANSITION_SINE_OUT;         p = TweenTransition_SineOut   (p1, p2, time)
        CASE TWEEN_TRANSITION_SINE_INOUT;       p = TweenTransition_SineInOut (p1, p2, time)
        CASE TWEEN_TRANSITION_EXPO_IN;          p = TweenTransition_ExpoIn    (p1, p2, time)
        CASE TWEEN_TRANSITION_EXPO_OUT;         p = TweenTransition_ExpoOut   (p1, p2, time)
        CASE TWEEN_TRANSITION_EXPO_INOUT;       p = TweenTransition_ExpoInOut (p1, p2, time)
        CASE TWEEN_TRANSITION_CIRC_IN;          p = TweenTransition_CircIn    (p1, p2, time)
        CASE TWEEN_TRANSITION_CIRC_OUT;         p = TweenTransition_CircOut   (p1, p2, time)
        CASE TWEEN_TRANSITION_CIRC_INOUT;       p = TweenTransition_CircInOut (p1, p2, time)
        CASE TWEEN_TRANSITION_BACK_IN;          p = TweenTransition_BackIn    (p1, p2, time)
        CASE TWEEN_TRANSITION_BACK_OUT;         p = TweenTransition_BackOut   (p1, p2, time)
        CASE TWEEN_TRANSITION_BACK_INOUT;       p = TweenTransition_BackInOut (p1, p2, time)
        ENDSELECT
        RETURN p
ENDFUNCTION

// Transition :: L i n e a r
FUNCTION TweenTransition_Linear: p1, p2, t
        t = Math_Clamp01(t)
        RETURN p1 + ((p2 - p1) * t)
ENDFUNCTION

// Transition :: S p r i n g
FUNCTION TweenTransition_Spring: p1, p2, t
        t = Math_Clamp01(t)
        t = (SIN(t * PI * (0.2 + 2.5 * t * t * t)) * POW(1.0 - t, 2.2) + t) * (1.0 + (1.2 * (1.0 - t)))
        RETURN p1 + (p2 - p1) * t
ENDFUNCTION

// Transition :: B o u n c e
FUNCTION TweenTransition_Bounce: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        IF t < (1.0 / 2.75)
                RETURN p2 * (7.5625 * t * t) + p1
        ELSEIF t < (2.0 / 2.75)
                DEC t, (1.5 / 2.75)
                RETURN p2 * (7.5625 * t * t + 0.75) + p1
        ELSEIF t < (2.5 / 2.75)
                DEC t, (2.25 / 2.75)
                RETURN p2 * (7.5625 * t * t + 0.9375) + p1
        ELSE
                DEC t, (2.625 / 2.75)
                RETURN p2 * (7.5625 * t * t + 0.984375) + p1
        ENDIF
ENDFUNCTION


// Transition :: Q u a d
FUNCTION TweenTransition_QuadIn: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN p2 * t * t + p1
ENDFUNCTION

FUNCTION TweenTransition_QuadOut: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN -p2 * t * (t - 2.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_QuadInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF t < 1.0 THEN RETURN p2 / 2.0 * t * t + p1
        DEC t
        RETURN -p2 / 2.0 * (t * (t - 2.0) - 1.0) + p1
ENDFUNCTION


// Transition :: C u b i c
FUNCTION TweenTransition_CubicIn: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN p2 * t * t * t + p1
ENDFUNCTION

FUNCTION TweenTransition_CubicOut: p1, p2, t
        t = Math_Clamp01(t)
        DEC t
        DEC p2, p1
        RETURN p2 * (t * t * t + 1.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_CubicInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF t < 1.0 THEN RETURN p2 / 2.0 * t * t * t + p1
        DEC t, 2.0
        RETURN p2 / 2.0 * (t * t * t + 2.0) + p1
ENDFUNCTION


// Transition :: Q u a r t
FUNCTION TweenTransition_QuartIn: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN p2 * t * t * t * t + p1
ENDFUNCTION

FUNCTION TweenTransition_QuartOut: p1, p2, t
        t = Math_Clamp01(t)
        DEC t
        DEC p2, p1
        RETURN -p2 * (t * t * t * t - 1.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_QuartInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF (t < 1.0) THEN RETURN p2 / 2.0 * t * t * t * t + p1
        DEC t, 2.0
        RETURN -p2 / 2.0 * (t * t * t * t - 2.0) + p1
ENDFUNCTION


// Transition :: Q u i n t
FUNCTION TweenTransition_QuintIn: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN p2 * t * t * t * t * t + p1
ENDFUNCTION

FUNCTION TweenTransition_QuintOut: p1, p2, t
        t = Math_Clamp01(t)
        DEC t
        DEC p2, p1
        RETURN p2 * (t * t * t * t * t + 1) + p1
ENDFUNCTION

FUNCTION TweenTransition_QuintInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF (t < 1.0) THEN RETURN p2 / 2.0 * t * t * t * t * t + p1
        DEC t, 2.0
        RETURN p2 / 2.0 * (t * t * t * t * t + 2.0) + p1
ENDFUNCTION


// Transition :: S i n e
FUNCTION TweenTransition_SineIn: p1, p2, t
        DEC p2, p1
        RETURN -p2 * COS(t / 1.0 * (PI / 2.0)) + p2 + p1
ENDFUNCTION

FUNCTION TweenTransition_SineOut: p1, p2, t
        DEC p2, p1
        RETURN p2 * SIN(t / 1.0 * (PI / 2.0)) + p1
ENDFUNCTION

FUNCTION TweenTransition_SineInOut: p1, p2, t
        DEC p2, p1
        RETURN -p2 / 2.0 * (COS(PI * t / 1.0) - 1.0) + p1
ENDFUNCTION


// Transition :: E x p o
FUNCTION TweenTransition_ExpoIn: p1, p2, t
        DEC p2, p1
        RETURN p2 * POW(2.0, 10.0 * (t / 1.0 - 1.0)) + p1
ENDFUNCTION

FUNCTION TweenTransition_ExpoOut: p1, p2, t
        DEC p2, p1
        RETURN p2 * (-POW(2.0, -10 * t / 1.0) + 1.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_ExpoInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF (t < 1.0) THEN RETURN p2 / 2.0 * POW(2.0, 10.0 * (t - 1.0)) + p1
        DEC t
        RETURN p2 / 2.0 * (-POW(2.0, -10.0 * t) + 2.0) + p1
ENDFUNCTION


// Transition :: C i r c
FUNCTION TweenTransition_CircIn: p1, p2, t
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN -p2 * (SQR(1.0 - t * t) - 1.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_CircOut: p1, p2, t
        t = Math_Clamp01(t)
        DEC t
        DEC p2, p1
        RETURN p2 * SQR(1.0 - t * t) + p1
ENDFUNCTION

FUNCTION TweenTransition_CircInOut: p1, p2, t
        t = t / 0.5
        DEC p2, p1
        IF (t < 1.0) THEN RETURN -p2 / 2.0 * (SQR(1.0- t * t) - 1.0) + p1
        DEC t, 2.0
        RETURN p2 / 2.0 * (SQR(1.0 - t * t) + 1.0) + p1
ENDFUNCTION


// Transition :: B a c k
FUNCTION TweenTransition_BackIn: p1, p2, t
        LOCAL s = 1.70158;
        t = Math_Clamp01(t)
        DEC p2, p1
        RETURN p2 * t * t * ((s + 1.0) * t - s) + p1
ENDFUNCTION

FUNCTION TweenTransition_BackOut: p1, p2, t
        LOCAL s = 1.70158
        t = Math_Clamp01(t) - 1.0
        DEC p2, p1
        RETURN p2 * (t * t * ((s + 1) * t + s) + 1.0) + p1
ENDFUNCTION

FUNCTION TweenTransition_BackInOut: p1, p2, t
        LOCAL s = 1.70158
        DEC p2, p1
        t = t / 0.5
        IF t < 1
                s = s * 1.525
                RETURN p2 / 2.0 * (t * t * ((s + 1.0) * t - s)) + p1
        ENDIF
        DEC t, 2
        s = s * 1.525
        RETURN p2 / 2.0 * (t * t * ((s + 1.0) * t + s) + 2.0) + p1
ENDFUNCTION

This allows for more than the basic linear Tween, and gives some cool Tween effects like 'bounce'.
In your colour scenario, that means you'll be able to have the colour bounce when it gets near the end (better for objects than colour!).

Basically, given two values (p1, p2) and a time factor (between 0.0 and 1.0), it will return the value factored between p1 and p2 based on the time.  This is great for moving sprites, 3D objects, or any value, from one point to another smoothly over a set time period.  It could be applied to the object's size, rotation, location, colour, etc.

But you want a colour transition, which will require three calls to the above function (Tween_Get()).
Here's a specific colour tweening function I just made up, bet never tested: (Defaults to Linear transition, but you can override)
Code: GLBasic [Select]
FUNCTION ColourTween%: colour_1%, colour_2%, time#, tween_type%=TWEEN_TRANSITION_LINEAR
        LOCAL r%, g%, b%
        LOCAL r1%, g1%, b1%
        LOCAL r2%, g2%, b2%

        r1 = BAND(colour_1, 0xff)
        g1 = BAND(colour_1/0x100, 0xff)
        b1 = BAND(colour_1/0x10000, 0xff)

        r2 = BAND(colour_2, 0xff)
        g2 = BAND(colour_2/0x100, 0xff)
        b2 = BAND(colour_2/0x10000, 0xff)

    r = Tween_Get(tween_type, r1, r2, time)
    g = Tween_Get(tween_type, g1, g2, time)
    b = Tween_Get(tween_type, b1, b2, time)

    RETURN RGB(r, g, b)
ENDFUNCTION
 

To figure out the time value, just divide your current animation ms by the total animation period, to scale it between 0.0 and 1.0.
For example, say you are 248 ms into a 2000 ms colour transition, to get the current colour you would call it like this:
Code: GLBasic [Select]
colour_tween% = ColourTween(RGB(200,193,23), RGB(100,200,100), 248.0 / 2000.0, TWEEN_TRANSITION_EXPO_OUT)

Try it out, and let me know any bugs as I've never tried it yet.

[Edit]
Of course you can omit most of the Tween library and just include the tween effect you're looking for (ie. TweenTransition_Linear) and change each Tween_Get call in ColourTween() to TweenTransition_Linear(r1, r2, time), etc.

[Edit 2]
Fixed bug in ColourTween()

[Edit 3]
Missed one function:
Code: GLBasic [Select]
FUNCTION Math_Clamp01: value
   IF value > 1 THEN return 1.0
   IF value < 0 THEN return 0.0
   RETURN value
ENDFUNCTION
« Last Edit: 2011-Jan-31 by Slydog »
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1594
    • View Profile
    • AMpostata Website
Re: Question: tween from rgb to rgb
« Reply #6 on: 2011-Jan-31 »
Code: GLBasic [Select]
R1=red source G1=green source b1=blue source
r2=red target G2=green target b2=blue soource

d=r1-r2                  // repeat for r1, g1 & b1
r=r1+(SGN(d)*.5)  // .5 is the speed of the fade
 

Call this function 255*.5 for complete color-fade
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

Offline Wampus

  • Prof. Inline
  • *****
  • Posts: 1004
    • View Profile
Re: Question: tween from rgb to rgb
« Reply #7 on: 2011-Jan-31 »
Slydog thanks very much for a look at that tween library of yours. Whole lot of useful stuff there.

Offline matchy

  • Prof. Inline
  • *****
  • Posts: 1540
    • View Profile
Re: Question: tween from rgb to rgb
« Reply #8 on: 2011-Jan-31 »
Slydog, that's an ace lib!

Offline Slydog

  • Prof. Inline
  • *****
  • Posts: 930
  • KodeSource
    • View Profile
    • KodeSource
Re: Question: tween from rgb to rgb
« Reply #9 on: 2011-Jan-31 »
Oops! Missed one function:
Code: GLBasic [Select]
FUNCTION Math_Clamp01: value
        IF value > 1 THEN return 1.0
        IF value < 0 THEN return 0.0
        RETURN value
ENDFUNCTION
 

And thanks, but I can't take too much credit for the library, I just ported some of the useful functions from iTween, a Unity3D tween library.

I'm updating it to allow more than 2 points and have it interpolate using curves.
Then apply that to a sprite, 3D object, or camera, to smoothly follow a set path, but 'round' the corners.
So if you have a path with four corner points defined it will almost make a circular path around the points.

Here's the basic curve function if anybody is interested:
(You need four points, and the current position is always between p1 and p2, with p0 being the point before p1 and p3 being after p2).
Code: GLBasic [Select]
FUNCTION TweenTransition_Cosine: p0, p1, p2, p3, t
        LOCAL a0, a1, a2, a3, t2
        t2 = t * t
        a0 = p3 - p2 - p0 + p1
        a1 = p0 - p1 - a0
        a2 = p2 - p0
        a3 = p1
        RETURN (a0 * t * t2 + a1 * t2 + a2 * t + a3)
ENDFUNCTION

[Edit]
It's been a while, but I assume to use the above curving function, you would just pass the [x,y] (or [x,y,z] if 3D) coordinates separately using 2 calls, one for all the x values, then again for all the y values.

[Edit 2]
Found a great example of a Bezier curving tween, with source code:
http://www.reflektions.com/miniml/template_permalink.asp?id=271
« Last Edit: 2011-Jan-31 by Slydog »
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

Offline Marmor

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 908
  • 96A285CC
    • View Profile
    • my youtube channel
Re: Question: tween from rgb to rgb
« Reply #10 on: 2011-Jan-31 »
this is really great !  thx

Offline Albert

  • Dr. Type
  • ****
  • Posts: 257
    • View Profile
    • Blog
Re: Question: tween from rgb to rgb
« Reply #11 on: 2011-Jan-31 »
I'm used Polyvector in Draco:
Code: GLBasic [Select]
FUNCTION grad: x, y, w, h, color0, color1
         STARTPOLY -1
          POLYVECTOR   x,   y, 0, 0, color0
          POLYVECTOR   x, y+h, 0, 0, color0
          POLYVECTOR x+w, y+h, 0, 0, color1
          POLYVECTOR x+w,   y, 0, 0, color1
         ENDPOLY
ENDFUNCTION

Offline Hark0

  • Prof. Inline
  • *****
  • Posts: 1020
  • Geek Developer
    • View Profile
    • LitioPixel - Desarrollo de videojuegos con GLBasic | Videogame development with GLBasic
Re: Question: tween from rgb to rgb
« Reply #12 on: 2011-Jan-31 »
BRAVO!!!

 :good:
http://litiopixel.blogspot.com
litiopixel.blogspot.com - Desarrollo videojuegos Indie · Pixel-Art · Retroinformática · Electrónica Development Indie Videogames · Pixel-Art · Retrocomputing · Electronic

Offline djtoon

  • Dr. Type
  • ****
  • Posts: 290
    • View Profile
Re: Question: tween from rgb to rgb
« Reply #13 on: 2011-Feb-01 »
wOW thanks all :) you solved my problem :)

Offline Kitty Hello

  • code monkey
  • Administrator
  • Prof. Inline
  • *******
  • Posts: 10697
  • here on my island the sea says 'hello'
    • View Profile
    • http://www.glbasic.com
Re: Question: tween from rgb to rgb
« Reply #14 on: 2011-Feb-01 »
Wow, that's awesome!