#### Howdy, Stranger!

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

# Trying to find a way to make a moving gradient across the strokes of generated shapes

edited January 2017

Hello,

I'm working on a sketch that generates a grid of radiating concentric circles. I'm trying to find a way to create a moving gradient across the grid. Right now they're all blue. So the question is sort of twofold.

1) How do I make left to right gradient over the stroke of a circle? (I've played with fill examples - but not sure how to do it with stroke. Or if I can't maybe there's a trick/workaround?

2) What is a reasonable way for me to keep track of a 'gradient zone' that moves over time and should inform how the circles get generated?

Part 2 is hard to put into words. I'll paste the full code below - but I simulated the gradient behavior with a travelling ellipse that looks like this:

``````    fill(255, 162, 31, 35);
noStroke();
ellipse(xPos, 200, 40, 300);
xPos=xPos+2;
if (xPos>width+20){
xPos=-20;
}
``````

That's at the bottom of the full code in the 'phase 4' section - and this happens 16 seconds in, and again every 16 seconds after it ends.

So in place of that ellipse - I want a gradient to travel across the circles themselves. As in this mockup image.

I figure I need to keep track of range of coordinates in some top level variables and reference them as I draw the circles. Can someone point me in the right direction? Thanks!

full code below:

``````    //PImage bg;
int seqCounter;
int[] sizes = {
80, 40, 20, 10, 0
};
int xoffset = 80;
int yoffset = 0;

int xPos=50;

void setup(){
size(640, 351);
frameRate(24);
print("setup complete");

}

float sizeBasedAlpha(int size){
float alpha = 0.0;
if (size <= 60){
alpha = 255.0;
//alpha = map(size, 0, 60, 0, 255);
}
if (size > 60){
alpha = map(size, 60, 80, 255, 0);
}
return alpha;
}

void makeRow(int size, int rowNumber){
float alpha = 0.0;
noFill();
for (int n = 0; n < 6; n++){
strokeWeight(1);
alpha = sizeBasedAlpha(size);
stroke(3, 171, 255, alpha);
ellipse (xoffset+(n*100), yoffset+(rowNumber*100), size, size);
}
}

float alpha = 0.0;
noFill();
for (int n = 0; n < 6; n++){
if ((n>0) && (n<5)){
strokeWeight(3);
alpha = sizeBasedAlpha(size);
stroke(3, 171, 255, alpha);
}
else{
strokeWeight(1);
alpha = sizeBasedAlpha(size);
stroke(3, 171, 255, alpha);
}
ellipse (xoffset+(n*100), yoffset+(rowNumber*100), size, size);
}
}

void makeConversation(int size){
float alpha = 0.0;
strokeWeight(3);
alpha = sizeBasedAlpha(size);
stroke(255, 87, 3, alpha);
ellipse(width*0.5+10, 200, size, size);
}

void draw(){
if (millis() < 5000){
seqCounter = 0;
}else{
seqCounter = (millis()/4000) % 7; //7 steps, 4 seconds each
}
//print(seqCounter);
//background(bg);
background(255);

//phase 1
if ((seqCounter == 0) || (seqCounter == 1)){
xPos=50;
for (int i = 0; i < sizes.length; i++){
// make size a little bit bigger
makeRow(sizes[i], 1);
makeRow(sizes[i], 2);
makeRow(sizes[i], 3);
makeRow(sizes[i], 4);
sizes[i] += 2;
//draw a circle using x as the height and width of the circle
if(sizes[i] > 80) {
sizes[i] = 0;
}
}
}

//phase 2
if (seqCounter == 2){
for (int i = 0; i < sizes.length; i++){
makeConversation(sizes[i]);
makeRow(sizes[i], 1);
makeRow(sizes[i], 2);
makeRow(sizes[i], 3);
makeRow(sizes[i], 4);
sizes[i] += 2;
//draw a circle using x as the height and width of the circle
if(sizes[i] > 80) {
sizes[i] = 0;
}
}
}
//phase 3
if ((seqCounter == 3) || (seqCounter == 4)){
for (int i = 0; i < sizes.length; i++){
makeConversation(sizes[i]);
sizes[i] += 2;
//draw a circle using x as the height and width of the circle
if(sizes[i] > 80) {
sizes[i] = 0;
}
}
}

//phase 4 - noon sounds
if ((seqCounter == 5) || (seqCounter == 6)){
for (int i = 0; i < sizes.length; i++){
// make size a little bit bigger
makeRow(sizes[i], 1);
makeRow(sizes[i], 2);
makeRow(sizes[i], 3);
makeRow(sizes[i], 4);
sizes[i] += 2;
//draw a circle using x as the height and width of the circle
if(sizes[i] > 80) {
sizes[i] = 0;
}
}
fill(255, 162, 31, 35);
noStroke();
ellipse(xPos, 200, 40, 300);
xPos=xPos+2;
if (xPos>width+20){
xPos=-20;
}
}
//saveFrame();
}
``````
Tagged:

• @jmejia -- one answer to both of your questions is "use masking with `mask()`"

1. Create a full color solid PImage / PGraphics of your gradient field.
2. Create a mask PImage / PGraphics, and draw your circles (or whatever) in solid white on a black background.