plunkerでshadertoy sandbox その33

概要

plunkerでshadertoyのglsl動かしてみた。
TUTORIAL、やってみる。
iGlobalTime、使うので、three.js、やめた。自前のsandbox使う。
音が出るので、ボタンを押す必要がある。

TUTORIAL 24

TIME, MOTION AND ANIMATION

float disk(vec2 r, vec2 center, float radius) {
	return 1.0 - smoothstep(radius - 0.005, radius + 0.005, length(r - center));
}
float rect(vec2 r, vec2 bottomLeft, vec2 topRight) {
	float ret;
	float d = 0.005;
	ret = smoothstep(bottomLeft.x - d, bottomLeft.x + d, r.x);
	ret *= smoothstep(bottomLeft.y - d, bottomLeft.y + d, r.y);
	ret *= 1.0 - smoothstep(topRight.y - d, topRight.y + d, r.y);
	ret *= 1.0 - smoothstep(topRight.x - d, topRight.x + d, r.x);
	return ret;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec2 p = vec2(fragCoord.xy / iResolution.xy);
	vec2 r = 2.0 * vec2(fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
	float xMax = iResolution.x / iResolution.y;
	vec3 col1 = vec3(0.216, 0.471, 0.698);
	vec3 col2 = vec3(1.00, 0.329, 0.298);
	vec3 col3 = vec3(0.867, 0.910, 0.247);
	vec3 ret;
	if (p.x < 1. / 5.)
	{
		vec2 q = r + vec2(xMax * 4. / 5., 0.);
		ret = vec3(0.2);
		float y = iGlobalTime;
		y = mod(y, 2.0) - 1.0;
		ret = mix(ret, col1, disk(q, vec2(0.0, y), 0.1));
	}
	else if (p.x < 2. / 5.)
	{
		vec2 q = r + vec2(xMax * 2. / 5., 0.);
		ret = vec3(0.3);
		float amplitude = 0.8;
		float y = 0.8 * sin(0.5 * iGlobalTime * TWOPI);
		float radius = 0.15 + 0.05 * sin(iGlobalTime * 8.0);
		ret = mix(ret, col1, disk(q, vec2(0.0, y), radius));
	}
	else if (p.x < 3. / 5.)
	{
		vec2 q = r + vec2(xMax * 0. / 5., 0.);
		ret = vec3(0.4);
		float x = 0.2 * cos(iGlobalTime * 5.0);
		float y = 0.3 * cos(iGlobalTime * 5.0 + PI / 2.0);
		float radius = 0.2 + 0.1 * sin(iGlobalTime * 2.0);
		vec3 color = mix(col1, col2, sin(iGlobalTime) * 0.5 + 0.5);
		ret = mix(ret, color, rect(q, vec2(x - 0.1, y - 0.1), vec2(x + 0.1, y + 0.1)));
	}
	else if (p.x < 4. / 5.)
	{
		vec2 q = r + vec2(-xMax * 2. / 5., 0.);
		ret = vec3(0.3);
		for (float i = -1.0; i < 1.0; i += 0.2)
		{
			float x = 0.2 * cos(iGlobalTime * 5.0 + i * PI);
			float y = i;
			vec2 s = q - vec2(x, y);
			float angle = iGlobalTime * 3. + i;
			mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
			s = rot * s;
			ret = mix(ret, col1, rect(s, vec2(-0.06, -0.06), vec2(0.06, 0.06)));
		}
	}
	else if (p.x < 5. / 5.)
	{
		vec2 q = r + vec2(-xMax * 4. / 5., 0.);
		ret = vec3(0.2);
		float speed = 2.0;
		float t = iGlobalTime * speed;
		float stopEveryAngle = PI / 2.0;
		float stopRatio = 0.5;
		float t1 = (floor(t) + smoothstep(0.0, 1.0 - stopRatio, fract(t)) ) * stopEveryAngle;
		float x = -0.2 * cos(t1);
		float y = 0.3 * sin(t1);
		float dx = 0.1 + 0.03 * sin(t * 10.0);
		float dy = 0.1 + 0.03 * sin(t * 10.0 + PI);
		ret = mix(ret, col1, rect(q, vec2(x - dx, y - dy), vec2(x + dx, y + dy)));
	}
	vec3 pixel = ret;
	fragColor = vec4(pixel, 1.0);
}

写真

成果物

以上。