Properly decode velocity during advection.

mover.js

@@ -5,7 +5,7 @@ class Leader {
     this.home = createVector(x, y)
     this.pc = 0
   }
-  
+
   tick() {
     const speed = 8
     if (this.pc % 45 == 0) {
@@ -31,9 +31,14 @@ class Mover {
 
   tick() {
     this.leader.tick()
-    const speed = 100
+    const speed = 200
     const toLeader = p5.Vector.sub(this.leader.position, this.position)
     toLeader.div(speed)
     this.position.add(toLeader)
   }
-}
+
+  direction() {
+    const v = p5.Vector.sub(this.leader.position, this.position).normalize()
+    return [v.x/2, v.y/2]
+  }
+}

sketch.js

@@ -1,5 +1,5 @@
-const percision=60
-const viscosity=40
+const percision=40
+const viscosity=0.001
 
 class PingPong {
   constructor(init) {
@@ -89,11 +89,11 @@ function setup() {
   )
   perturb = makeShader(
     perturb_fs,
-    (setUniform, x, p, r, m) => {
+    (setUniform, x, p, r, dir) => {
       setUniform("x", x)
       setUniform("p", p)
+      setUniform("dir", dir)
       setUniform("r", r)
-      setUniform("m", m)
     }
   )
   display = makeShader(
@@ -103,10 +103,10 @@ function setup() {
     }
   )
 
-  let n = 7
+  let n = 2
   for (let i=0;i<n; i+=1) {
     const m = new Mover(width/2,height/2)
-    m.m=i-n/2
+    m.m= Math.random()
     movers.push(m)
   }
 }
@@ -115,10 +115,10 @@ function draw() {
   for (let m of movers) {
     m.tick()
     velocity.draw((velocity) => {
-      perturb(velocity, [m.position.x/width, m.position.y/height], 0.05,m.m)
+      perturb(velocity, [m.position.x/width, m.position.y/height], 0.05, m.direction())
     })
     paint.draw((paint) => {
-      perturb(paint, [m.position.x/width, m.position.y/height], 0.042,m.m)
+      perturb(paint, [m.position.x/width, m.position.y/height], 0.05, m.direction())
     })
   }
   velocity.draw((velocity) => {
@@ -131,12 +131,13 @@ function draw() {
   for(let i=0;i<percision;i+=1)
     velocity.draw((velocity) => {
       jacobi(
-        1/viscosity,
-        4 + 1/viscosity,
+        viscosity,
+        4 + viscosity,
         velocity,
         velocity
       )
     })
+
   div.draw(() => {
     divergence(velocity.texture,[width,height])
   })
@@ -164,6 +165,16 @@ function draw() {
     )
   })
 
+  for (let i=0; i<1; i++)
+      paint.draw((paint) => {
+	  jacobi(
+	      viscosity,
+	      4 + viscosity,
+	      paint,
+	      paint
+	  )
+      })
+
   background(0)
   display(paint.texture)
 }
@@ -183,6 +194,7 @@ void main() {
   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
  }`
 
+
 const advec_fs = `#version 300 es
 precision highp float;
 in vec2 pos;
@@ -194,9 +206,7 @@ out vec4 y;
 
 vec4 rv(sampler2D x, vec2 pos) {
   vec4 v = texture(x,pos);
-  v.x=2.0*(v.x-0.5);
-  v.y=2.0*(v.y-0.5);
-  return v;
+  return v*2.0 - vec4(1.0);
 }
 
 vec4 cerp(vec4 a,vec4 b,vec4 c,vec4 d,float x) {
@@ -259,7 +269,7 @@ void main() {
   vec2 lastP = midP - 0.75*midV;
   vec2 lastV = rv(velocity,lastP).xy;
 
-  vec2 dp = (2.0*firstV+3.0*midV+4.0*lastV)/dimensions/3.0;
+  vec2 dp = (2.0*firstV+3.0*midV+4.0*lastV)/dimensions/8.0;
   y = bicubicSample(x,pos-dp);
 }
 `
@@ -332,19 +342,18 @@ in vec2 pos;
 
 uniform sampler2D x;
 uniform vec2 p;
+uniform vec2 dir;
 uniform float r;
-uniform float m;
 
 out vec4 y;
 
 void main() {
   float d = distance(p,pos);
   vec4 yp=texture(x,pos);
-  // y=yp;
-  if (d<r) {
-    vec2 dp=normalize(pos-p)*(d/r)*m;
-    yp.x+=dp.x/7.0;
-    yp.y+=dp.y/7.0;
+  if (d < r) {
+    float attenuation = (1.0 - (d / r));
+    vec2 dp = dir * attenuation;
+    yp.xy += dp;
   }
   y=yp;
 }
@@ -360,10 +369,10 @@ out vec4 y;
 
 void main() {
   vec4 yp=texture(x,pos);
-  vec3 bg=vec3(237, 142, 145)/255.0;
-  vec3 fg=vec3(251, 248, 203)/255.0;
-  // vec3 fg=vec3(255, 255, 255)/255.0;
-  // vec3 bg=vec3(0.0,0.0,0.0)/255.0;
+  // vec3 bg=vec3(237, 142, 145)/255.0;
+  // vec3 fg=vec3(251, 248, 203)/255.0;
+  vec3 bg=vec3(255, 255, 255)/255.0;
+  vec3 fg=vec3(0.0,0.0,0.0)/255.0;
   y=vec4(mix(bg,fg,(yp.x+yp.y)/2.0),1.0);
 }
 `

style.css

@@ -1,7 +1,7 @@
 html, body {
   margin: 0;
   padding: 0;
-  background: rgb(237, 142, 145);
+  /* background: rgb(237, 142, 145); */
 }
 
 main {