#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

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

edited October 2016

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) {
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;
}
}

void backGradient(int x, int y, float w, float h, color c1, color c2, int axis )
{
if (axis == X_AXIS)
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
break;
}
``````

IMAGES   Tagged:

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

• ``````// GLOBAL VARIABLES

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();

}//close setup()

void circleGradient(float x, float y) {
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;
}
}

void backGradient(int x, int y, float w, float h, color c1, color c2, int axis )
{
if (axis == X_AXIS)
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
break;

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

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

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.
• Errors:

• "The field PConstants.OPENGL is deprecated" -- leave default or use P2D
• A bunch of missing variable errors: Cinstruct, Sinstruct, Quit
• 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.

• 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

• Trying to learn 2D though.

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

Runnable examples always better than fragments.

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

• koogs, it runs fine for me.

• 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.

• 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.

• Glad to hear it, @SemiProcess

• koogs, it runs fine for me.

Your initial post has no setup or draw