# ShaderToy

April 17, 2013 2 Comments

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

Here are two screenshots from a Kaleidoscope shader I created;

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; }

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

Not really, ShaderToy really needs a forum…