plunkerでshadertoy sandbox その28

概要

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

TUTORIAL 19

FUNCTION PLOTTING

float linearstep(float edge0, float edge1, float x) {
	float t = (x - edge0) / (edge1 - edge0);
	return clamp(t, 0.0, 1.0);
}
float smootherstep(float edge0, float edge1, float x) {
	float t = (x - edge0) / (edge1 - edge0);
	float t1 = t * t * t * (t * (t * 6. - 15.) + 10.);
	return clamp(t1, 0.0, 1.0);
}
void plot(vec2 r, float y, float lineThickness, vec3 color, inout vec3 pixel) {
	if (abs(y - r.y) < lineThickness)
		pixel = color;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec2 r = 2.0 * vec2(fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
	vec3 bgCol = vec3(1.0);
	vec3 axesCol = vec3(0.0, 0.0, 1.0);
	vec3 gridCol = vec3(0.5);
	vec3 col1 = vec3(0.841, 0.582, 0.594);
	vec3 col2 = vec3(0.884, 0.850, 0.648);
	vec3 col3 = vec3(0.348, 0.555, 0.641);
	vec3 pixel = bgCol;
	const float tickWidth = 0.1;
	for (float i = -2.0; i < 2.0; i += tickWidth)
	{
		if (abs(r.x - i) < 0.004)
			pixel = gridCol;
		if (abs(r.y - i) < 0.004)
			pixel = gridCol;
	}
	if (abs(r.x) < 0.006)
		pixel = axesCol;
	if (abs(r.y) < 0.007)
		pixel = axesCol;
	float x = r.x;
	float y = r.y;
	if (abs(2. * x + .5 - y) < 0.02)
		pixel = col1;
	if (abs(r.x * r.x - 0.2 - y) < 0.01)
		pixel = col1;
	if (abs(sin(PI * r.x) - y) < 0.02)
		pixel = col1;
	if (abs(0.25 * step(0.0, x) + 0.6 - y) < 0.01)
		pixel = col3;
	if (abs(0.25 * linearstep(-0.5, 0.5, x) + 0.1 - y) < 0.01)
		pixel = col3;
	if (abs(0.25 * smoothstep(-0.5, 0.5, x) - 0.4 - y) < 0.01)
		pixel = col3;
	if (abs(0.25 * smootherstep(-0.5, 0.5, x) - 0.9 - y) < 0.01)
		pixel = col3;
	plot(r, 0.5 * clamp(sin(TWOPI * x), 0.0, 1.0) - 0.7, 0.015, col2, pixel);
	plot(r, 0.6 * exp(-10.0 * (x + 0.8) * (x + 0.8)) - 0.1, 0.015, col2, pixel);
	fragColor = vec4(pixel, 1.0);
}

写真

成果物

以上。