Linear Gradient for my Buttons ?

Programming Questions

hieiei

Linear Gradient for my Buttons ?

in Programming Questions • 4 months ago

Hi i tried several ways to get a linear Gradient to my buttons, simple form blue to red ....

i defined a Button class, where the color of the button changes for example when its pushed, including several more things.

Is there a easy way to include a linear gradient for that buttons ?

TempButton(int xPos, int yPos, int buttonWidth, int buttonHeight, int redColor, int greenColor, int blueColor) {

    this.x = xPos;
    this.y = yPos;
    this.w = buttonWidth;
    this.h = buttonHeight;

    this.r = redColor;
    this.g = greenColor;
    this.b = blueColor;

    this.r_h = this.r + 20;
    if(this.r_h > 254) this.r_h = 254;

    this.g_h = this.g + 20;
    if(this.g_h > 254) this.g_h = 254;

    this.b_h = this.b + 20;
    if(this.b_h > 254) this.b_h = 254;
}

void render() {

    if ((mouseX >= x) && (mouseX <= x+w) && (mouseY >= y) && (mouseY <= y+h)) {

      hasFocus = true;
      isActive = true;


      fill(r_h, g_h, b_h);
      stroke(r_h, g_h, b_h);
//drow
      rect(x, y, w, h);

Replies(6)

PhiLho

Re: Linear Gradient for my Buttons ?

4 months ago

In general, you draw a gradient by drawing a bunch of consecutive lines while changing progressively their color.
You can also make a SVG with a gradient...

benj.n.su..

Re: Linear Gradient for my Buttons ?

4 months ago

hey there,

can you say a bit more about how you want the gradient to be implemented?

for example, are you saying that you want the individual button to have a gradient on it, or are you saying that you would like to implement a gradient such that there is one color on the button, but that color changes across a gradient each time you click on it?

hieiei

Re: Linear Gradient for my Buttons ?

4 months ago

hey,

the color of the Button itself should have a simple gardient form bottom red to top blue and
if you klick it should just highlight ,like it is in my code now. I hope it is a bit clearer now.

PhiLho

Re: Linear Gradient for my Buttons ?

4 months ago

OK, here is a quick example, to be adjusted to your needs.

int buttonWidth = 200;
int buttonHeight = 75;
int buttonX = 20;
int buttonY = 20;
void setup()
{
size(500, 500);
smooth();
}
void draw()
{
boolean light = mouseX > buttonX && mouseX < buttonX + buttonWidth &&
mouseY > buttonY && mouseY < buttonY + buttonHeight;
drawButtonBackground(buttonX, buttonY, light);
noFill();
stroke(0);
rect(buttonX, buttonY, buttonWidth, buttonHeight);
}
void drawButtonBackground(int x, int y, boolean light)
{
color topColor = #AA5500;
color bottomColor = #0055AA;
if (light)
{
topColor = #FF5500;
bottomColor = #0055FF;
}
for (int line = 0; line < buttonHeight; line++)
{
color sc = lerpColor(topColor, bottomColor, (float) line / buttonHeight);
stroke(sc);
line(x, y + line, x + buttonWidth - 1, y + line);
}
}

Ugly, but you adjust the colors, of course. It is just a proof of concept.

hieiei

Re: Linear Gradient for my Buttons ?

4 months ago

Thank you exactly what i was looking for !

One last question, how can i remove the black frame around the Button ?

PhiLho

Re: Linear Gradient for my Buttons ?

4 months ago

Just don't draw the last rect().

Top Reply