how to create Gradient Progress bar with transparecy

Archana11

Hello Processing Community, I have created a sketch , in which a progress bar has the gradient effect like this:

And I want to create it like in this image (at bottom) :

But, I don't know , how to create this type of progressbar....

waiting for your suggestions and trying my best for this...

regards ...

blyk

It is actually simple. Here I have just modifed linear gradient code available on processing website. If you can post your code, I can modify it. [ I haven't deleted any unnecessary :/ variable ]

// Constants
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;

void setup() {
  size(360, 480);

  // Define colors
  b1 = color(255);
  b2 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);

  noLoop();
}

void draw() {
  // Background
  background(-1);
 //noStroke();
  setGradient(width/2, 0, 100, 500, c1, c2, Y_AXIS);
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {
  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (int i = y; i <= y+h; i+=20) {
      float inter = map(i, y, y+h, 0, 2);
      color c = lerpColor(c1, c2, inter);
      fill(c);
      rect(x, i*2, w, 10);
    }
  }
}

Archana11

hi blyk, Thanks for your precious reply... This is my code of progress bar with gradient color effect :

color from = color (232,255,62);
color to = color (255, 62, 143);

int j=720;
void setup(){
  size(200,720);
}
void draw(){

  for(int i=1;i<height;i++){
    color interA=lerpColor(from,to,(float(i)/height));
    noStroke();
    fill(interA);
    rect(70,i,50,i/j);
 }
  j--;
  if(j<10){
    j=10;
  }


}

blyk

color from = color (232, 255, 62);
color to = color (255, 62, 143);

int j=0;
void setup() {
  size(200, 600);
}
void draw() {
  background(-1);
  noStroke();
  for (int i=1;i<j;i+=15) {
    color interA=lerpColor(from, to, (float(i)/height));
    fill(interA);
    rect(70, i, 70, 10);
  }
  if (j<height)
    j++;
}

you can also use this if you need to control the progressbar using keys

color from = color (232, 255, 62);
color to = color (255, 62, 143);

int j=1;
boolean inc =false, dec =false;
void setup() {
  size(200, 600);
}
void draw() {
  background(-1);
  noStroke();
  for (int i=1;i<j;i++) {
    color interA=lerpColor(from, to, (float(i)/j));
    fill(interA);
    rect(70, i*15+15, 70, 10);
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == RIGHT) {
      j++;
    } 
    else if (keyCode == LEFT) {
      j--;
    }
  }
}

Archana11

Thanks blyk, That's exactly what I want ... Thanks again.. :)