7

Could somebody try to implement given animation into WebGL shader example? It would be great for people learing WebGL like myself.

alt text

Source: http://dvdp.tumblr.com/post/2664387637/110109

zproxy
  • 3,509
  • 3
  • 39
  • 45
  • 1
    Here are some HTML Canvas experiments in this direction to help you. The key is to work in polar coordinates: [Spiral 1](http://phrogz.net/tmp/canvas_spiral_1.html), [Spiral 2](http://phrogz.net/tmp/canvas_spiral_2.html), [Spiral 3](http://phrogz.net/tmp/canvas_spiral_3.html), [Spiral 4](http://phrogz.net/tmp/canvas_spiral_4.html). – Phrogz Jan 09 '11 at 18:55
  • And [Spiral 5](http://phrogz.net/tmp/canvas_spiral_5.html), slightly closer to this design. – Phrogz Jan 10 '11 at 03:38
  • 3
    We expect you to have attempted to solve this problem by yourself rather than asking the community to arrive at a complete solution for you. When you've got some code to show us that demonstrates some effort by you (even if it's wrong) please update your question and flag to re-open. Thanks. – Kev Nov 08 '11 at 12:40

1 Answers1

20

I've implemented your animation at http://www.brainjam.ca/stackoverflow/webglspiral.html. It will give you a "WebGL not supported" message if your browser does not support WebGL. It is adapted from a sandbox created by mrdoob. The basic idea is to show a rectangular surface (consisting of two triangles) and to apply the shader to the surface.

The actual shader code is as follows:

uniform float time;
uniform vec2 resolution;
uniform vec2 aspect;

void main( void ) {

    vec2 position = -aspect.xy + 2.0 * gl_FragCoord.xy / resolution.xy * aspect.xy;
    float angle = 0.0 ;
    float radius = length(position) ;
    if (position.x != 0.0 && position.y != 0.0){
        angle = degrees(atan(position.y,position.x)) ;
    }
    float amod = mod(angle+30.0*time-120.0*log(radius), 30.0) ;
    if (amod<15.0){
        gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );
    } else{
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );                    
    }
}

The spiral resizes with the browser window, but you could easily opt for a fixed size canvas instead.

Update: Just for fun, here's the exact same implementation in a jsfiddle: http://jsfiddle.net/z9EmN/

brainjam
  • 18,863
  • 8
  • 57
  • 82
  • ShaderToy version: https://www.shadertoy.com/view/4tfGD4 – Michaelangel007 Jan 22 '15 at 09:34
  • ah yes. i saw the shadertoy version and thought. hey years ago i asked about it on stackoverflow. and here it is. :) – zproxy Oct 25 '15 at 06:14
  • now looking an anwser for http://stackoverflow.com/questions/33277825/would-one-make-a-raymarch-shadertoy-of-this-semi-mirrored-house-in-the-desert – zproxy Oct 25 '15 at 06:19