Thanks so much, @ITman496. I'll cross-post it somewhere in the new forum -- unless you would like to list it there in the Gallery as a project to inspire others working on similar things.

https://discourse.processing.org/c/gallery

...I had actually found a copy a couple weeks ago -- somehow -- and posted it here.

https://discourse.processing.org/t/turn-gauge-arc-into-gradient/4103/11

For different approaches to gradient fills in a triangle, see:

• https://forum.processing.org/two/discussion/comment/106274/#Comment_106274

You can also use a PShape (e.g. with beginShape() / endShape():

size(100,100,P2D);
beginShape();
fill(255,0,0);
vertex(10,20);
vertex(90,20);
fill(0,0,255);
vertex(70,60);
vertex(30,60);
endShape(CLOSE);

It can also be done with a different gradient fill assigned for any vertex:

How this works is described in the beginShape() reference -- note the need to set P2D or P3D in size():

The P2D and P3D renderers allow stroke() and fill() to be altered on a per-vertex basis, but the default renderer does not. Settings such as strokeWeight(), strokeCap(), and strokeJoin() cannot be changed while inside a beginShape()/endShape() block with any renderer.

You may also be interested in this much more advanced tutorial on Processing gradients:

• https://medium.com/@behreajj/color-gradients-in-processing-v-2-0-e5c0b87cdfd2

At the very end it also gets into one of the most advanced ways to do a gradient (not covered above) -- using PShader and a GLSL fragment shader.

Hello Processing Community, I have created a sketch , I want to fill gradients in this trapezoid, from side to side, how to use Processing to achieve it? waiting for your suggestions and trying my best for this... regards ...

    color from = color (231,70,77,25);
    color to = color (231,70,77,255);

    //int j=20;
    //int r=1;
    boolean inc =false, dec =false;
    void setup() {
      size(400, 400);

    }
    void draw() {
      background(-1);

      ellipseMode(CENTER); 
      fill(125);
      //rect(30, 50, 60, 20);
      noStroke();
      for (int i=1;i<5;i++) {

        color interA=lerpColor(from, to, (float(i)/10));
        fill(interA);

        ellipseMode(CENTER); 

       // rect(i*15+15, 50, 60, 20);

        quad( 100,300, 300,300, 350,100, 50,100 );

        println(i);
      }
    }

1. As a demo example of random accumulation, begin with the Noise2D example sketch

2. Add an ordered array of colors[] corresponding to your gradient map. This short example list of colors was sampled from the key to your Russian map of the Caucasus.

       color P3 = color( 169, 134,  81);
       color P2 = color( 194, 167, 107);
       color P1 = color( 221, 216, 163);
       color  O = color( 171, 208, 165);
       color N1 = color( 217, 242, 253);
       color N2 = color( 161, 210, 245);
       color N3 = color( 121, 178, 221);
       color[] colors = {N3, N2, N1, O, P1, P2, P3};
   

3. Add a function lerpColors(float amt, color... colors) -- it will take a value from 0-1 and return a color interpolated from the color list. For more on it, see https://forum.processing.org/two/discussion/comment/92946/#Comment_92946

       color lerpColors(float amt, color... colors) {
         if(colors.length==1){ return colors[0]; }
         float cunit = 1.0/(colors.length-1);
         return lerpColor(colors[floor(amt / cunit)], colors[ceil(amt / cunit)], amt%cunit/cunit);
       }
   

4. Change the line in the sketch where you assign a value to each pixel. Your new line will pass the brightness (0-1) to lerpColors and return a color from your map.

       pixels[x+y*width] = lerpColors(constrain(bright/255,0,1), colors);
   

That's it! A nice elevation-colored map done in a topographic style, along with a reconfigurable color key that you can play around with.

Because you mentioned "a grayscale PGraphics that I'm crating that simulates accumulation": you may also be interested in this previous discussion of accumulating arrays of random points.

https://forum.processing.org/two/discussion/comment/120856/#Comment_120856

Hi

I have a grayscale pgraphics that I'm crating that simulates accumulation and I want to transition the grayscale colors into a gradient map of multiple hues similar to the one in the attached image.

I'm not sure how to approach this.

new version (better colors in the text field for displaying a false, b true etc. )

you can see, that my code uses a lot ifs less than yours. Colors are also in an array now.

Problem is that the combinations of colors are always alphabetical, so a-c or b-e, never c-a or e-b, so the order in that you press an release letters isn't used. That leads to the fact you don't receive a full gradient over the screen usually.

Unless you do a strict alphabetical letter combination: press a-b, then release both, press b and hold b, press c. Then c-d, d-e, then e-f.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

PFont f;

String combination="";
String prevcombination="";

// define the ArrayList
ArrayList<Block> blocks = new ArrayList();
int cx, cy;

boolean[] keys = new boolean[7];

//define colors
color[] colors = { 
  color(143, 205, 156), 
  color(150, 198, 234), 
  color(239, 57, 66), 
  color(253, 240, 77), 
  color(198, 233, 246), 
  color(239, 90, 122), 
  color(248, 151, 29) 
};

// setup
void setup() {

  size(960, 240);
  colorMode(RGB, 255);
  minim = new Minim(this);

  for (boolean currentKey : keys) 
    currentKey=false; 


  println(keys);
}

// start draw
void draw() {
  background(#ffffff);

  for (int i = 0; i < blocks.size(); i++) {
    blocks.get(i).draw();
  }//for

  textSize(13);
  fill(0);
  text ("\nTo have an effect two keys are required.\n"
    +"You can release both keys or one and add another key. ", 
    width-211, 19, 
    100, 900);

  textSize(24);
  for ( int i = 0; i < keys.length; i++) {
    fill(colors[i]);
    text (char(i+97)+" "+keys[i], 
      width-101, 19+25*i, 
      100, 900);
  }

  // assign keys to colors
  for ( int i = 0; i < keys.length-1; i++) {
    for ( int i2 = i+1; i2 < keys.length; i2++) {
      // Are 2 keys pressed simultaneously? 
      if (keys[i] && keys[i2]) {
        combination = str(i) + str(i2);
        if (!combination.equals(prevcombination)) {
          // start new block 
          blocks.add( new Block( cx, cy, 
            colors[i], // The first color
            colors[i2] ) ); // The second color
        } else {
          // widen 
          if ( blocks.size() > 0 ) {
            blocks.get(blocks.size() - 1).widen();
            cx++;
          }
        }
        prevcombination=combination;
      }
    }
  }
  //
}//func 

// define keys
void keyPressed() {

  int indexOfKey = int(key) - 97; 
  println (key
    + " : " 
    + int(key) 
    + " : " 
    + indexOfKey);

  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = true;
}

void keyReleased() {
  println("released: " + key);
  int indexOfKey = int(key) - 97; 
  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = false;
}

// =============================================

// define the block
class Block {

  float x, y, 
    w;
  color c, k;

  Block(float ix, float iy, 
    color ic, color ics) {
    x = ix;
    y = iy;
    w = 0;
    // c = ic; //////////?????
    c = ic; //////////?????
    k = ics;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for ( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i, y, 
        x+i, y+239); //240 made it bigger than the previous one
    }
  }
  void widen() {
    w++;
  }
}
//

Can you show me a gradient code independently from the key pressed stuff, just the gradient thing?

Sorry I am not at home and can’t help you really

I think you could just have a boolean array [] each slot represents a letter; false = not pressed, true = pressed

Then you can for loop in a nested for loop over it:

for i....

for i2 = i+1

if both are true, we display a gradient from both colors

Can you show me a gradient code independently from the key pressed stuff, just the gradient thing?

You have this idea in your head that you can press two keys at the same time. You can't. What happens is that one key is pressed first and then the other key is pressed while the first is still held down. To be clear, this is NOT the process:

- Sketch is running.
- Two keys are pressed at the same time.
- The keyPressed() function is called with information about both keys.

This IS the process:

- Sketch is running.
- User attempts to press two keys at the same time.
- One key is pressed first, because computers are working way faster than the movement of a user's fleshy fingers. The keyPressed() function runs.
- A few milliseconds of time passes.
- The other key is pressed. The keyPressed() function runs again.

Thus, don't try to detect two keys being pressed at the same time. Because there is no such thing. What you need to look for is key presses that happen while another key is already pressed. Basically, you will add steps to the above process so this occurs:

- Sketch is running.
- User attempts to press two keys at the same time.
- One key is pressed first, because computers are working way faster than the movement of a user's fleshy fingers. The keyPressed() function runs.
- Because there were no keys pressed before, we remember that this key is now being pressed.
- Because one key is now being pressed, a solid color Block is created.
- The draw() function will start drawing this Block.
- A few milliseconds of time passes.
- The other key is pressed. The keyPressed() function runs again.
- Because we remembered which keys were pressed from before, we can see that this is a key press while a key is already pressed. Thus the latest Block we are making stops, and a new Block is stated that has a gradient.
- The draw() function will start drawing this Block now.
- A few milliseconds of time passes.
- One of the keys stops being pressed. The keyReleased() function runs.
- We remember that this key is no longer being held down.
- This means that we are back to one key being held down now!
- Thus the last block ends, and a solid color one for the remaining held key starts.
- The draw() function will start drawing this Block now.
- A few milliseconds of time passes.
- The other key is released.
- The keyReleased() function runs.
- We remember that the other key is released. Now no keys are pressed.
- The solid block we were making ends.
- Draw doesn't cause any more blocks to get bigger, because no keys are pressed and we're done.

Of critical importance here is that you need to work out a way to track which keys are held at any given moment. And depending on the change in the number of held keys (which will only change by 1 at a time!), either stop the current block, start a new block, or do both of those things!

@Chrisir

The image above is an example of what I mean, but I want to have the gradient form on the Y axis, and have it give me a fill color (composed of 2 colors) when I press the 2 keys of the colors together. For example, I press 'a' and 'b' and it gives me the first gradient, otherwise if I click 'a' alone, it just gives me one fill color.

I hope that makes sense!

Thanks.

also: I've modified my code to return the correct gradient in the block for every keyPressed on line 114 and so on.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

int Y_AXIS = 1;
PFont f;
color a1, a2, b1, b2, c1, c2, d1, d2, e1, e2, f1, f2, g1, g2;

//define colors

 // setup
void setup() {
  size(960, 240);
  colorMode(RGB,255);
  //fullScreen();
    pixelDensity(2);
    smooth(2);
  f = loadFont("EuclidCircularATrial-Bold-250.vlw");
 // f = loadFont("EuclidCircularATrial-Regular-50.vlw");

  textFont(f); // Applies font

 //define colors
  a1 = color(143, 205, 156);
  a2 = color(143, 205, 156);
  b1 = color(150, 198, 234);
  b2 = color(150, 198, 234);
  c1 = color(239, 57, 66);
  c2 = color(239, 57, 66);
  d1 = color(253, 240, 77);
  d2 = color(253, 240, 77);
  e1 = color(198, 233, 246);
  e2 = color(198, 233, 246);
  f1 = color(239, 90, 122);
  f2 = color(239, 90, 122);
  g1 = color(248, 151, 29);
  g2 = color(248, 151, 29);

}


// define the block
class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ic, color ics, color ice) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
    c = ics;
    k = ice;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for( int i = 0; i < w; i++){
      stroke(lerpColor(c, k, i/w));
      line(x+i,y,x+i,y+239); //240 made it bigger than the previous one
  }

    colorMode(RGB, 255);
      //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;


//color[] first = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66),
//color(253, 240, 77), color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

// color Index starting from 0
//color[] second = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), //color(253, 240, 77),
//color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

 // start draw
void draw() {
  background(#ffffff);
  textSize(50);
    textAlign(CENTER, CENTER);
    fill(0);
    text("Visualizing Sound", width/2, height/9);
    text("Use the keys A, B, C, D, E, F, and G to create your song", width/2, 700);

  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );

  if ( keyPressed ) {

    println(key);
  }

  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);


    if(key == 'a'){
      player = minim.loadFile("A.mp3"); player.play();

    blocks.add( new Block( cx, cy,
      color(a1), // The first color
      color(a1), // The second color 
      color(b1)) );

    }else if(key == 'b'){
      player = minim.loadFile("B.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(b1), // The first color
      color(b1), // The second color 
      color(c1)) );


    }else if(key == 'c'){
      player = minim.loadFile("C.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(c1), // The first color
      color(c1), // The second color 
      color(d1)) );

    }else if(key == 'd'){
      player = minim.loadFile("D.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(d1), // The first color
      color(d1), // The second color 
      color(e1)) );

    }else if(key == 'e'){
      player = minim.loadFile("E.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(e1), // The first color
      color(e1), // The second color 
      color(f1)) );

    }else if(key == 'f'){
      player = minim.loadFile("F.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(f1), // The first color
      color(f1), // The second color 
      color(g1)) );

    }else if(key == 'g'){
       player = minim.loadFile("G.mp3"); player.play();

       blocks.add( new Block( cx, cy,
      color(g1), // The first color
      color(g1), // The second color 
      color(a1)) );

    }
     // to code: otherwise, any other key give me a black square


// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player); 

}

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; 

}

void keyReleased() {
  println("released: " + key); 
}

Not sure how to translate gradient here

Do you mean gradient in that there is different colors in one rect changing from one side to the other like a rainbow OR one fill color (composed from 2 colors)?

@Chrisir @TfGuy44

import ddf.minim.*;
Minim minim;
AudioPlayer player;


// Trying to change axis of gradient to y axis
// int Y_AXIS = 1;

// define the block
class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ic, color ics, color ice, int axis) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
    c = ics;
    k = ice;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);

 //    if (axis == Y_AXIS) {
    for( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i,y,x+i,y+239); //240 made it bigger than the previous one
  }

    colorMode(RGB, 255);
      //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

// color Index starting from 0
color[] colors = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

//Not sure of this part, Index2

/* color[] colors2 = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) }; 


// Not sure of this part, how to reference Index2
 color getColor (int colorIndex, colorIndex2) {

    color result = color (
        ( red( colors[colorIndex] )  + red ( colors[colorIndex] ) )  / 2 ,


        ( green( colors[colorIndex] )  + green  ( colors[colorIndex] ) )  / 2 ,

        ( blue ( colors[colorIndex] )  + blue ( colors[colorIndex] ) )  / 2

        );

    return result; 

}  */

// setup
void setup() {
  size(960, 240);
  colorMode(RGB,255);

}

 // start draw
void draw() {
  background(#ffffff);

  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );


  if ( keyPressed ) {

    println(key);
  }

  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);


    if(key == 'a'){
      player = minim.loadFile("A.mp3");
      colorIndex = 0; 
      player.play();
    }else if(key == 'b'){
      player = minim.loadFile("B.mp3");
      colorIndex = 1;
      player.play();
    }else if(key == 'c'){
      player = minim.loadFile("C.mp3");
      colorIndex = 2;
      player.play();
    }else if(key == 'd'){
      player = minim.loadFile("D.mp3");
      colorIndex = 3;
      player.play();
    }else if(key == 'e'){
      player = minim.loadFile("E.mp3");
      colorIndex = 4;
      player.play();
    }else if(key == 'f'){
      player = minim.loadFile("F.mp3");
      colorIndex = 5;
      player.play();
    }else if(key == 'g'){
       player = minim.loadFile("G.mp3");
      colorIndex = 6;
     player.play();
    }



// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player);

  // modified call block, gradient
  blocks.add( new Block( cx, cy,
      colors[colorIndex], // The first color
      colors[colorIndex], // The second color 
      255, Y_AXIS) );
}

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; 

}


void keyReleased() {
  println("released: " + key);


}

Right. Break your problem down into smaller problems. How are you detecting key presses and releases? How are you tracking which keys are pressed? How can you determine when a second key is pressed? What do you do if one key is pressed? What if more than one is pressed? Can you draw a gradient?

And without seeing the code of what you have tried, we're at a loss as to what will help you. Is your issue with detecting keys? Drawing gradients? We have no way of knowing. Post your newest code that shows your attempted changes.

@Chrisir @TfGuy44 I'm a bit lost. I want to make the gradient top to bottom when two keys are pressed, for example green and blue when 'a' and 'b' are pressed, respectively. Otherwise, if only 'a' is pressed, I get a solid green. I tried to make a second Index like mentioned, but i'm not sure which method would be the best way to go with in terms of code.

This is my attempt to create and read the same image using independent threads. The next code is jut a demo with plenty room of improvement specially in the concurrency side.

Parameters of interest:
* Set how often an image is re-generated/re-created
* Set how often an image is loaded
* Choose if loading the image only if file has changed
* The size of the image as it will have more impact on resources for larger images

I tested the code in JAVA2D and P3D and I can see my mem consumption going up but they always peak. I used Windows's task manager to keep an eye on RAM resources.

Kf

//REFERENCE: https://forum.processing.org/two/discussion/comment/73362/#Comment_73362
//REFERENCE: http://www.rgagnon.com/javadetails/java-0490.html
//REFERENCE: https://docs.oracle.com/javase/tutorial/essential/concurrency/index.html  
//REFERENCE: https://stackoverflow.com/questions/18223931/how-can-a-dead-thread-be-restarted


//INSTRUCTIONS: [Version 2.0]
//         *--  This code create and load images at different rates using independent threads.
//         *--  The creating of a radom image is done using its own thread
//         *--  Loading the image can be done either by consistenly loading the image
//         *--  every so often OR by loading the image only if it has changed. To 
//         *--  choose what loading method to use, use CHECK_IF_EXIST_BEFORE_LOADING
//         *--  field. Notice than loading an image is using requestImage() as it creates
//         *--  its own thread to load the image.
//         *--  

//===========================================================================
// IMPORTS:
import java.util.*;
import java.io.*;


//===========================================================================
// FINAL FIELDS:
final String FILENAME="image.jpg";
final boolean CHECK_IF_EXIST_BEFORE_LOADING=true;  

final int SYSTEM_FRAMERATE=30;

final int FRAMECOUNT_WRITING_RATE=200;
final int FRAMECOUNT_READING_RATE=60;
final int VERBOSITY_RATE=30;



//===========================================================================
// GLOBAL VARIABLES:
PImage mainImg;
boolean imgReady=false;
TimerTask readTaskSupervised;
Timer timer;
TimerTask aWriter;


//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:
void setup() {
  size(400, 400);
  frameRate(SYSTEM_FRAMERATE);

  aWriter=new WriteImage();
  aWriter.run();  //Run once to create image locally

  readTaskSupervised = new FileWatcher( new File(sketchPath(FILENAME)) ) {

    protected void onChange( File file ) {

      if (!file.exists()) {
        println("File is not ready yet!!!");
        return;
      }
      // here we code the action on a change
      println( "File "+ file.getName() +" have change !" );
      mainImg=requestImage(FILENAME);
      imgReady=false;
    }
  };

  timer = new Timer();

  //LOAD image #1: Loading only if file has changed
  if (CHECK_IF_EXIST_BEFORE_LOADING) {
    int timeInSecs=int( (FRAMECOUNT_READING_RATE*1.0/SYSTEM_FRAMERATE)*1000 );
    timer.schedule( readTaskSupervised, new Date(), timeInSecs);
  }

  //TASK to create an image
  int timeInSecs=int( (FRAMECOUNT_WRITING_RATE*1.0/SYSTEM_FRAMERATE)*1000 );
  timer.schedule(aWriter, new Date(), timeInSecs);
}



void draw() {
  background(0);


  //LOAD image #2: Continuous loading 
  if (!CHECK_IF_EXIST_BEFORE_LOADING && (frameCount%FRAMECOUNT_READING_RATE==0) ) {
    mainImg=requestImage(FILENAME);
    imgReady=false;
  }

  if (mainImg==null || mainImg.width<=0) {
    if (frameCount%VERBOSITY_RATE==0) println("Waiting for image @"+frameCount);
  } else {

    if (imgReady==false) {
      mainImg.resize(width, height);
      imgReady=true;
      println("Resizing done @"+frameCount);
    }

    image(mainImg, 0, 0);
  }
}




//===========================================================================
// OTHER FUNCTIONS:

class WriteImage extends TimerTask { 

  void run() {
    create();
  }

  void create() {

    PImage img;
    int w=4000;
    int h=3000;

    if (w+h<100) {
      println("WARNING: Invalid dimensions: w+h must be greater than 100");
      return;
    }

    //File f = new File(sketchPath(FILENAME));
    //if(f.exists()){
    //  f.delete();
    //  delay(500);  //Safety net
    //}
    img=createImage(w, h, ARGB);
    img.loadPixels();
    int green=int(random(5, 250));
    int blue=int(random(5, 250));
    random(50, 200);
    for (int i=0; i<w*h; i++)
      img.pixels[i]=color( (i%w)*1.0/w*255, green, blue );  // A random gradient across the width of the iamge 
    img.updatePixels();
    img.save(FILENAME);
    img=null;
  }
}



//=================



public abstract class FileWatcher extends TimerTask {
  private long timeStamp;
  private File file;

  public FileWatcher( File file ) {
    this.file = file;
    this.timeStamp = file.lastModified();
  }

  public final void run() {
    long timeStamp = file.lastModified();

    if ( this.timeStamp != timeStamp ) {
      this.timeStamp = timeStamp;
      onChange(file);
    }
  }

  protected abstract void onChange( File file );
}

Of course, that will just get you one color. To do a gradient you will need two colors, and you will need to modify your Block class so that it does a gradient between those colors instead of just drawing a flat color.

Follow Chrisir's advice to detect multiple presses and map them to two colors, and when you have two colors, you can use this modified Block class to do gradients:

class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ics, color ice) {
    x = ix;
    y = iy;
    w = 0;
    c = ics;
    k = ice;
  }
  void draw() {
    fill(c);
    noStroke();
    colorMode(RGB,255);
    for( int i = 0; i < w; i++){
      stroke(lerpColor(c,k,i/w));
      line(x+i,y,x+i,y+20);
    }
    colorMode(HSB, 255);
    //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

void setup() {
  size(600, 600);
  colorMode(HSB, 255);
}

void draw() {
  background(0);
  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if ( !pKeyPressed && keyPressed ) {
    blocks.add( new Block( cx, cy, 
      color(0), // The first color.
      color(map(key, int('a'), int('z'), 0, 255), // The second color. 
      255, 255) ) );
  }
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed;
}

Notice here that the first color being passed in to the Block class is always black, as the code to determine this second color is what I am leaving up to you!

Again, realize how easy it is to modify what a Block is when you have a Block class!

i guess so

see

https://forum.processing.org/two/discussion/16594/can-multiple-keys-be-pressed-on-the-keyboard

replace isUp, isDown with isA, isB etc.

Calculate gradient

to calculate the color take the average from the two colors that are related to the 2 keys.

so you have colorIndex1 and colorIndex2 independently

and then you say instead of colors[colorIndex] in line 87

something fancy like ...getColor(colorIndex1, colorIndex2 )...

and then the average:

color getColor (int ind1, ind2) {

    color result = color (
        ( red( colors[ind1] )  + red ( colors[ind2] ) )  / 2 ,


        ( green( colors[ind1] )  + green  ( colors[ind2] ) )  / 2 ,

        ( blue ( colors[ind1] )  + blue ( colors[ind2] ) )  / 2 

        );

    return result; 


}

@Chrisir Alright, I'll try that. Any idea how to press two keys at the same time to produce a gradient of the two colors?

@TfGuy44 and @Chrisir: I actually got some help from my professor by showing him your codes, and we figured out a simple way to solve the problem, although I'm sure it's not the most sophisticated way but...

Here it is and I even added sound, yay!

import ddf.minim.*;

Minim minim;
AudioPlayer player;

// define the block
class Block {
  float x, y, w;
  color c;
  Block(float ix, float iy, color ic) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
  }
  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

// color Index starting from 0
color[] colors = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

// setup
void setup() {
  size(960, 240);
  colorMode(RGB);
}

 // start draw
void draw() {
  background(0);
  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);
    if(key == 'a'){
      colorIndex = 0;
      player = minim.loadFile("A.mp3");
      player.play();
    }else if(key == 'b'){
      player = minim.loadFile("B.mp3");
      colorIndex = 1;
      player.play();
    }else if(key == 'c'){
      player = minim.loadFile("C.mp3");
      colorIndex = 2;
      player.play();
    }else if(key == 'd'){
      player = minim.loadFile("D.mp3");
      colorIndex = 3;
      player.play();
    }else if(key == 'e'){
      player = minim.loadFile("E.mp3");
      colorIndex = 4;
      player.play();
    }else if(key == 'f'){
      player = minim.loadFile("F.mp3");
      colorIndex = 5;
      player.play();
    }else if(key == 'g'){
       player = minim.loadFile("G.mp3");
      colorIndex = 6;
     player.play();
    } 


// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player);

// call the block to look at the color index as reference
    blocks.add( new Block( cx, cy, colors[colorIndex]) );
  }

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; }

Since we figured out the color-key-sound assignment part out, how would I go about being able to press two keys at the same time to produce gradient of the two colors?

I want to be like this, this circle is the cloud, fill the radial gradient color outward from the center point of the cloud, the color is given in the above code.