How do I create a gradient filled shape, on a gradient background?

SemiProcess

SUMMARY OF ISSUE Here is my attempt at making gradient background, with a gradient circle on top. Any help would be greatly appreciated.

• The background draws in fine, but the circle shows up in a solid fill. (see attached images)
• If I don't have the gradient background, the circle will show up with it's gradient fill. (see attached images)

**PROCESSING CODE*

    //RADIAL GRADIENT, FOR SHADED CIRCLE FILL COLORS
    void circleGradient(float x, float y) {
      int radius = width/3;
      float g = random(0, 360);
      for (int r = radius; r > 0; --r) {
        fill(g, 90, 90);
        ellipse(x, y, r, r);
        g = (g + 1) % 360;
      }
    }

        //LINEAR GRADIENT, FOR BACKGROUND IN SHADED CIRCLE VIEW
        void backGradient(int x, int y, float w, float h, color c1, color c2, int axis )
        {
          if (axis == X_AXIS) 
          // Top to bottom gradient
          for (int i = y; i <= y+h; i++)
          {
            float inter = map(i, y, y+h, 0, 1);
            color c = lerpColor(c1, c2, inter);
            stroke(c);
            line(x, i, x+w, i);
            }
          }


        void keyPressed() //change art based on keys pressed
        {
          switch(key)
        {
          case 's': //press s = change art to SHADED CIRCLE
          case 'S':
            println(Sinstruct); // terminal text: "VIEWING SHADED CIRCLE"
            // Foreground
            backGradient(0, 0, 640, 480, c1, c2, X_AXIS);
            //draw a circle
            circleGradient(width/2, height/2);
            break;
        }

IMAGES

jeremydouglass

Please provide a minimal complete sketch using these functions. This code won't run -- missing variables, missing bracket, etc.

SemiProcess

// GLOBAL VARIABLES

//used in linear gradient background of shaded circle view
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;

void setup()
{
  size(640,480,OPENGL); //program window dimensions (width,height)
  background(200, 200, 200); //background color (r,g,b)

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

  noStroke();
  ellipseMode(RADIUS);

}//close setup()

//RADIAL GRADIENT, FOR SHADED CIRCLE FILL COLORS
void circleGradient(float x, float y) {
  int radius = width/3;
  float g = random(0, 360);
  for (int r = radius; r > 0; --r) {
    fill(g, 90, 90);
    ellipse(x, y, r, r);
    g = (g + 1) % 360;
  }
}

//LINEAR GRADIENT, FOR BACKGROUND IN SHADED CIRCLE VIEW
void backGradient(int x, int y, float w, float h, color c1, color c2, int axis )
{
  if (axis == X_AXIS) 
  // Top to bottom gradient
  for (int i = y; i <= y+h; i++)
  {
    float inter = map(i, y, y+h, 0, 1);
    color c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x+w, i);
    }
  } 

void draw()
{
}//close draw()

//KEYBOARD FUNCNTIONS
void keyPressed() //change art based on keys pressed
{
  switch(key)
  {
  case 'c': //change art to CONVEX SQUARE
  case 'C':
    background(255, 0, 0); //background color (r,g,b);
    println(Cinstruct); // terminal text: "VIEWING CONVEX SQUARE"
    //code to draw a convex square
    break;

  case 's': //press s = change art to SHADED CIRCLE
  case 'S':
    println(Sinstruct); // terminal text: "VIEWING SHADED CIRCLE"
    // Foreground
    backGradient(0, 0, width, height, c1, c2, X_AXIS);
    //draw a circle
    circleGradient(width/2, height/2);
    break;

  case 'q': //press q = quit program
  case 'Q':
    println(Quit);
    exit();
    break;

  }//close switch
}//close keyPressed()

jeremydouglass

Advice to start:

1. inside your backGradient() and circleGradient() functions, wrap everything in pushStyle() / popStyle(). Just doing this will fix some of your problem -- you will stop changing style settings while drawing backGradient in ways then affect circleGradient.
2. circleGradient() is very sensitive to the stroke around the edge of your ellipse, and may behave differently based on the renderer. The problem with this method is that the renderer may end up showing you only line edges and no fill -- no matter what you fill it with, if every line edge was black then the whole thing will be black when it is done drawing. Inside your pushStyle(), first set strokeWeight(0)
3. circleGradient() has some problems with how it computes color. It should accept two color arguments (like your backGradient does) and compute them using lerpColor() (like backGradient). Start simple -- if you want a random color then start out by computing it in keyPressed and pass it to circleGradient in the call. This will fix the rest of your problem with bad gradient wrap-arounds.

jeremydouglass

Errors:

• "The field PConstants.OPENGL is deprecated" -- leave default or use P2D
• A bunch of missing variable errors: Cinstruct, Sinstruct, Quit

SemiProcess

I'm really new to Processing and as such the gradient code is right off of https://processing.org/examples/radialgradient.html

I don't need it animated though. I'm searched and just can't seem to find the code for what I need to do.

kfrajer

This is just an idea:

PShape sphereShape;
int sSize;

void setup() 
{
  size(1000,800, P3D);
  orientation(LANDSCAPE);
  noStroke();
  fill(204);
  sphereDetail(60);    //(1)
  sSize = (int) (height/4.0);    //(2)
  sphereShape = createShape(SPHERE, sSize);
}

void draw() 
{
  background(0); 
  translate(width/2, height/2, 0); 

  spotLight(255, 0, 0, sSize/4, -sSize/4, 2*sSize, 0, 0, -1, radians(15), 0);  //(3)
  spotLight(0, 255, 0, -sSize/4, -sSize/4, 2*sSize, 0, 0, -1, radians(15), 0);  //(4)
  spotLight(0, 0, 255, 0, sSize/4, 2*sSize, 0, 0, -1, radians(15), 0);  //(5)

//  pointLight(255, 0, 0, sSize/4, -sSize/4, 2*sSize); 
//  pointLight(0, 255, 0, -sSize/4, -sSize/4, 2*sSize); 
//  pointLight(0, 0, 255, 0, sSize/4, 2*sSize); 

  shape(sphereShape);
}

Kf

SemiProcess

Trying to learn 2D though.

koogs

Stroke colour IMO, as per Jeremy's second point.

Runnable examples always better than fragments.

koogs

Notice how on that first image the entire circle is the colour of the last line of the background, ie the last stroke colour?

SemiProcess

koogs, it runs fine for me.

SemiProcess

Jeremy, I found out that indeed the circle is just the stroke. Now how to fix that. If stroke is zero, no circle shows up at all is my issue now.

SemiProcess

I got it!

Under setup size(640,480,P2D)

Also, //RADIAL GRADIENT, FOR SHADED CIRCLE FILL COLORS void circleGradient(float x, float y) { pushStyle(); strokeWeight(0); int radius = width/3; int g = 100; for (int r = radius; r > 0; --r) { fill(g, 100, 50); ellipse(x, y, r, r); g = g+1 % 100;
} popStyle(); }

Thanks Jeremy!

Thank you to all the rest who helped too. Great community, I can tell.

jeremydouglass

Glad to hear it, @SemiProcess

koogs

koogs, it runs fine for me.

Your initial post has no setup or draw