Computer Science Canada :: View topic - Gradient Bound by a Shape

Computer Science Canada

Gradient Bound by a Shape

Author:

Mackie [ Thu Jan 24, 2008 6:30 pm ]

Post subject:

Gradient Bound by a Shape

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.

Author:

HeavenAgain [ Thu Jan 24, 2008 7:48 pm ]

Post subject:

RE:Gradient Bound by a Shape

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 Razz

same thing can be applyed for star or anything, draw the deeper colour on the outer layer, lighten the colour shrink the shape

Author:	Mackie [ Thu Jan 24, 2008 7:50 pm ]
Post subject:	Re: Gradient Bound by a Shape
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.

Author:	ericfourfour [ Thu Jan 24, 2008 8:02 pm ]
Post subject:	RE:Gradient Bound by a Shape
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

Author:	Mackie [ Thu Jan 24, 2008 8:12 pm ]
Post subject:	Re: RE:Gradient Bound by a Shape
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

Author:

Sean [ Thu Jan 24, 2008 9:30 pm ]

Post subject:

Re: Gradient Bound by a Shape

This is what it did...

Turing:

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!

Author:	StealthArcher [ Thu Jan 24, 2008 10:03 pm ]
Post subject:	RE:Gradient Bound by a Shape
Always good to see an innovative student, rather than "Can u do mai wurk fer me lol?". +Bits good stuff, hope it goes soemwhere.

Author:

ericfourfour [ Thu Jan 24, 2008 10:11 pm ]

Post subject:

Re: Gradient Bound by a Shape

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.

Author:	Mackie [ Thu Jan 24, 2008 10:20 pm ]
Post subject:	Re: Gradient Bound by a Shape
@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.

Author:	StealthArcher [ Thu Jan 24, 2008 10:23 pm ]
Post subject:	RE:Gradient Bound by a Shape
If you want some more other ways to see how the rgb miodule was used, check out my hbm converter.

Author:	ericfourfour [ Thu Jan 24, 2008 11:29 pm ]
Post subject:	RE:Gradient Bound by a Shape
It's a pretty common algorithm. If you want to cite something, it would be best to cite this thread.

Author:

Mackie [ Thu Jan 24, 2008 11:31 pm ]

Post subject:

Re: Gradient Bound by a Shape

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. Very Happy

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. Rolling Eyes

Author:	ericfourfour [ Fri Jan 25, 2008 12:06 am ]
Post subject:	RE:Gradient Bound by a Shape
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.

Author:	Mackie [ Fri Jan 25, 2008 12:26 am ]
Post subject:	Re: RE:Gradient Bound by a Shape
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.

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

Terms of Use | Privacy Policy