Changing color gradient

vardaloupas

So far I've managed to create with the help of some forum programs for color grading.

static final int ribbon_length = 255, H = 200;
void setup() {
  size(ribbon_length, H);
}
void draw() {
  float p = 0.5; 
  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 <em> pow (step, p);
      fill(colour);
      rect(widthh</em>step, up_y, widthh, height);
      noStroke();
      //save(&quot;cross20.png&quot;);
   }
}

My next step is to creat a color gradation of two colors in irregular shape and to have the opportunity to shift the gradient within the shape. An example is the following code.

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

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

In the above code just trying to be able to change the possision of color gradient, with a variable. Any help or ideas?

Poersch

Maybe I got you wrong, but you are already positioning the gradient shape. translate() basically moves the coordinate system to the specified point, just replace width/2 and height/2 with some variables.

Example with you code:

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

void draw() {
  background(0);
  translate(mouseX, mouseY); // Using the mouse coordinates as position
  noStroke();
  for (int i=0;i<255;i++) {
    scale(.95);
    fill(200-10*i, 200, (i>=10)?(20*(i-10)):0);
    beginShape();
    vertex(-180, -100);
    vertex(-190, -120);
    vertex(-150, -150);
    vertex(100, -100);
    vertex(100, 100);
    vertex(0, 150);
    vertex(-110, 100);
    vertex(-120, 100);
    vertex(-130, 100);
    vertex(-140, 100);
    vertex(-150, 100);
    endShape(CLOSE);
  }
  //noLoop(); // Keep rendering
}

Improved code (utilizing openGL's color interpolation):

float[][] vertices = new float[][] { { -180, -100 }, { -190, -120 }, { -150, -150 }, { 100, -100 }, { 100, 100 }, { 0, 150 }, { -110, 100 }, { -120, 100 }, { -130, 100 }, { -140, 100 }, { -150, 100 } };
color innerColor = color(0, 0, 255);
color outerColor = color(255, 0, 0);

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

void draw() {
  background(0);
  translate(mouseX, mouseY);
  noStroke();
  renderGradientShape(vertices, innerColor, outerColor);
}

void renderGradientShape(float[][] vertices, color innerColor, color outerColor) {
  beginShape(TRIANGLES);
  fill(outerColor);
  vertex(vertices[vertices.length - 1][0], vertices[vertices.length - 1][1]);
  vertex(vertices[0][0], vertices[0][1]);
  fill(innerColor);
  vertex(0, 0);
  for(int n = 1; n < vertices.length; n++) {
      fill(outerColor);
      vertex(vertices[n - 1][0], vertices[n - 1][1]);
      vertex(vertices[n][0], vertices[n][1]);
      fill(innerColor);
      vertex(0, 0);
  }
  endShape();
}

Btw.: The latter example runs much faster.

PhiLho

Also take a look at the To newcomers in this forum: read attentively these instructions topic, it explains how to format code... (using the pre tag is OK, but not need for html and body tags! And no p or br are necessary...)

vardaloupas

I will try to show you what I mean with pictures. I have the following code and changing the number p, changes the picture as below. The three images are numbers 0.5 - 2 and 5.

static final int ribbon_length = 255, H = 200;

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

void draw() {

  float p = 0.5; 
  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);
      rect(widthh*step, up_y, widthh, height);
      noStroke();
      //save("cross20.png");
   }
}

I try to do the same in programma with the shape.

Any way thank you for the code.

Poersch

Although PhiLho is totally right, it's not the solution to your problem. Never a good idea to mark a thread as answered before someone helped you with your actual problem.

You can create shaped gradients using Processing's mask() method. An unoptimized example:

float[][] vertices = new float[][] { { -300, 0 }, { 0, -300 }, { 300, 0 }, { 0, 300 } };
PGraphics mask, gradient;


void setup() {
    size(600, 600, P2D);
    gradient = createGraphics(width, height, P2D);
    updateGradient();
    mask = createGraphics(width, height, P2D);
    updateMask();
    gradient.mask(mask);
}


void draw() {
  background(#ff0000);
  image(gradient, 0, 0);
}


void updateMask() {
    mask.beginDraw();
    mask.background(#000000);
    mask.fill(#ffffff);
    mask.translate(mask.width / 2, mask.height / 2);
    mask.beginShape();
    mask.vertex(vertices[vertices.length - 1][0], vertices[vertices.length - 1][1]);
    mask.vertex(vertices[0][0], vertices[0][1]);
    for(int n = 1; n < vertices.length; n++) {
        mask.vertex(vertices[n - 1][0], vertices[n - 1][1]);
        mask.vertex(vertices[n][0], vertices[n][1]);
    }
    mask.endShape(CLOSE);
    mask.endDraw();
}


void updateGradient() {
    gradient.beginDraw();
    gradient.noStroke();
    gradient.beginShape();
    gradient.fill(#ffffff);
    gradient.vertex(0, height);
    gradient.vertex(0, 0);
    gradient.fill(#000000);
    gradient.vertex(width, 0);
    gradient.vertex(width, height);
    gradient.endShape();
    gradient.endDraw();
}