微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何创建具有渐变颜色的线条?

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

解决方法

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,90,firstColor);
  // draw 2nd sphere
  drawSphere( 150,sphere2Y,secondColor);
  //draw gradient line
  drawGradientLine(-150,150,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();
}

gradient line

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

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

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

,

您必须计算要绘制的线的数学函数。只需将其中一个点的向量减去另一个点向量即可轻松完成。这将是方向向量,它将乘以变量,然后添加其中一个点。之后,您将不得不使用处理提供的 set()(更改像素的颜色)和 lerpColor() 函数(执行渐变)。

最终的代码应该是这样的:

PVector point1;
PVector point2;
color color1;
color color2;
void drawGradientLine(PVector point1,PVector point2,color color1,color color2){

  PVector direcVector = PVector.sub(point2,point1);

  for(float f = 0; f < 1; f += 0.0001){                 //0.0001 or the value that you prefer 0<k<1.

    PVector newRelPoint = PVector.mult(direcVector,f); //Rel from relative to,in this case,point1

    color colorAtPoint = lerpColor(color1,color2,f);

    set((int)newRelPoint.x,(int)newRelPoint.y,colorAtPoint);
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。