Gradient Bound by a Shape

[Mackie]

I just started working on a gradient script, and was wondering how I could have the gradient bound by a shape? say a star. I have a square done, and am working on a radial gradient. I was just hoping I could figure something out for odd shapes, even a circle would be cool.

Here is what I have so far.

Turing:

procedure GradientBox (X1, Y1, X2, Y2, StartColor, EndColor : int)     var Color : int := 255     var StartRED, StartBLUE, StartGREEN : real     var DiffernceRED, DiffernceGREEN, DiffernceBLUE : real     RGB.GetColor (StartColor, StartRED, StartGREEN, StartBLUE)     RGB.GetColor (EndColor, DiffernceRED, DiffernceGREEN, DiffernceBLUE)     DiffernceRED := (StartRED - DiffernceRED) / (X2 - X1)     DiffernceGREEN := (StartGREEN - DiffernceGREEN) / (X2 - X1)     DiffernceBLUE := (StartBLUE - DiffernceBLUE) / (X2 - X1)     for i : X1 .. X2         StartRED -= DiffernceRED         StartGREEN -= DiffernceGREEN         StartBLUE -= DiffernceBLUE         RGB.SetColor (Color, StartRED, StartGREEN, StartBLUE)         Draw.Line (i, Y1, i, Y2, Color)     end for end GradientBox

I had some more variables in there to make it look cleaner, but I went more for efficiency.

[HeavenAgain]

code:

procedure GradientBox (X1, Y1, R, StartColor, EndColor : int)     var Color : int := 255     var StartRED, StartBLUE, StartGREEN : real     var DiffernceRED, DiffernceGREEN, DiffernceBLUE : real     RGB.GetColor (StartColor, StartRED, StartGREEN, StartBLUE)     RGB.GetColor (EndColor, DiffernceRED, DiffernceGREEN, DiffernceBLUE)     DiffernceRED := (StartRED - DiffernceRED) / (R)     DiffernceGREEN := (StartGREEN - DiffernceGREEN) / (R)     DiffernceBLUE := (StartBLUE - DiffernceBLUE) / (R)     for decreasing i : R .. 0         StartRED -= DiffernceRED         StartGREEN -= DiffernceGREEN         StartBLUE -= DiffernceBLUE         RGB.SetColor (Color, StartRED, StartGREEN, StartBLUE)         Draw.FillOval (X1, Y1, i, i, Color)     end for end GradientBox GradientBox (100, 100, 50, red, white)

what i did was draw a big oval in the background, and then shrink that oval smaller and smaller using lighter colour, well, i aucally didnt know how the colour works etc, but just following your concepts, simple changes same thing can be applyed for star or anything, draw the deeper colour on the outer layer, lighten the colour shrink the shape

[Mackie]

Oh, wow that seems simple enough, how did I not see that. Thanks, I hope to eventually come up with a module. 10 Bits Given.

[ericfourfour]

Try making a function that takes two colours and a ratio and returns a new colour.

Say red, blue and 0.5 is used to call the function. It will return the colour halfway between red and blue. The algorithm, I believe, looks something like this:
new colour = colour1 * (1 - ratio) + colour2 * ratio

[Mackie]

ericfourfour @ Thu Jan 24, 2008 8:02 pm wrote:

Try making a function that takes two colours and a ratio and returns a new colour.

Say red, blue and 0.5 is used to call the function. It will return the colour halfway between red and blue. The algorithm, I believe, looks something like this:
new colour = colour1 * (1 - ratio) + colour2 * ratio

Awesome Idea, I was thinking of some way to do that. It will give a lot more functionality to the module. +5 bits

[Sean]

This is what it did...

Turing:

procedure GradientBox (X1, Y1, X2, Y2, StartColor, EndColor : int)     var Color : int := 255     var StartRED, StartBLUE, StartGREEN : real     var DiffernceRED, DiffernceGREEN, DiffernceBLUE : real     RGB.GetColor (StartColor, StartRED, StartGREEN, StartBLUE)     RGB.GetColor (EndColor, DiffernceRED, DiffernceGREEN, DiffernceBLUE)     DiffernceRED := (StartRED - DiffernceRED) / (X2 - X1)     DiffernceGREEN := (StartGREEN - DiffernceGREEN) / (X2 - X1)     DiffernceBLUE := (StartBLUE - DiffernceBLUE) / (X2 - X1)     for i : X1 .. X2         StartRED -= DiffernceRED         StartGREEN -= DiffernceGREEN         StartBLUE -= DiffernceBLUE         RGB.SetColor (Color, StartRED, StartGREEN, StartBLUE)         Draw.Line (i, Y1, i, Y2, Color)     end for end GradientBox GradientBox (100, 200, 300, 250, red, white)

