plunkerでshadertoy sandbox その32

概要

plunkerでshadertoyのglsl動かしてみた。
TUTORIAL、やってみる。

TUTORIAL 23

SUCCESSIVE COORDINATE TRANSFORMATIONS

float coordinateGrid(vec2 r) {
	vec3 axesCol = vec3(0.0, 0.0, 1.0);
	vec3 gridCol = vec3(0.5);
	float ret = 0.0;
	const float tickWidth = 0.1;
	for (float i = -2.0; i < 2.0; i += tickWidth)
	{
		ret += 1. - smoothstep(0.0, 0.008, abs(r.x - i));
		ret += 1. - smoothstep(0.0, 0.008, abs(r.y - i));
	}
	ret += 1. - smoothstep(0.001, 0.015, abs(r.x));
	ret += 1. - smoothstep(0.001, 0.015, abs(r.y));
	return ret;
}
float disk(vec2 r, vec2 center, float radius) {
	return 1.0 - smoothstep(radius - 0.005, radius + 0.005, length(r - center));
}
float rectangle(vec2 r, vec2 topLeft, vec2 bottomRight) {
	float ret;
	float d = 0.005;
	ret = smoothstep(topLeft.x - d, topLeft.x + d, r.x);
	ret *= smoothstep(topLeft.y - d, topLeft.y + d, r.y);
	ret *= 1.0 - smoothstep(bottomRight.y - d, bottomRight.y + d, r.y);
	ret *= 1.0 - smoothstep(bottomRight.x - d, bottomRight.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 bgCol = vec3(1.0);
	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 = bgCol;
	float angle = 0.6;
	mat2 rotationMatrix = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
	if (p.x < 1. / 2.)
	{
		r = r - vec2(-xMax / 2.0, 0.0);
		vec2 rotated = rotationMatrix * r;
		vec2 rotatedTranslated = rotated - vec2(0.4, 0.5);
		ret = mix(ret, col1, coordinateGrid(r) * 0.3);
		ret = mix(ret, col2, coordinateGrid(rotated) * 0.3);
		ret = mix(ret, col3, coordinateGrid(rotatedTranslated) * 0.3);
		ret = mix(ret, col1, rectangle(r, vec2(-.1, -.2), vec2(0.1, 0.2)));
		ret = mix(ret, col2, rectangle(rotated, vec2(-.1, -.2), vec2(0.1, 0.2)));
		ret = mix(ret, col3, rectangle(rotatedTranslated, vec2(-.1, -.2), vec2(0.1, 0.2)));
	}
	else if (p.x < 2. / 2.)
	{
		r = r - vec2(xMax * 0.5, 0.0);
		vec2 translated = r - vec2(0.4, 0.5);
		vec2 translatedRotated = rotationMatrix * translated;
		ret = mix(ret, col1, coordinateGrid(r) * 0.3);
		ret = mix(ret, col2, coordinateGrid(translated) * 0.3);
		ret = mix(ret, col3, coordinateGrid(translatedRotated) * 0.3);
		ret = mix(ret, col1, rectangle(r, vec2(-.1, -.2), vec2(0.1, 0.2)));
		ret = mix(ret, col2, rectangle(translated, vec2(-.1, -.2), vec2(0.1, 0.2)));
		ret = mix(ret, col3, rectangle(translatedRotated, vec2(-.1, -.2), vec2(0.1, 0.2)));
	}
	vec3 pixel = ret;
	fragColor = vec4(pixel, 1.0);
}

写真

成果物

以上。