2012-09-25 1st

jsdoit.css

#julia {
  width: 450px;
  height: 450px;
  -webkit-filter: custom(
    url(normal.vs) url(julia.fs),
    constant 0.75 -0.314
  );
  -webkit-transition: -webkit-filter 6s;
}
#julia:hover {
  -webkit-filter: custom(
    url(normal.vs) url(julia.fs),
    constant -0.818 0.777
  );
  cursor: pointer;
}
#julia:active {
  -webkit-filter: custom(
    url(normal.vs) url(julia.fs),
    constant 0.321 0.043
  );
}

jsdoit.html

<div id="julia"></div>

julia.fs

precision mediump float;

uniform vec2 constant;

varying vec2 v_texCoord;

vec2 mult(vec2 v, vec2 w){
  vec2 res;
  res.x = v.x * w.x - v.y * w.y;
  res.y = v.x * w.y + v.y * w.x;
  return res;
}

void main(){
  vec2 a = constant;
  vec2 z = 2.5 * (v_texCoord - vec2(0.5));
  vec2 tmp;
  float counter = 0.0;
  
  for(int i = 0; i < 100; i++){
    if(length(z) > 2.0) break;
    z = mult(z, z) + a;
    counter += 0.2;
  }
  gl_FragColor = vec4(
    0.5 * (cos(counter) + 1.0),
    0.5 * (sin(counter) + 1.0),
    log(counter + 1.0) / log(200.0),
    1.0
  );
}

normal.vs

precision mediump float;

attribute vec4 a_position;
attribute vec2 a_texCoord;

uniform mat4 u_projectionMatrix;

varying vec2 v_texCoord;

void main(){
  v_texCoord = a_texCoord;
  gl_Position = u_projectionMatrix * a_position;
}