shaders (basic - noise)

silly noise thing

uniform vec2    u_resolution;
uniform vec2    u_mouse;
uniform float   u_time;

varying vec2    v_texcoord;

// a pretty okay 2d pseudonoise using sine times large numbers
float noise2d(vec2 p) {
	return fract(sin(p.x*727.0 + p.y*2999.0)*6662.0*10.0);
}

// a "blurred" noise by layering existing noises
// when res is not a power of 2, this looks weird
// I believe it to be because of floating point rounding near integers.
// with powers of 2 fractions, it's nice and happy. but without, it's sad.
float noise2d_blur(vec2 p, vec2 res) {
	vec2 p_scaled = p*res;
	vec2 t = smoothstep(0.0, 1.0, fract(p_scaled));
	vec2 id = floor(p_scaled);

	// get each value on the square lattice of noise
	float bl = noise2d(id / res);
	float br = noise2d((id + vec2(1,0)) / res);
	float tl = noise2d((id + vec2(0,1)) / res);
	float tr = noise2d((id + vec2(1,1)) / res);

	// mix between these values depending on p
	float c1 = mix(bl, br, t.x);
	float c2 = mix(tl, tr, t.x);
	return mix(c1, c2, t.y);
}

// layer a bunch of blurred noises to get a more "realistic" looking noise
float noise2d_layered(vec2 p, vec2 res) {
	float c = 0.0;
	c += noise2d_blur(p, res * 1.0);
	c += noise2d_blur(p, res * 2.0);
	c += noise2d_blur(p, res * 4.0)*.5;
	c += noise2d_blur(p, res * 8.0)*.25;
	return c / 2.75;
}

void main(void) {
	vec4 color = vec4(vec3(0.0), 1.0);
	vec2 pixel = 1.0/u_resolution.xy;
	vec2 st = gl_FragCoord.xy * pixel;
	vec2 uv = v_texcoord;

	uv += mod(u_time * 0.25, 128.0);
	color.rgb = vec3(noise2d_layered(uv, vec2(8)));

	gl_FragColor = color;
}

interestingly, when res on noise2d_blur is not a power of 2, the noise map gets messed up like this:

I believe this is due to floating point rounding, as said in the comment