CODEWITHSUNDEEP
openglglslshaderfragment-shadersimplex-noise
Garrus
Garrus

Reputation: 61

How to adjust Color Properly in a Noise Pattern?

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?

Upvotes: 1

Views: 381

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

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);
}

Upvotes: 1

Related Questions