Computer Science Canada

Gradient Module

Author:  Mackie [ Fri Jan 25, 2008 8:02 pm ]
Post subject:  Gradient Module

Last night I worked tirelessly to perfect gradient colours. As some may remember from a topic that I have cited in my source. I turned what I have gotten so far into a module. It can do various things, although I plan for quite a few more features for future releases.

Here is an example of the module at work:
Posted Image, might have been reduced in size. Click Image to view fullscreen.

It is fairly simple. So far there are 3 commands.

Gradient.Box(X1, Y1, X2, Y2, LeftColor, RightColor : int, Ratio : real) - This has a linear gradient.
Gradient.BoxUp(X1, Y1, X2, Y2, TopColor, BottomColor : int, Ratio : real) - This has a vertical linear gradient.
Gradient.Oval(X, Y, Radius, OuterColor, InnerColor : int, Ratio : real) - This is has a radial gradient.

The Oval has to be perfectly round until I figure out some more stuff. Also The ratio is still experimental. Ratio is the parameter that controls the prominence of each color. The lower it is the more the right side will be prominent.

It's not perfect, but it's a start. I will be adding more features gradually and releasing them in this thread. I hope you like it, and find a use for it.

Please feel free to give any suggestions or, feature ideas. Module and examples included.

Author:  fishtastic [ Fri Jan 25, 2008 10:29 pm ]
Post subject:  Re: Gradient Module

Turing:
import Gradient in "gradient.tu"
Draw.FillBox (0, 0, maxx, maxy, black)
loop
    Gradient.Oval (maxx div 2, maxy div 2, 50, Rand.Int (1, 255), Rand.Int (1, 255), 1.0)
    var next := getchar
end loop


When i ran this.
the colour becomes imperfect after few key strokes.
I found that after maxcolour gets greater than around 1000
Turing can no longer return a proper number for the colour. (at least on my computer),

the program itself is awesome, it filled a gap in the standard turing features.

good job! Smile

Author:  Mackie [ Fri Jan 25, 2008 10:54 pm ]
Post subject:  Re: Gradient Module

Ok, I'm currently working out that glitch. It seems just so odd to me though. I don't see any reason why it is happening. Thanks for pointing it out though. It actually helps a lot, because thats something I wouldn't have tried.

Author:  StealthArcher [ Sat Jan 26, 2008 12:41 am ]
Post subject:  RE:Gradient Module

I think I'll put my brain to work, and add some stuff.

Author:  ericfourfour [ Sat Jan 26, 2008 12:55 am ]
Post subject:  RE:Gradient Module

Turing might be limited to a certain amount of colour ids. Once it gets to that limit, it has to pick the closest to what you requested.

Author:  StealthArcher [ Sat Jan 26, 2008 1:01 am ]
Post subject:  RE:Gradient Module

Yeah, I would know, seeing as in my HBM converter I have to have separate procs for red blue and green grdients.

Author:  fishtastic [ Sat Jan 26, 2008 2:35 pm ]
Post subject:  RE:Gradient Module

if maxcolour > 1023 then
turing stops returning proper colour number.
this is same when you use Pic.New in turing.

Turing allow you to create new colours or preload pictures but only up to a certain num, this is why turing never included gradient drawing.

only if you can somehow destroy the created colours....

Author:  StealthArcher [ Sat Jan 26, 2008 2:45 pm ]
Post subject:  Re: Gradient Module

Or make Calculatecolor use RGB.SetColor Instead like so (255,RBeg,GBeg,BBeg) then result 255. Voila, never runs out of colors.

I'll upload some changes and improvements I've made tonight.

Author:  ericfourfour [ Sat Jan 26, 2008 3:31 pm ]
Post subject:  RE:Gradient Module

RGB.SetColour modifies what it bases everything off of. If you use RGB.SetColour, you will have to change how you use whatdotcolour, and all of the other colour related functions.

Really, Turing is the problem. The memory manager for colours was poorly designed. There is a Free procedure for pictures, fonts, etc. The RGB module does not have a Free procedure. When HoltSoft designed the module they should have allowed atleast 2^16 instead of 2^10 colour ids.

Author:  fishtastic [ Sat Jan 26, 2008 3:56 pm ]
Post subject:  Re: Gradient Module

got it. I was so stupid..

simply replace this
Turing:
function CalculateColor (StartColor, EndColor : int, Ratio : real) : int

        % Variables used to store inputed colors Seperate RGB values.
        var StartRED, StartGREEN, StartBLUE, EndRED, EndGREEN, EndBLUE : real

        % Figures out and stores values from the two inputed values.
        RGB.GetColour (StartColor, StartRED, StartGREEN, StartBLUE)
        RGB.GetColour (EndColor, EndRED, EndGREEN, EndBLUE)

        % Calculates and declares values used for the result.
        var RED : real := StartRED * Ratio + EndRED * (1 - Ratio)
        var GREEN : real := StartGREEN * Ratio + EndGREEN * (1 - Ratio)
        var BLUE : real := StartBLUE * Ratio + EndBLUE * (1 - Ratio)

        % Output Results
        RGB.SetColour (RED, GREEN, BLUE)
    end CalculateColor


