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

#### djtoon

• Dr. Type
• Posts: 290
##### 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

#### matchy

• Prof. Inline
• Posts: 1545
##### 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.

#### Ian Price

• Prof. Inline
• Posts: 4159
• On the shoulders of giants.
##### 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]
`// GradientFUNCTION 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)  NEXTENDFUNCTION// Split colours down into componentsFUNCTION 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?

I came. I saw. I played.

#### BdR

• Dr. Type
• Posts: 303
##### 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 »

• 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

#### Slydog

• Prof. Inline
• Posts: 932
• 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 = 1CONSTANT TWEEN_TRANSITION_SPRING = 2CONSTANT TWEEN_TRANSITION_BOUNCE = 3CONSTANT TWEEN_TRANSITION_QUAD_IN = 5CONSTANT TWEEN_TRANSITION_QUAD_OUT = 6CONSTANT TWEEN_TRANSITION_QUAD_INOUT = 7CONSTANT TWEEN_TRANSITION_CUBIC_IN = 8CONSTANT TWEEN_TRANSITION_CUBIC_OUT = 9CONSTANT TWEEN_TRANSITION_CUBIC_INOUT = 10CONSTANT TWEEN_TRANSITION_QUART_IN = 11CONSTANT TWEEN_TRANSITION_QUART_OUT = 12CONSTANT TWEEN_TRANSITION_QUART_INOUT = 13CONSTANT TWEEN_TRANSITION_QUINT_IN = 14CONSTANT TWEEN_TRANSITION_QUINT_OUT = 15CONSTANT TWEEN_TRANSITION_QUINT_INOUT = 16CONSTANT TWEEN_TRANSITION_SINE_IN = 17CONSTANT TWEEN_TRANSITION_SINE_OUT = 18CONSTANT TWEEN_TRANSITION_SINE_INOUT = 19CONSTANT TWEEN_TRANSITION_EXPO_IN = 20CONSTANT TWEEN_TRANSITION_EXPO_OUT = 21CONSTANT TWEEN_TRANSITION_EXPO_INOUT = 22CONSTANT TWEEN_TRANSITION_CIRC_IN = 23CONSTANT TWEEN_TRANSITION_CIRC_OUT = 24CONSTANT TWEEN_TRANSITION_CIRC_INOUT = 25CONSTANT TWEEN_TRANSITION_BACK_IN = 26CONSTANT TWEEN_TRANSITION_BACK_OUT = 27CONSTANT TWEEN_TRANSITION_BACK_INOUT = 28FUNCTION 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 pENDFUNCTION// Transition :: L i n e a rFUNCTION TweenTransition_Linear: p1, p2, t t = Math_Clamp01(t) RETURN p1 + ((p2 - p1) * t)ENDFUNCTION// Transition :: S p r i n gFUNCTION 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) * tENDFUNCTION// Transition :: B o u n c eFUNCTION 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 ENDIFENDFUNCTION// Transition :: Q u a dFUNCTION TweenTransition_QuadIn: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN p2 * t * t + p1ENDFUNCTIONFUNCTION TweenTransition_QuadOut: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN -p2 * t * (t - 2.0) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: C u b i cFUNCTION TweenTransition_CubicIn: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN p2 * t * t * t + p1ENDFUNCTIONFUNCTION TweenTransition_CubicOut: p1, p2, t t = Math_Clamp01(t) DEC t DEC p2, p1 RETURN p2 * (t * t * t + 1.0) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: Q u a r tFUNCTION TweenTransition_QuartIn: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN p2 * t * t * t * t + p1ENDFUNCTIONFUNCTION TweenTransition_QuartOut: p1, p2, t t = Math_Clamp01(t) DEC t DEC p2, p1 RETURN -p2 * (t * t * t * t - 1.0) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: Q u i n tFUNCTION TweenTransition_QuintIn: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN p2 * t * t * t * t * t + p1ENDFUNCTIONFUNCTION TweenTransition_QuintOut: p1, p2, t t = Math_Clamp01(t) DEC t DEC p2, p1 RETURN p2 * (t * t * t * t * t + 1) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: S i n eFUNCTION TweenTransition_SineIn: p1, p2, t DEC p2, p1 RETURN -p2 * COS(t / 1.0 * (PI / 2.0)) + p2 + p1ENDFUNCTIONFUNCTION TweenTransition_SineOut: p1, p2, t DEC p2, p1 RETURN p2 * SIN(t / 1.0 * (PI / 2.0)) + p1ENDFUNCTIONFUNCTION TweenTransition_SineInOut: p1, p2, t DEC p2, p1 RETURN -p2 / 2.0 * (COS(PI * t / 1.0) - 1.0) + p1ENDFUNCTION// Transition :: E x p oFUNCTION TweenTransition_ExpoIn: p1, p2, t DEC p2, p1 RETURN p2 * POW(2.0, 10.0 * (t / 1.0 - 1.0)) + p1ENDFUNCTIONFUNCTION TweenTransition_ExpoOut: p1, p2, t DEC p2, p1 RETURN p2 * (-POW(2.0, -10 * t / 1.0) + 1.0) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: C i r cFUNCTION TweenTransition_CircIn: p1, p2, t t = Math_Clamp01(t) DEC p2, p1 RETURN -p2 * (SQR(1.0 - t * t) - 1.0) + p1ENDFUNCTIONFUNCTION TweenTransition_CircOut: p1, p2, t t = Math_Clamp01(t) DEC t DEC p2, p1 RETURN p2 * SQR(1.0 - t * t) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION// Transition :: B a c kFUNCTION 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) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTIONFUNCTION 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) + p1ENDFUNCTION`
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.

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 valueENDFUNCTION`
« Last Edit: 2011-Jan-31 by Slydog »
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

#### ampos

• Prof. Inline
• Posts: 1600
##### Re: Question: tween from rgb to rgb
« Reply #6 on: 2011-Jan-31 »
Code: (glbasic) [Select]
`R1=red source G1=green source b1=blue sourcer2=red target G2=green target b2=blue soourced=r1-r2                  // repeat for r1, g1 & b1r=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
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

#### Wampus

• Prof. Inline
• Posts: 1004
##### 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.

#### matchy

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

#### Slydog

• Prof. Inline
• Posts: 932
• 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 valueENDFUNCTION`
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`

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:
« Last Edit: 2011-Jan-31 by Slydog »
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

#### Marmor

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

#### Albert

• Dr. Type
• Posts: 257
##### 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 ENDPOLYENDFUNCTION`

#### Hark0

• Prof. Inline
• Posts: 1020
• Geek Developer
##### Re: Question: tween from rgb to rgb
« Reply #12 on: 2011-Jan-31 »
BRAVO!!!

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

#### djtoon

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

• code monkey