实现色彩循环背景的最佳方法是什么?

时间:2017-09-06 11:31:49

标签: java processing cos

在不使用多个文件的情况下,使用cos或sin在java中平滑地循环背景颜色(以及其他东西)的最佳方法是什么?我尝试过使用随机性并分别增加每个r,g和b值,使其看起来很正常,但它是抖动,不平滑,颜色很可怕。现在,它只是纯白色。我只包含必要的代码,我正在使用Processing 3。

//background
int bg1 = 255; //r
int bg2 = 255; //g
int bg3 = 255; //b

void draw() {
fill(bg1,bg2,bg3);
}

3 个答案:

答案 0 :(得分:1)

你已经掌握了一般的想法。这是一个三步过程:

  • 第1步:在草图顶部声明变量。
  • 第2步:使用这些变量绘制场景。
  • 第3步:随着时间的推移更改这些变量。

这是在Processing中创建任何动画的基本方法。 Here是一个包含更多信息的教程。

这是一个小例子,显示了一个在白色和黑色之间循环的窗口:

float c = 0;

float cChange = 1;

void draw(){

  background(c);

  c += cChange;
  if(c < 0 || c > 255){
    cChange *= -1;
  }
}

您需要做类似的事情,但要使用3个颜色值而不是1.请注意,我每次只更改颜色一小部分颜色,这使得它看起来很光滑而不是紧张。

如果您仍然遇到问题,请在新问题中发布更新后的MCVE,我们会从那里开始。祝你好运。

答案 1 :(得分:1)

如果您特别想要使用正弦波作为输入而不是锯齿波,那么您需要将输入(例如时间)映射到某个颜色范围。例如:

  1. 每2000毫秒的值从0增加到2.0
  2. 值的范围是-1到1.
  3. sin(value)的输出范围为-1到1.
  4. 将输出映射到颜色范围。
  5. map()适用于映射值,但您也可以使用colorMode()映射颜色范围 - 所以不要移动正弦输出值,只需输出0-2.0并设置最大RGB或HSB值为2.0而不是255。

    以下是一些示例,所有示例都在一个草图中同时运行:

    float val;
    float out;
    
    void draw() {
      background(0);
      val = TWO_PI * (millis()%2000)/2000.0; // every 2000 milliseconds value increases from 0 to 2PI
      out = sin(val);
    
      // white-black (256-0)
      pushStyle(); 
      fill(128 + 128*out); 
      rect(0,0,50,50);
      popStyle();
    
      // red-black (255-0)
      pushStyle();
      colorMode(RGB, 255);
      fill(255*(out+1), 0, 0);
      rect(50,0,50,50);
      popStyle();
    
      // hue rainbow (0-2)
      pushStyle();
      colorMode(HSB, 2.0);
      fill(out+1, 2, 2);
      rect(0,50,50,50);
      popStyle();
    
      // hue blue-green (3 to 5 / 9)
      pushStyle();
      colorMode(HSB, 9);
      fill(out+4, 9, 9);
      rect(50,50,50,50);
      popStyle();
    
      translate(width/2,height/2 - out * height/2);
      ellipse(0,0,10,10);
    }
    

    enter image description here

答案 2 :(得分:-1)

不要理解你对背景颜色的cos和罪的意思。但也许这样的东西就是你想要的?

void draw(){
 int H = frameCount%1536;
 background(color(abs(H-765)-256,512-abs(H-512),512-abs(H-1024))); 
}