How to adjust Color Properly in a Noise Pattern? - opengl

Question

I am trying to write a noise pattern that resembles wood in GLSL. Here is my current code:
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233))) * 43758.545312);
}
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( random(i + vec2(0.0,0.0) ),
random(i + vec2(1.0,0.0) ), u.x),
mix( random(i + vec2(0.0,1.0) ),
random(i + vec2(1.0,1.0) ), u.x), u.y);
}
mat2 rotate2d(float angle)
{
return mat2(cos(angle), -sin(angle),
sin(angle), cos(angle));
}
float lines(in vec2 pos, float b){
float scale = 10.0;
pos *= scale;
return smoothstep(0.0, 0.5+b * 0.5, abs((sin(pos.x*3.1415)+b*2.0))*0.5);
}
vec3 c1 = vec3(0.134,0.109,0.705);
vec3 c2 = vec3(0.000,0.411,0.665);
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 pos = st.yx*vec2(11.0, 3.0);
vec3 color = vec3(1.0);
float pattern = pos.x;
color = mix(c1, c2, pattern);
// Add noise
pos = rotate2d(noise(pos)) * pos;
// Draw lines
pattern = lines(pos, 0.7);
gl_FragColor = vec4(pattern, color);
}
In its current state it makes my pattern look reddish-pink with some weird gradient showing up at the bottom. I want to make the pink areas brown while my pattern stays black. Can someone show how to adjust my color variables to do this?

Answer 1

The color channels are red, green, blue. Hence, red is the first component:
vec3 c1 = vec3(0.705,0.109,0.134);
vec3 c2 = vec3(0.665,0.411,0.000);
You need to mix the colors after pattern is set:
void main() {
// [...]
// Draw lines
pattern = lines(pos, 0.7);
color = mix(c1, c2, pattern);
gl_FragColor = vec4(color, 1.0);
}
See the result when you use a dark brown and a light broun:
vec3 c1 = vec3(50.0, 40.0, 30.0) / 255.0;
vec3 c2 = vec3(200.0, 150.0, 100.0) / 255.0;
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
float random (in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.545312);
}
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( random(i + vec2(0.0,0.0) ),
random(i + vec2(1.0,0.0) ), u.x),
mix( random(i + vec2(0.0,1.0) ),
random(i + vec2(1.0,1.0) ), u.x), u.y);
}
mat2 rotate2d(float angle)
{
return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}
float lines(in vec2 pos, float b){
float scale = 10.0;
pos *= scale;
return smoothstep(0.0, 0.5+b * 0.5, abs((sin(pos.x*3.1415)+b*2.0))*0.5);
}
vec3 c1 = vec3(50.0, 40.0, 30.0) / 255.0;
vec3 c2 = vec3(200.0, 150.0, 100.0) / 255.0;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 pos = st.yx*vec2(11.0, 3.0);
// Add noise
pos = rotate2d(noise(pos)) * pos;
// Draw lines
float pattern = lines(pos, 0.7);
vec3 color = mix(c1, c2, pattern);
gl_FragColor = vec4(color, 1.0);
}