加工过程中由绿到黄的渐变

Question

使用处理程序

我怎么让它从绿色变成黄色？我知道怎么把它变成深绿色到亮绿色，蓝色到黄色，但那不是我想要的。请救命！

size(300,800);
  int strokeWeight = 3;

  for(int i = 0; i< height; i++) {
    for(int c = 120; c>0; c--) {
      stroke(c, i, c);
      line(0, i, width, i);
    }
  }

Answer 1

请查看Examples>Basics>Color>LinearGradient中的LinearGradient示例：

/**
 * Simple Linear Gradient 
 * 
 * The lerpColor() function is useful for interpolating
 * between two colors.
 */

// Constants
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;

void setup() {
  size(640, 360);

  // Define colors
  b1 = color(255);
  b2 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);

  noLoop();
}

void draw() {
  // Background
  setGradient(0, 0, width/2, height, b1, b2, X_AXIS);
  setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);
  // Foreground
  setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
  setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (int i = y; i <= y+h; i++) {
      float inter = map(i, y, y+h, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (int i = x; i <= x+w; i++) {
      float inter = map(i, x, x+w, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}

稍后也可以查看关于梯度和效率的答案。

让我们保持简单，暂时不担心性能。Processing有一个方便的函数lerpColor()，它在两种颜色之间进行插值。这意味着您可以获得您传递的其他两种颜色之间的颜色值，以及在0.0和1.0之间插值的值。把这个插值量想象成一个百分比，0.0意味着0%的插值，所以你的第一种颜色（例如绿色）和1.0意味着100%，所以你的第二种颜色（例如黄色），所以0.5将是绿色和黄色之间的50%。

我的意思是：

noStroke();

color green = color(0,200,0);
color yellow = color(200,200,0);

int gradientSteps = 20;//how detailed will the gradient be
int gradientStripWidth = width/gradientSteps;//compute how many strips of the same width we'll need to fill the sketch

for(int i = 0; i < gradientSteps; i++){//for each gradient strip
  float t = map(i,0,gradientSteps,0.0,1.0);//compute i mapped from 0-gradientSteps to 0.0->1.0
  //this value will plug into lerpColor which does the colour interpolation for you
  color interpolatedColor = lerpColor(green,yellow,t);
  //finally, use the colour and draw some boxes 
  fill(interpolatedColor);
  rect(i*gradientStripWidth,0,gradientStripWidth,height);
} 

下面是一个非常类似的(js)演示：

null

function setup() {
  noStroke();

  var green = color(0,200,0);
  var yellow = color(200,200,0);
  
  var gradientSteps = 20;//how detailed will the gradient be
  var gradientStripWidth = width/gradientSteps;//compute how many strips of the same width we'll need to fill the sketch
  
  for(var i = 0; i < gradientSteps; i++){//for each gradient strip
    var t = map(i,0,gradientSteps,0.0,1.0);//compute i mapped from 0-gradientSteps to 0.0->1.0
    //this value will plug into lerpColor which does the colour interpolation for you
    var interpolatedColor = lerpColor(green,yellow,t);
    //finally, use the colour and draw some boxes 
    fill(interpolatedColor);
    rect(i*gradientStripWidth,0,gradientStripWidth,height);
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.9/p5.min.js"></script>