ShaderToy

ShaderToy is an site for writing and running WebGL shaders online.

Here are two screenshots from a Kaleidoscope shader I created;

image

image

 

Here’s the basic OpenCL code you’ll need to create your own kaleidoscope;

const int numPoints = 12;
const bool showFolds = false;

float rand( vec2 n ) {
	return fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453);
}

struct Ray
{
	vec2 point;
	vec2 direction;
};

float noise(vec2 n) {
	const vec2 d = vec2(0.0, 1.0);
	vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}

vec2 noise2(vec2 n)
{
	return vec2(noise(vec2(n.x+0.2, n.y-0.6)), noise(vec2(n.y+3., n.x-4.)));
}

Ray GetRay(float i)
{
	vec2 position = noise2(vec2(i*6.12+iGlobalTime*0.1, i*4.43+iGlobalTime*0.1));
	return Ray(
		position,
		normalize(noise2(vec2(i*7.+iGlobalTime*0.05, i*6.))*2.0-1.0));	
}

void main(void)
{
	vec2 uv = gl_FragCoord.xy / min(iResolution.x,iResolution.y);
	vec2 curPos = uv;
	
	for(int i=0;i<numPoints;i++)
	{
		Ray ray=GetRay(float(i+1)*3.);	
			
		if(length(ray.point-curPos)<0.01 && showFolds)
		{
			gl_FragColor.rgb = vec3(1,1,1);
			return;
		}
		else if (length(curPos-(ray.point+ray.direction*0.1))<0.01 && showFolds)
		{
			gl_FragColor.rgb = vec3(1,0,0);
			return;
		}
		else
		{
			float offset=dot(curPos-ray.point, ray.direction);
			if(abs(offset)<0.001 && showFolds)
			{
				gl_FragColor.rgb = vec3(0,0,1);
				return;
			}
			if(offset<0.)
			{
				curPos -= ray.direction*offset*2.0;
			}									
		}
	}
	
	gl_FragColor.rgb = texture2D( iChannel0, vec2(curPos.x,curPos.y) ).xyz;	
	gl_FragColor.a = 1.0;		
}

About mfagerlund
Writes code in my sleep - and sometimes it even compiles!

2 Responses to ShaderToy

  1. Gabor Papp says:

    Thanks for sharing this. I found your idea of reflection across lines quite intriguing. I think the output depends on the order of lines, which can ruin the results. Here’s a test with vertical lines: https://www.shadertoy.com/view/4dX3Rj which is wrong, unless you change the normal, or the line ordering from right to left. I was thinking to sort the reflection order according to line distance. It was better, but still not perfect, and much slower. Do you have any ideas to solve this problem?

    -Gabor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: