如何创建具有渐变颜色的线条？

Question

我想在一个球体和另一个球体之间画一条线。该线的颜色应从第一个球体的颜色更改为下一个球体的颜色。我怎么做？

Answer 1

xImperiak 的解决方案是正确的（+1）。如果速度/效率成为问题，pixels[]可以直接访问。

例如

loadPixels();
// for...
pixels[(int)newRelPoint.x + (int)newRelPoint.y * height] = colorAtPoint;

既然您提到了球体，您就可以利用P3D渲染器来更改顶点颜色以实现渐变效果：

color firstColor  = 0xffb957ce;
color secondColor = 0xff5994ce;

void setup(){
  size(600, 600, P3D);
  sphereDetail(9);
}

void draw(){
  background(#3a4e93);
  translate(width * 0.5, height * 0.5, 0);
  noFill();
  float sphere1Y = sin(frameCount * 0.01) * 30;
  float sphere2Y = sin((frameCount * 0.01) + PI) * 30;
  // draw 1st sphere
  drawSphere(-150, sphere1Y, 0, 90, firstColor);
  // draw 2nd sphere
  drawSphere( 150, sphere2Y, 0, 90, secondColor);
  //draw gradient line
  drawGradientLine(-150, sphere1Y, 0,
                    150, sphere2Y, 0,
                    firstColor, secondColor);
}

void drawGradientLine(float x1, float y1, float z1,
                      float x2, float y2, float z2,
                      color colorFrom, color colorTo){
  noStroke();
  // draw gradient line
  beginShape();
    // change vertex colours between vertices to achieve gradient look
    fill(colorFrom);
    vertex(x1, y1, z1);
    // slight offset to fake thickness
    vertex(x1, y1-3, z1);    
    fill(colorTo);
    vertex(x2, y2, z2);
    // slight offset to fake thickness
    vertex(x2, y2+3, z2);    
  endShape(CLOSE);                        
}

void drawSphere(float x, float y, float z, float radius, color strokeColor){
  stroke(strokeColor);
  pushMatrix();
    translate(x, y, z);
    sphere(radius);
  popMatrix();
}

请注意，一个细矩形是使用 4 个点绘制的：球体之间的两个点以及每个点的轻微垂直偏移。

这更多的是一种解决方法。通常，您需要计算线之间的角度才能正确旋转坐标，但由于这是笔画，因此可以很好地工作。

此外，还可以使用 @micycle 的PeasyGradients库和mask()您需要的行。