加工过程中从绿色到黄色的渐变

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

查看示例＆gt;中的 LinearGradient 示例基础知识＆gt;颜色＆gt;的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);
    }
  }
}

稍后在gradients and efficiency上查看此答案。

让我们保持简单，不要担心现在的表现。 Processing有一个名为lerpColor()的便捷函数，它在两种颜色之间进行插值。这意味着您可以在传递的其他两种颜色之间获取颜色值，并在0.0到1.0之间插值。 将此插值量想象为百分比，其中0.0表示0％插值，因此您的第一种颜色（例如绿色）和1.0表示100％，因此您的第二种颜色（例如黄色），因此0.5将在绿色和黄色之间为50％。 / p>

这就是我的意思：

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）演示：

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>