how to create Gradient Progress bar with transparecy

edited May 2014 in How To...

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

Screen Shot 2014-05-07 at 5.04.58 PM

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

Screen Shot 2014-05-07 at 5.12.14 PM

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

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

regards ...

Answers

  • edited May 2014

    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);
        }
      }
    }
    
  • 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;
      }
    
    
    }
    
  • edited May 2014
    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--;
        }
      }
    }
    
  • Thanks blyk, That's exactly what I want ... Thanks again.. :)

Sign In or Register to comment.