### Author Topic: Question: tween from rgb to rgb  (Read 4342 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: 1540
##### 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

• Administrator
• Prof. Inline
• Posts: 4144
• 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]
// 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.

#### 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 »

#### 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

#### Slydog

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

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]

#### ampos

• Prof. Inline
• Posts: 1594
##### 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
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: 1540
##### Re: Question: tween from rgb to rgb
« Reply #8 on: 2011-Jan-31 »
Slydog, that's an ace lib!

#### Slydog

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

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]

#### Marmor

• Community Developer
• Prof. Inline
• Posts: 908
• 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
ENDPOLY
ENDFUNCTION

#### 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

#### Kitty Hello

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