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

jmejia

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);
      //bg = loadImage("floorplan.jpg");
      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);
      }
    }

    void makeRowMasking(int size, int rowNumber){
      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]);
          makeRowMasking(sizes[i], 1);
          makeRowMasking(sizes[i], 2);
          makeRowMasking(sizes[i], 3);
          makeRowMasking(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 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();
    }

jeremydouglass

@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.
3. Apply your circle mask to your gradient, producing circles that are rendered in a gradient wash.

For more information:

• https://processing.org/reference/PImage_mask_.html
• https://processing.org/examples/alphamask.html
• https://processing.org/examples/transparency.html

...and for recent masking examples on the forums:

• https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image
• https://forum.processing.org/two/discussion/18818/how-to-draw-a-transparent-pgraphics-image-solved#latest

jmejia

That makes a lot of sense - thanks! I'll give it a shot!