with this
Turing:
  function CalculateColor (StartColor, EndColor : int, Ratio : real) : int

        % Variables used to store inputed colors Seperate RGB values.
        var StartRED, StartGREEN, StartBLUE, EndRED, EndGREEN, EndBLUE : real

        % Figures out and stores values from the two inputed values.
        RGB.GetColour (StartColor, StartRED, StartGREEN, StartBLUE)
        RGB.GetColour (EndColor, EndRED, EndGREEN, EndBLUE)

        % Calculates and declares values used for the result.
        var RED : real := StartRED * Ratio + EndRED * (1 - Ratio)
        var GREEN : real := StartGREEN * Ratio + EndGREEN * (1 - Ratio)
        var BLUE : real := StartBLUE * Ratio + EndBLUE * (1 - Ratio)

        % Output Results
        RGB.SetColour (255, RED, GREEN, BLUE)
        result 255
    end CalculateColor


then you can have as many colours as you want. Mr. Green

Author:  Mackie [ Sat Jan 26, 2008 4:21 pm ]
Post subject:  Re: Gradient Module

Oh wow! how did I miss that before! It seems so simple now. -_- +10 Bits!(For Fishtastic and StealthArcher)

Author:  Mackie [ Sat Jan 26, 2008 7:15 pm ]
Post subject:  Re: Gradient Module

New Features!

Ok, I just implemented some new features:

Gradient.Star (X, Y, Size, Outer Color, Inner Color : int, Ratio : real) - This can only be drawn as a perfect star for now, The Size is added on to the X and Y to create the second coordinates, it's not like an Oval or a Box.

Gradient.MapleLeaf (X, Y, Size, Outer Color, Inner Color : int, Ratio : real) - This is identical to the Star. Except it's a maple leaf instead.

Posted Image, might have been reduced in size. Click Image to view fullscreen.

alpha.tu - This is a separate module, that I am building on to the gradient module with, it allows for adjustable opacity of an object. In it's current version it can't do much, it has a few levels of opacity that work, and it can be moved like a sprite. It's extremely slow right now. I have it set up in the file 'example_alpha.t' which shows the best results I have gotten so far. Bare with me as this is just out of the starting blocks.

Posted Image, might have been reduced in size. Click Image to view fullscreen.

Author:  StealthArcher [ Sat Jan 26, 2008 11:39 pm ]
Post subject:  Re: Gradient Module

Now I must mess with it, for you opacity is screwed, have no fear, Commodore StealthArbvious is here!

Author:  Mackie [ Sat Jan 26, 2008 11:59 pm ]
Post subject:  RE:Gradient Module

Haha, I'm trying some serious math on my end. I have gotten an opacity range of 0.0 - 0.3 working perfectly. 0 being solid, and 0.3 being sort of kind of translucent. I just grouped that in with the newest release, as a sort of preview of what's to come.

*cough*
To be done list:
- Alpha Channel. (in beta)
- Selectable gradient styles for ever shape.
- Corner gradient style.(Beta)
- Conical gradient style.
- Reflective Linear gradient style.
- Fix the ratio glitch. (R&D)
- Make shapes radial gradients able to have both a width and height.(R&D)
*cough*

Author:  ericfourfour [ Sun Jan 27, 2008 12:42 am ]
Post subject:  Re: Gradient Module

The alpha channel is really just a ratio of the foreground to the background. So with an alpha value of 1.0, it will be 100% foreground. With an alpha channel of 0.5, it will be 50% foreground, 50% background. This is not too difficult to do.

I'm going to use my getColour function for simplicities sake:
Turing:
fcn getColour (clr1, clr2 : int, ratio : real) : int
    var r1, g1, b1, r2, g2, b2 : real
    RGB.GetColour (clr1, r1, g1, b1)
    RGB.GetColour (clr2, r2, g2, b2)
    var r : real := r1 * ratio + r2 * (1 - ratio)
    var g : real := g1 * ratio + g2 * (1 - ratio)
    var b : real := b1 * ratio + b2 * (1 - ratio)
    result RGB.AddColour (r, g, b)
end getColour


Now all I have to do is make a function that gets the colour of a pixel (the background colour) and calls the getColour function with that and the specified foreground colour:

Turing:
fcn getAlpaColour (x, y, clr : int, ratio : real) : int
    result getColour (clr, View.WhatDotColour (x, y), ratio)
end getAlpaColour


That wasn't too difficult. Here is an example program using the above code:
Turing:
const STARTX : int := 140
const ENDX : int := 160
const STARTY : int := 140
const ENDY : int := 160
const MIDX : int := (STARTX + ENDX) div 2
const MIDY : int := (STARTY + ENDY) div 2
const BG_CLR : int := yellow
const FG_CLR : int := blue
const TIME_DELAY : int := 10
const ITERATIONS : int := 100

View.Set ("offscreenonly")

