Computer Science Canada

[Tutorial] Fading Text Effects
Author:  TheZsterBunny [ Mon May 31, 2004 7:03 am ]
Post subject:  [Tutorial] Fading Text Effects
i've used this effect in some of my programs; it looks very much like flash provided you use the right colors.

Lets make our intro window nice and small


Your colors will be:

-black background
-pure blue intro text
-orange 'risk' text

we begin simply with this:
code:

setscreen ("offscreenonly,nobuttonbar,position:truemiddle,centre,graphics:400;300")
colorback(7) % Black
cls


nice, this will do well for our little intro

perhaps it is time now to familiarize yourself with the RGB module (which I love)

RGB.anything will always use three real numbers as red, green, and blue 'amount of color' values.


time for some math:

its time to think about what we want to do with our colors.
lets have our first text fade from black to pure blue over the course of two seconds.

for slower computers, we can have fewer colors generated, and a longer delay, but for our purposes, we're going to generate 40 colors at 50msec intervals



code:

var clr : int := 218 % The color to assign to
var text1 : int := Font.New ("Times New Roman:18:Bold") % First Font

for i : 0 .. 39
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    delay (50)
end for
delay (1000)
for decreasing i : 39 .. 0
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    delay (50)
end for


This takes 2 seconds to fade in, leaves it for one second, and fades it out in 2 seconds. if you look really carefully, turing leaves little jaggies where it darkens the text. this can be solved simply with a black box.


code:

for i : 0 .. 39
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    drawfillbox ((maxx div 2) - Font.Width ("Welcome to...", text1) - 5, (maxy div 2) - 13, ((maxx div 2) + Font.Width ("Welcome to...", text1) + 5), (maxy div 2) + 13, 7)
    delay (50)
end for
delay (1000)
for decreasing i : 39 .. 0
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    drawfillbox ((maxx div 2) - Font.Width ("Welcome to...", text1) - 5, (maxy div 2) - 13, ((maxx div 2) + Font.Width ("Welcome to...", text1) + 5), (maxy div 2) + 13, 7)
    delay (50)
end for



Our problem is solved.

There is much more you can do with this, which i'll post later.

here is the full code for you again.
code:

setscreen ("offscreenonly,nobuttonbar,position:truemiddle,centre,graphics:400;300")
colorback (7) % Black
cls
var clr : int := 218 % The color to assign to
var text1 : int := Font.New ("Times New Roman:18:Bold") % First Font

for i : 0 .. 39
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    drawfillbox ((maxx div 2) - Font.Width ("Welcome to...", text1) - 5, (maxy div 2) - 13, ((maxx div 2) + Font.Width ("Welcome to...", text1) + 5), (maxy div 2) + 13, 7)
    delay (50)
end for
delay (1000)
for decreasing i : 39 .. 0
    RGB.SetColor (clr, 0, 0, i / 39)
    Font.Draw ("Welcome to...", (maxx div 2) - (Font.Width ("Welcome to...", text1) div 2), (maxy div 2) - 9, text1, clr)
    View.Update
    drawfillbox ((maxx div 2) - Font.Width ("Welcome to...", text1) - 5, (maxy div 2) - 13, ((maxx div 2) + Font.Width ("Welcome to...", text1) + 5), (maxy div 2) + 13, 7)
    delay (50)
end for


if you want, you can save the colors generated to an array (if you wish to use them later)

I've attached a file where i've done very much custom-color-generation, so as people can see the beauty of this module.

+boxrow.t

-Z
[/code]
Author:  aside [ Thu Jun 03, 2004 2:30 am ]
Post subject: 
is it possible to fade a picture? I mean other than doing it pixel by pixel?
Author:  TheZsterBunny [ Thu Jun 03, 2004 4:35 am ]
Post subject: 
other than doing it pixel by pixel? i don't think so.

My tutorial shows how to do an effect which resembles fading text.

There is no transparency, i am just changing the text pixel by pixel.

If you generate the pictures in turing, there should be no problem fading.

-Z
Author:  TheZsterBunny [ Sun Jan 30, 2005 4:37 pm ]
Post subject: 
Due to a number of requests (1), I will be expanding on the use of the RGB module.

lets have some code ^_^

code:

