“This is the 10th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

After understanding random number generation, we can use random number function to realize noise effect. For example, the white noise effect of television can be achieved through random number functions. Things like a TV snowflake screen or a starry sky or a cloud are all randomly arranged, and you have to use a random function to do that.

Random function noise

float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898.78.233))) *43758.5453123);
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float noise = random(uv);
    vec3 color = texture(iChannel2,uv).rgb;
    / / by subtracting
    color.r -= noise;
    color.g -= noise;
    color.b -= noise;
    / / add
    color.r += noise;
    color.g += noise;
    color.b += noise;
    gl_FragColor = vec4(color,1.0);
    / / mixed
    gl_FragColor = vec4(mix(color,vec3(noise),0.5),1.0);
}
Copy the code
noise add Subtracting the hybrid

Texture RGB can be added, subtracted or mixed by random function to achieve noise effect. Comparatively speaking, mix mode has better effect.

Noise effect comparison

Parameter stack

The effect of adding a value to uv based on the original two-dimensional random function.

float noise( vec2 n )
{
	return fract(sin(dot(n.xy, vec2(12.9898.78.233))) *43758.5453);
}


float n1noise( vec2 n )
{
	float t = fract(100.0);
	float nrnd0 = noise( n + 0.07*t );
	return nrnd0;
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float o = n1noise(200.0 * uv);
    gl_FragColor = vec4(vec3(o),1.0);

}
Copy the code

Parameters of offset

Parameter offset On the basis of the original two-dimensional random function, the value after processing is offset, and then the final random number is obtained after dot and MIX calculation for several times.

vec2 random2(vec2 st){
    st = vec2( dot(st,vec2(127.1.311.7)),
              dot(st,vec2(269.5.183.3)));return 1.0 + 2.0*fract(sin(st)*43758.5453123);
}
float noise(vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    vec2 u = f*f*(3.02.0*f);

    return mix( mix( dot( random2(i + vec2(0.0.0.0) ), f - vec2(0.0.0.0)),dot( random2(i + vec2(1.0.0.0) ), f - vec2(1.0.0.0) ), u.x),
                mix( dot( random2(i + vec2(0.0.1.0) ), f - vec2(0.0.1.0)),dot( random2(i + vec2(1.0.1.0) ), f - vec2(1.0.1.0) ), u.x), u.y);
}
Copy the code
basis Parameter stack Parameters of offset

The above three basic noise map methods are all around the formula FRACT (sin(dot(n.xy, VEC2 (12.9898, 78.233)) * 43758.5453); Evolution and then to achieve different noise effects, according to the need to design a noise map in line with the design requirements.

conclusion

The realization of noise graph can not be separated from the generation of random number, with random number can achieve irregular noise distribution form. At the same time mentioned above the generated random number is pseudo-random. However, in practical application, it can be found that such pseudo-randomness is enough to meet current requirements and can be used as a truly random number.