The box is drawn with the parameters, showing the fading like you wanted, starting at red and decreasing into white by lightening the colour.

Also, I believe all you have to do is give it more variables to get other Shapes. Since they all have different values and coordiante layouts.

Interest, good work Mackie!

[StealthArcher]

Always good to see an innovative student, rather than "Can u do mai wurk fer me lol?".

+Bits good stuff, hope it goes soemwhere.

[ericfourfour]

Here is an example of the function I was talking about. I included some sample code so you can see it in action.

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 const ITERATIONS : int := 500 const TIME_DELAY : int := 5 for i : 1 .. ITERATIONS     exit when hasch and getchar = KEY_ESC     var ratio := 1 - i / ITERATIONS     Draw.FillBox (1, 1, maxx, maxy, getColour (red, blue, ratio))     Time.Delay (TIME_DELAY) end for

The clr parameters are pretty straight forward. The ratio is pretty easy to understand as well. It works by breaking the colours into components and multiplying them by their respecitve ratio.

A few examples:
When clr1 = blue, clr2 = red and ratio = 0.4, it will return a colour that is 40% blue and 60% red.
When clr1 = green, clr2 = yellow and ratio = 0.9, it will return a colour that is 90% green and 10% yellow.

[Mackie]

@ericfourfour:
That is absolutly spectacular! do you mind if I use your equations for the module? I can most likely implement this immediately. Thanks for the concepts! +5 Bits

@StealthArcher:
Thanks for the bits! I'm flattered.

[StealthArcher]

If you want some more other ways to see how the rgb miodule was used, check out my hbm converter.

[ericfourfour]

It's a pretty common algorithm. If you want to cite something, it would be best to cite this thread.

[Mackie]

Alright, I have one small problem before the ratio's are implemented. It will only show some of the color spectrum. If the start color is black and the end color is white then it will show the spectrum from absolute black, to a more dark gray area. It seems as if I am missing something obvious. At least I got it down to 15 lines.

Here is the module so far, any help would be appreciated. I will continue to work at it as well.

Turing:

unit module Gradient     export Box     function CalculateColor (StartColor, EndColor : int, Ratio : real) : int         var StartRED, StartGREEN, StartBLUE, EndRED, EndGREEN, EndBLUE : real         RGB.GetColour (StartColor, StartRED, StartGREEN, StartBLUE)         RGB.GetColour (EndColor, EndRED, EndGREEN, EndBLUE)         result RGB.AddColour (StartRED * Ratio + EndRED * (1 - Ratio), StartGREEN * Ratio + EndGREEN * (1 - Ratio), StartBLUE * Ratio + EndBLUE * (1 - Ratio))     end CalculateColor     procedure Box (X1, Y1, X2, Y2, StartColor, EndColor : int, Ratio : real)         for i : X1 .. X2 - 1             Draw.Line (i, Y1, i, Y2, CalculateColor (EndColor, StartColor, Ratio * ((i - X1) / abs(X2 - X1))))         end for     end Box end Gradient

@ericfourfour:
Thanks! I will.

EDIT:
Never mind! I put in the wrong value when running it.

[ericfourfour]

You aren't really gaining any efficiency by reducing the number of lines. The more complex something becomes, the more you should focus on readability. One thing that you can easily do to make it more readable, is to make all lines under 80 characters. Also, you should try to use different naming conventions for modules, functions, parameters, variables and constants. I usually go with the Java conventions (CamelCase for classes and modules; camelCase for functions, variables and parameters; and CAMEL_CASE for constants).

If you want to go from a lighter black to a darker white, try going from 80% to 20%. If you want it to change faster, decrease the ratio faster.

[Mackie]

ericfourfour @ Fri Jan 25, 2008 12:06 am wrote:

You aren't really gaining any efficiency by reducing the number of lines. The more complex something becomes, the more you should focus on readability. One thing that you can easily do to make it more readable, is to make all lines under 80 characters. Also, you should try to use different naming conventions for modules, functions, parameters, variables and constants. I usually go with the Java conventions (CamelCase for classes and modules; camelCase for functions, variables and parameters; and CAMEL_CASE for constants).

If you want to go from a lighter black to a darker white, try going from 80% to 20%. If you want it to change faster, decrease the ratio faster.

Thanks, I'm still unclear on what takes up more resources, when trying to make my code more efficient. I figured the more variables I get rid of the faster it would run. Also, I do plan to use those naming conventions you mentioned. The first release of the module should be out by the week's end.