Question: tween from rgb to rgb

Previous topic - Next topic

djtoon

hi im trying to tween from

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

any ideas?
im stuck:(

10x

matchy

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

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

#3
@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..

MrTAToad

Tween is a smooth transition from one colour to another.  An example would be a day to night transition

Slydog

#5
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
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

ampos

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

Wampus

Slydog thanks very much for a look at that tween library of yours. Whole lot of useful stuff there.

matchy

Slydog, that's an ace lib!

Slydog

#9
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
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

Marmor

this is really great !  thx

Albert

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

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

djtoon

wOW thanks all :) you solved my problem :)

Kitty Hello