for decreasing i : ITERATIONS .. 1
    var ratio : real := (i - 1) / ITERATIONS
    Draw.FillBox (STARTX, STARTY, ENDX, ENDY, white)
    Draw.FillOval (MIDX, MIDY, MIDX - STARTX, MIDY - STARTY, BG_CLR)
    for x : STARTX .. ENDX
        for y : STARTY .. ENDY
            var clr : int := getAlpaColour (x, y, FG_CLR, ratio)
            Draw.Dot (x, y, clr)
        end for
    end for
    View.Update
    Time.Delay (TIME_DELAY)
end for


You should probably change the functions to use RGB.SetColour instead.

This can get more complex: http://en.wikipedia.org/wiki/Alpha_compositing.

Author:  Mackie [ Sun Jan 27, 2008 12:58 am ]
Post subject:  RE:Gradient Module

EDIT:

Alright basic transparency is now working perfectly, but I think I'm going to over do it. Thanks for you help everyone! I couldn't have done it without you.

Author:  StealthArcher [ Sun Jan 27, 2008 3:50 pm ]
Post subject:  Re: Gradient Module

My classmates are going to gape when they see this, too bad I didn't make it myself.

Author:  Mackie [ Sun Jan 27, 2008 11:19 pm ]
Post subject:  Re: Gradient Module

StealthArcher @ Sun Jan 27, 2008 3:50 pm wrote:
My classmates are going to gape when they see this, too bad I didn't make it myself.

Let me know what they think of it. Any Ideas they have for features or any bugs you find.

I always enjoy input, good or bad. (Preferably good Razz)

Author:  Mackie [ Sun Feb 10, 2008 2:16 am ]
Post subject:  Re: Gradient Module

New Release!

It took longer than I thought to get to this point. I forgot to work on this actually. So, there is a new syntax for:

Gradient.Oval (xPosition, yPosition, xRadius, yRadius, outerColor, innerColor : int, Ratio : real)

That's right! I've added multi-radii in to the Oval. There is still a glitch but, it's getting there. For an example check the first post of the thread.

Author:  StealthArcher [ Sun Feb 10, 2008 10:46 am ]
Post subject:  RE:Gradient Module

Now to move on to multiple colors in one gradient! Very Happy So did my ratio formula help any?

Author:  Mackie [ Sun Feb 10, 2008 12:26 pm ]
Post subject:  RE:Gradient Module

Defiantly, although ericfourfour's formating, and De-cluttering suggestions helped me figure it out a lot more.

Author:  StealthArcher [ Sun Feb 10, 2008 6:16 pm ]
Post subject:  RE:Gradient Module

I never seem to help much here. EvRYBUDY IS TU GUD!
(not directed at mackie)

Author:  Mackie [ Sun Feb 10, 2008 6:18 pm ]
Post subject:  RE:Gradient Module

Haha, no you helped don't worry.

Author:  Sean [ Thu Feb 14, 2008 6:13 pm ]
Post subject:  Re: Gradient Module

I've discovered some few glitches within the program, and have pointed it out to Mackie.

When drawing his Gradient.MapleLeaf with a large size, you have a slight problem. Say you chose his example, a leaf would appear with the same colours, although a green circle would appear in the middle, same with the star.

I've been looking for a way to clear that, but haven't found a way on my own, nor has Mackie to my knowledge. Any feedback or suggestions?

Also, a reverse Gradient Module would be good. Might try it by doing the opposite of what Mackie did. Could be fun.

Author:  StealthArcher [ Thu Feb 14, 2008 11:36 pm ]
Post subject:  Re: Gradient Module

The grren interior in the center is actually another maple leaf, drawn with the same color generation problems his alpha used to have, I fixed it using a basic cheap solution, but I'll make it better another time when I'm not tired.

Author:  Mackie [ Fri Feb 15, 2008 12:40 am ]
Post subject:  RE:Gradient Module

The problem is in your fix is the smaller it is the more of the correct color gets cut out, and the problem still exists, with extremely large shapes. The problem seems to be for what ever reason, the for loop goes a bit to far. This causes the size to go negative, and for the maple leaf to become negative with, both color and size. Also, if you do plan on working on this problem (I will be). Then you should know that the Star is the exact same as the maple leaf.

Thanks StealthArcher.

Author:  HeavenAgain [ Fri Feb 15, 2008 1:06 am ]
Post subject:  RE:Gradient Module

when i see the "very large" and "negative", it gave me the conclusion of
Quote:
In current implementations of Turing, the range of integers is from -2147483647 to 2147483647. In other words, the maximum size of integer is 2**31 - 1. See maxint. This range exists because integers are stored in 4 bytes. The remaining negative value, -2147483648 records uninitialization.
but i dont think you actually went crazy and typed something like 999999999999 (12 digits) did you?..... and another thing, could it be the color's problem? since RGB each have value of 256, so 256^3 is 16777216 (7 digits) it might give funky result? (er after looking up the RGB thing, i noticed its real... so it might not be 256 colors each, but just some thought to where your problem might be)

Author:  StealthArcher [ Fri Feb 15, 2008 11:45 am ]
Post subject:  Re: Gradient Module

Alright, here we go, I'm in prog class atm, and fixed it better.


: