Color gradient to a shape

vardaloupas

After creating the program for color gradient, http://forum.processing.org/two/discussion/1487/gradient-from-17-colors-to-255-colors

I want to do the same but with a shape. As the following figure.

Any ideas to starting coding?

amnon

I think a good point to start would be a grid of vertices using a beginShape-endShape or PShape of kind TRIANGLES or QUADS. Give each point a color, for example blue, red or yellow. See the automatic color interpolation of OpenGL in action. Then start moving points around, adding/removing points etc. to get the shape and color distribution you want.

vardaloupas

amnon thank you for your answer but I faced a lot of problems. Guys can you give me more help about this problem, how can do this?

TfGuy44

One possible way:

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  noStroke();
  for(int i=0;i<20;i++){
    scale(.95);
    fill(200-10*i,200,(i>=10)?(20*(i-10)):0);
    beginShape();
    vertex(-100,-100);
    vertex(100,-100);
    vertex(100,100);
    vertex(0,150);
    vertex(-100,100);
    endShape(CLOSE);
  }
  noLoop();
}

vardaloupas

Thank you very much for the answer.

I have only a question about the fill line which you convert thr RGB to:

fill(200-10*i,200,(i>=10)?(20(i-10)):0)

I'm not sure if I understand what exactly you did.

GoToLoop

fill(200 - 10*i, 200, i>=10? 20*(i-10) : 0);

• 200 - 10*i -> greater the i darker the red channel.
• 200 -> fixed bright green.
• i>=10? 20*(i-10) : 0 -> 1st half of the loop, blue is 0; 2nd half, greater the i lighter the blue.

vardaloupas

For the same question, I have the following code. Ι try to implement the same but not a square but in a shape like the shape at the beginning of the question.

    static final int ribbon_length = 255, H = 200;
    void setup() {
      size(ribbon_length, H);
    }

    void draw() {

      float p = 1; 
      int up_y = 10; 
      int widthh = 1;  
      int height = 180;
      float a = pow (ribbon_length, 1-p);
      float colour = 0;

      for (int step = 0; step <= 255; step++) {
          colour = a * pow (step, p);
          fill(colour,0,0); //χρωματική 
          rect(widthh*step, up_y, widthh, height);
          noStroke();
       }
    }

I try this but I thing is wrong.

      static final int ribbon_length = 400, H = 400;

void setup() {
  size(ribbon_length, H);
}

void draw() {

  float p = 1; 
  int up_y = 10; 
  int widthh = 1;  
  int height = 180;
  float a = pow (ribbon_length, 1-p);
  float colour = 0;
  background(0);
  translate(width/2,height/2);
  for (int step = 0; step <= 255; step++) {
      colour = a * pow (step, p);
      fill(colour,0,0);
      //rect(widthh*step, up_y, widthh, height);
      scale(.95);
    fill(100,200,10);
    beginShape();
    vertex(-100,-100);
    vertex(100,-100);
    vertex(100,100);
    vertex(0,150);
    vertex(-100,100);
    endShape(CLOSE);
      //noStroke();
   }
}