title: How to write a "Texture Breathing" shader in GLSL?
body: <p>I'm working on a little 2d video game, and while searching the internet for things that are irrelevant to it, I found this video: <a href="http://vimeo.com/67886447" rel="nofollow noreferrer">http://vimeo.com/67886447</a>
  I really like it. I want it.</p>
  <h2>The author outline the process:</h2>
  <blockquote>
  <p>The effect is produced by computing the vector derivative of a source
  photo then applying iterative advection along the resulting axes. A
  secondary scalar field controls and strength and magnitude of
  advection and allows a range of interesting effects including pulsing,
  waving and breathing.</p>
  </blockquote>
  <p>As I understand it: a gradient field is computed, then the pixels are moved in the direction and magnitude of the corresponding vectors. Time is a multiplier of the vector magnitude, I'm guessing.</p>
  <p>So, I think, I understand the process in my head, but since I'm kind of a newbie at GLSL, and shaders in general, I'm not sure how to write the code.</p>
  <h2>This is how I see the code outline so far:</h2>
  <p>Iterate through the image, to fill a matrix with vectors resulted from using some sort of edge detection algorithm.
  Iterate through the image once more and displace all pixels by vector magnitude*time.</p>
  <h2>Few specific questions:</h2>
  <p>Would this even work, performance wise (on an average PC, of course)?</p>
  <p>Is it possible to use the simple edge detection algorithm (checking the 8 nearby pixels, comparing the difference between that, and keep that as the magnitude, the direction of the vector will decided by the angle between the 2 pixels with the greatest difference).</p>
  <p>How would I displace the pixels? I'd imagine moving a pixel would either leave a blank space at the place where it was, or, if I clone the pixel, there would be a lot of strange overlaying and the image would turn out bad.</p>
  <h2>EDITS:</h2>
  <p>I just realized that doing it in one pass would be better: calculating the vector, then moving the pixel right away. What do you think?</p>
  <p>I guess, I was wrong to use, and think of it as iterations.</p>
  <p>This is the code I got so far. It is simple and it does it only along +x axis.</p>
  <pre><code>uniform float time;
  uniform vec2 mouse;
  uniform vec2 resolution;
  varying vec2 vTexCoord;
  uniform sampler2D u_texture; //diffuse map
  
  void main( void ) {
  
  
  
  vec2 pos = vec2(1,0);
  vec4 px1 = texture2D(u_texture, vTexCoord+(pos/resolution));
  vec4 dif =  px1 - texture2D(u_texture, vTexCoord);
  
  
  vec4 color = texture2D(u_texture, vTexCoord+(vec2((dif.r+dif.g+dif.b)*time,0)/resolution));
  
  
      gl_FragColor = vec4(color.xyz,1.0);
  
  //gl_FlagColor = color;
  }
  </code></pre>
  <p>Now I just have to do it for the rest of the axes. The effect actually looks like what it is supposed to do.</p>
  <p>I did it for the Y-axis and this is what I got, how do I fix the artifacts, so it seems like the colors actually expand, not simply move.</p>
  <p><a href="http://rghost.ru/57475312/image.png" rel="nofollow noreferrer">breathing thing http://rghost.ru/57475312/image.png</a></p>
  <p>(The shader is only applied to the background image)</p>