根据速度为椭圆分配颜色

Question

我在屏幕上（以2D模式）有n个球物体（每个球物体以随机速度（0,4）开始）相互碰撞。我要做的是根据每个球的速度为其分配颜色，以使速度最高的球（例如v）具有蓝色，并且随着速度的降低，颜色逐渐变为红色（中间速度取该范围）彩虹的颜色）。我了解这是范围转换问题。

我该如何处理？

我试图获得球的速度大小并将其重新缩放到一个范围（0,255）。然后，我使用fill方法为球赋予颜色。

public void display(){

    float v = sqrt(pow(this.getDX(),2)+pow(this.getDY(),2));
    int scale = (int)(v * 255)/8;
    stroke(0);

    fill(scale,0,scale);   
    ellipse(this.xpos, this.ypos, this.size ,this.size);
  }
}

我无法获得预期的结果。主要是因为我不知道如何混合颜色，在这种情况下，要使红色代表最慢的球，而使蓝色代表最快的球。

Answer 1

  

[...]，使得速度最高的球（例如v）具有蓝色，并且随着速度的降低，颜色逐渐变为红色（中间速度取彩虹的范围）[...]

了解HSL and HSV颜色范围，并编写一种将[0.0，1.0]范围内的 hue 值转换为RGB颜色并设置fill()颜色的方法：

public void SetFillFromHUE(float hue) {

    float R = Math.abs(hue * 6.0 - 3.0) - 1.0;
    float G = 2.0 - Math.abs(hue * 6.0 - 2.0);
    float B = 2.0 - Math.abs(hue * 6.0 - 4.0);
    fill(R*255.0, G*255.0, B*255.0); 
}

我调查了v值始终在[0，10.0]范围内（根据您先前的问题Buggy bouncing balls。

所以

float v = sqrt(pow(this.getDX(),2)+pow(this.getDY(),2)) / 10.0;

将给出一个取决于速度v的值，范围为[0.0，1.0]。

研究色调颜色范围，显示 0.0 是红色，而 0.66 是蓝色。

SetFillFromHUE(v * 2.0/3.0);

设置从红色到黄色到绿色到蓝色的颜色。

最终方法display如下：

public void display(){

    float v = sqrt(pow(this.getDX(),2)+pow(this.getDY(),2)) / 10.0;

    stroke(0);
    SetFillFromHUE( v * 4.0/6.0 ); 
    ellipse(this.xpos, this.ypos, this.size ,this.size);
}