实现颜色循环背景的最佳方式是什么?
What's the best way to implement a color cycling background?
在 java 中使用 cos 或 sin 平滑地循环背景颜色(以及其他颜色)而不使用多个文件的最佳方法是什么?我试过使用随机性并分别增加每个单独的 r、g 和 b 值,使它看起来有点正常,但它很不稳定,不平滑,而且颜色很糟糕。现在,它只是纯白色。我只包含了必要的代码,我正在使用 Processing 3。
//background
int bg1 = 255; //r
int bg2 = 255; //g
int bg3 = 255; //b
void draw() {
fill(bg1,bg2,bg3);
}
您已经掌握了总体思路。这是一个三步过程:
- 第 1 步: 在草图顶部声明变量。
- 第 2 步:使用这些变量绘制场景。
- 第 3 步:随时间改变这些变量。
这是在 Processing 中创建任何动画的基本方法。 Here 是包含更多信息的教程。
这是一个小例子,显示了 window 在白色和黑色之间循环:
float c = 0;
float cChange = 1;
void draw(){
background(c);
c += cChange;
if(c < 0 || c > 255){
cChange *= -1;
}
}
您需要做类似的事情,但使用 3 个颜色值而不是 1 个。请注意,我每次只更改少量颜色,这使它看起来平滑而不是抖动。
如果您仍然遇到问题,请 post 在一个新问题中更新 MCVE,我们将从那里开始。祝你好运。
不明白你所说的cos和sin与背景颜色的关系是什么意思。但也许这样的事情就是你想要的?
void draw(){
int H = frameCount%1536;
background(color(abs(H-765)-256,512-abs(H-512),512-abs(H-1024)));
}
如果您特别想使用正弦波而不是锯齿波作为输入,那么您需要将您的输入(例如时间)映射到某个颜色范围。例如:
- 每 2000 毫秒值从 0 增加到 2.0
- 取值范围为 -1 到 1。
- sin(value)的输出范围是-1到1。
- 将输出映射到颜色范围。
map() works well for mapping values, but you can also use 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);
}
在 java 中使用 cos 或 sin 平滑地循环背景颜色(以及其他颜色)而不使用多个文件的最佳方法是什么?我试过使用随机性并分别增加每个单独的 r、g 和 b 值,使它看起来有点正常,但它很不稳定,不平滑,而且颜色很糟糕。现在,它只是纯白色。我只包含了必要的代码,我正在使用 Processing 3。
//background
int bg1 = 255; //r
int bg2 = 255; //g
int bg3 = 255; //b
void draw() {
fill(bg1,bg2,bg3);
}
您已经掌握了总体思路。这是一个三步过程:
- 第 1 步: 在草图顶部声明变量。
- 第 2 步:使用这些变量绘制场景。
- 第 3 步:随时间改变这些变量。
这是在 Processing 中创建任何动画的基本方法。 Here 是包含更多信息的教程。
这是一个小例子,显示了 window 在白色和黑色之间循环:
float c = 0;
float cChange = 1;
void draw(){
background(c);
c += cChange;
if(c < 0 || c > 255){
cChange *= -1;
}
}
您需要做类似的事情,但使用 3 个颜色值而不是 1 个。请注意,我每次只更改少量颜色,这使它看起来平滑而不是抖动。
如果您仍然遇到问题,请 post 在一个新问题中更新 MCVE,我们将从那里开始。祝你好运。
不明白你所说的cos和sin与背景颜色的关系是什么意思。但也许这样的事情就是你想要的?
void draw(){
int H = frameCount%1536;
background(color(abs(H-765)-256,512-abs(H-512),512-abs(H-1024)));
}
如果您特别想使用正弦波而不是锯齿波作为输入,那么您需要将您的输入(例如时间)映射到某个颜色范围。例如:
- 每 2000 毫秒值从 0 增加到 2.0
- 取值范围为 -1 到 1。
- sin(value)的输出范围是-1到1。
- 将输出映射到颜色范围。
map() works well for mapping values, but you can also use 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);
}