Gradient background immediately fades away?

Processing Coding Questions
1

I’m very new to processing, and did try to follow some tutorials as to how to add a background gradient. However for some reason when I hit play, the gradient is visible but only for a split second at the start. It fades away immediately. Any suggestions? For the top I want the colour (18, 23, 36), and transition into the colour (27, 111, 155) at the bottom. I edited out my attempts to implement the gradient:

float shapeRadius = 120;
float shapeAngle = 0;        // angle star begins rotating
int shapeSize = 10;           //star size

void setup() {
  size(1024,768);
  smooth();
  noStroke();
  background(0);  

}

void draw() {
  noStroke();

  pushMatrix();  

  fill( 0, 5);                // fill with black, low opacity; builds up over old ellipses
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle);
  translate(shapeRadius,0);

  fill(255);
  ellipse(0,0,5,5);

  popMatrix(); 

  shapeAngle += .05;          // speed  

  secondStar();
  thirdStar();
  forthStar();

}

void secondStar(){

  noStroke();

  pushMatrix();  

  fill( 0, 5);                
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+90);        //angle
  translate(shapeRadius+50, 0); //radius

  fill(255);
  ellipse(0,0,5,5);

  popMatrix(); 



}

void thirdStar(){

  noStroke();

  pushMatrix();  

  fill( 0, 5);              
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+20);
  translate(shapeRadius+25, 0);

  fill(255);
  ellipse(0,0,5,5);

  popMatrix();         

}

void forthStar(){

  noStroke();

  pushMatrix();  

  fill( 0, 5);              
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+65);
  translate(shapeRadius+65, 0);

  fill(255);
  ellipse(0,0,5,5);

  popMatrix(); 


}
1 Like
2

Remember that the draw() function is called 60 times per second. Your gradient contains some transparency, which you’re drawing over and over again. This transparency adds up over time, which is why your gradient goes away.

To fix this, you need to think about exactly what you should draw every frame. You probably want to draw a fully opaque background to clear out old frames, or you want to draw the gradient once instead of 60 times per second.

2 Likes
3

I got it working, but now I can’t seem to figure out how to get the circle trails back again. Since I moved the gradient call into the draw method, it draws over the old circles. Any idea how to get them back?

int Y_AXIS = 1;
int X_AXIS = 2;

float shapeRadius = 120;
float shapeAngle = 0;        // angle star begins rotating
int shapeSize = 10;           //star size

void setup() {
  size(1024,768);
  smooth();
  noStroke();
  background(0);  
}



void draw() {
  
  color b1 = color(18, 23, 36);
  color b2 = color(27, 111, 155);
  setGradient(0, 0, width, height, b1, b2, Y_AXIS);
  
  noStroke();
  
  pushMatrix();  
  
  fill( 0, 5);                // fill with black, low opacity; builds up over old ellipses
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle);
  translate(shapeRadius,0);
  
  fill(255);
  ellipse(0,0,5,5);
  
  popMatrix(); 
  
  shapeAngle += .05;          // speed  
 
  secondStar();
  thirdStar();
  forthStar();
  
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
  // calculate differences between color components 
  float deltaR = red(c2)-red(c1);
  float deltaG = green(c2)-green(c1);
  float deltaB = blue(c2)-blue(c1);

  // choose axis
  if(axis == Y_AXIS){

    for (int i=x; i<=(x+w); i++){
      // row
      for (int j = y; j<=(y+h); j++){
        color c = color(
        (red(c1)+(j-y)*(deltaR/h)),
        (green(c1)+(j-y)*(deltaG/h)),
        (blue(c1)+(j-y)*(deltaB/h)));
        set(i, j, c);
      }
    }  
  }   
}


void secondStar(){
  
  noStroke();
  
  pushMatrix();  
  
  fill( 0, 5);                
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+90);        //angle
  translate(shapeRadius+50, 0); //radius
  
  fill(255);
  ellipse(0,0,5,5);
  
  popMatrix(); 
  
         
  
}

void thirdStar(){
  
  noStroke();
  
  pushMatrix();  
  
  fill( 0, 5);              
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+20);
  translate(shapeRadius+25, 0);
  
  fill(255);
  ellipse(0,0,5,5);
  
  popMatrix();         
  
}

void forthStar(){
  
  noStroke();
  
  pushMatrix();  
  
  fill( 0, 5);              
  rect(0, 0, width, height);
  translate(width/2,height/2);   
  rotate(shapeAngle+65);
  translate(shapeRadius+65, 0);
  
  fill(255);
  ellipse(0,0,5,5);
  
  popMatrix(); 
        
  
}
1 Like
4

I think this is not the right way to do it. You should erase your canvas each time with setGradient() and use for loops to draw all your circles (then you keep incrementing your shapeAngle)

Here is an example : :slight_smile:

int Y_AXIS = 1;
int X_AXIS = 2;

float shapeRadius = 120;
float shapeAngle = 0;        // angle star begins rotating
int shapeSize = 10;   
color b1 = color(18, 23, 36);
color b2 = color(27, 111, 155);
int num_sec_star = 40;
int num_th_star = 40;
int num_fort_star = 40;
float divide_by = 11.0;

void setup() {
  size(1024, 768);
  smooth();
  noStroke();
}

void draw() {
  setGradient(0, 0, width, height, b1, b2, Y_AXIS);

  noStroke();

  pushMatrix();  

  translate(width/2, height/2);   
  rotate(shapeAngle);
  translate(shapeRadius, 0);

  fill(255);
  ellipse(0, 0, 5, 5);

  popMatrix(); 

  shapeAngle += .05;          // speed  

  secondStar();
  thirdStar();
  forthStar();
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {
  // calculate differences between color components 
  float deltaR = red(c2)-red(c1);
  float deltaG = green(c2)-green(c1);
  float deltaB = blue(c2)-blue(c1);

  // choose axis
  if (axis == Y_AXIS) {

    for (int i=x; i<=(x+w); i++) {
      // row
      for (int j = y; j<=(y+h); j++) {
        color c = color(
          (red(c1)+(j-y)*(deltaR/h)), 
          (green(c1)+(j-y)*(deltaG/h)), 
          (blue(c1)+(j-y)*(deltaB/h)));
        set(i, j, c);
      }
    }
  }
}


void secondStar() {

  noStroke();
  for (int i = 0; i<num_sec_star; i++) {
    pushMatrix();  

    fill( 0, 5);                
    translate(width/2, height/2);   
    rotate(shapeAngle+90 + i/divide_by);        //angle
    translate(shapeRadius+50, 0); //radius

    fill(255, map(i, 0, num_sec_star, 0, 255));
    ellipse(0, 0, 5, 5);

    popMatrix();
  }
}

void thirdStar() {

  noStroke();

  for (int i = 0; i<num_th_star; i++) {
    pushMatrix();  

    fill( 0, 5);              
    translate(width/2, height/2);   
    rotate(shapeAngle+20+i/divide_by);
    translate(shapeRadius+25, 0);

    fill(255, map(i, 0, num_th_star, 0, 255));
    ellipse(0, 0, 5, 5);

    popMatrix();
  }
}

void forthStar() {

  noStroke();

  for (int i = 0; i<num_fort_star; i++) {
    pushMatrix();  

    fill( 0, 5);              
    translate(width/2, height/2);   
    rotate(shapeAngle+65 + i/divide_by);
    translate(shapeRadius+65, 0);

    fill(255,map(i, 0, num_fort_star, 0, 255));
    ellipse(0, 0, 5, 5);

    popMatrix();
  }
}
2 Likes