proc drawFadePic (x, y : int, picID : int, alpha : real, forbid : int)
    setscreen ("offscreenonly")
    var drawOver : int

    type ptclr :
        record
            r, g, b : real
        end record
    var forbidden : ptclr
    RGB.GetColor (forbid, forbidden.r, forbidden.g, forbidden.b)
    var colorcomp : array 0 .. Pic.Width (picID), 0 .. Pic.Height (picID), 1 .. 2 of ptclr
    for i : x .. Pic.Width (picID) + x
        for j : y .. Pic.Height (picID) + y
            RGB.GetColor (whatdotcolor (i, j), colorcomp (i - x, j - y, 1).r, colorcomp (i - x, j - y, 1).g, colorcomp (i - x, j - y, 1).b)
        end for
    end for
    Pic.Draw (picID, x, y, picCopy)
    var tcolor : int := 7
    for i : x .. Pic.Width (picID) + x
        for j : y .. Pic.Height (picID) + y
            RGB.GetColor (whatdotcolor (i, j), colorcomp (i - x, j - y, 2).r, colorcomp (i - x, j - y, 2).g, colorcomp (i - x, j - y, 2).b)
            if colorcomp (i - x, j - y, 2).r = forbidden.r & colorcomp (i - x, j - y, 2).g = forbidden.g & colorcomp (i - x, j - y, 2).b = forbidden.b then
                colorcomp (i - x, j - y, 2) := colorcomp (i - x, j - y, 1)
            end if
            RGB.SetColor (tcolor,
                (colorcomp (i - x, j - y, 1).r * (1 - alpha)) + (colorcomp (i - x, j - y, 2).r * alpha),
                (colorcomp (i - x, j - y, 1).g * (1 - alpha)) + (colorcomp (i - x, j - y, 2).g * alpha),
                (colorcomp (i - x, j - y, 1).b * (1 - alpha)) + (colorcomp (i - x, j - y, 2).b * alpha))
            drawdot (i, j, tcolor)
        end for
    end for
    View.Update
    setscreen ("nooffscreenonly")
end drawFadePic

var ghost, house : int

ghost := Pic.FileNew ("ghost.jpg")
house := Pic.FileNew ("hauntedhouse.jpg")
Pic.Draw (house, 0, 0, picCopy)
% This is added to make the house look bad. It makes the ghost look better.
for i : 1 .. maxx
    for j : 1 .. maxy
        drawdot (i, j, whatdotcolor (i, j))
    end for
end for

drawFadePic (50, 50, ghost, 0.2, RGB.AddColor (1, 0, 1))


yes, you CAN fade pictures. it looks crappy, but its turing!
alright, in this program I've tried to use all the RGB commands. lets break them down!

Throughout this exercise, I will repeat variable names. notibly r, g, and b. they stand for 'red' 'green' and 'blue' respectively.

code:

RGB.AddColor (r,g,b) : int

We are creating a new color with our specified red green and blue values.

These values MUST be between 0 and 1. some sample colors.

RGB.AddColor(1,0,0) --> pure red
RGB.AddColor(0,0,1) --> pure blue
RGB.AddColor(1,0,1) --> pepto-bismol pink.

next we have
code:

RGB.SetColor(clr,r,g,b)

Here, you can set an existing color to a new one.

i.e.
RGB.SetColor(7,0.5,0.5,0.5) --> Color 7 (originally black) is now grey.


code:

RGB.GetColor(clr,r,g,b)


NO! this is NOT the RGB equivalent to whatdotcolor! This value returns the red, green, and blue amounts of an existing turing color.

i.e.
RGB.GetColor(7,r,g,b) --> r, g, and b all have been assigned a value of 0.5 (following last example)

however, for the curious,
RGB.GetColor(whatdotcolor(x,y),r,g,b) will return the values of the closest existing turing color.

..and thats pretty much all you'll need. Also, because this is a canadian programming language, you can use the canadian spellings of 'colour' in every case.

-Z

ah, yes. how to use my procedure.

drawFadePic(x,y,[picture ID number], [fade amound], ['clear' color])
Author:  Cervantes [ Sun Jan 30, 2005 4:50 pm ]
Post subject: 
Thanks Zster. Complete RGB tutorial Very Happy
Mind you, boxrow.t is still not there. Do you still have it?
+bits

-Cervantes
Author:  TheZsterBunny [ Sun Jan 30, 2005 7:02 pm ]
Post subject: 
I reformatted in aug. I don't have any of that project anymore. I don't have my paint, i don't have my game, i don't have my other game...

I think it is still included with the Vexed file tho'

-Z
Author:  cycro1234 [ Mon Jan 31, 2005 10:14 am ]
Post subject: 
Awsome effects! Thx Very Happy Perfect for my intros Razz
Author:  TheZsterBunny [ Mon Jan 31, 2005 3:52 pm ]
Post subject: 
this is a TUTORIAL, not a CODE-GIVE-AWAY session. use with creds plz.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy