Improve drawing with segments

src/pipelines/diffusion/diffuse.wgsl

@@ -1,8 +1,14 @@
 struct Settings {
   size : vec2<f32>,
+  swipePrevious : vec2<f32>,
+  swipeCurrent : vec2<f32>,
   diffusionRate : f32,
   decayRate : f32,
   deltaTime : f32,
+  time : f32,
+  swipeRadius : f32,
+  swipeBlur : f32,
+  isSwipeActive : f32
 };
 
 @group(0) @binding(0) var<uniform> settings : Settings;
@@ -11,18 +17,30 @@ struct Settings {
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  let current = textureSample(trailMap, Sampler, uv).rgb;
-
-  let neighbours: vec3<f32> = (
-      textureSample(trailMap, Sampler, uv + vec2<f32>(0, 1) / settings.size).rgb
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(0, -1) / settings.size).rgb
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(-1, 0) / settings.size).rgb
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / settings.size).rgb
+  var current = textureSample(trailMap, Sampler, uv);
+  
+  let neighbours: vec4<f32> = (
+      textureSample(trailMap, Sampler, uv + vec2<f32>(0, 1) / settings.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(0, -1) / settings.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(-1, 0) / settings.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / settings.size)
   );
 
-  return vec4(mix(
+  if (settings.isSwipeActive == 1.0) {
+    let pa = (uv - settings.swipePrevious) * normalize(settings.size);
+    let direction = (settings.swipeCurrent - settings.swipePrevious) * normalize(settings.size);
+    let q = clamp(dot(pa, direction) / dot(direction, direction), 0, 1);
+    let distance = length(pa - direction * q) - settings.swipeRadius;
+  
+    if(distance < 0) {
+      let opacity = -distance / settings.swipeBlur;
+      return clamp(vec4(1), current, vec4(1));
+    }
+  }
+
+  return mix(
     current,
     neighbours / 4.0,
     settings.diffusionRate
-  ) * (1.0 - settings.decayRate), 1.0);
+  ) * (1.0 - settings.decayRate);
 }

src/pipelines/diffusion/diffusion-pipeline.ts

@@ -1,13 +1,19 @@
 import { setUpFullScreenQuad } from '../../utils/full-screen-quad';
 import shader from './diffuse.wgsl';
 
+import { vec2 } from 'gl-matrix';
+
 export class DiffusionPipeline {
-  private static readonly UNIFORM_COUNT = 6;
+  private static readonly UNIFORM_COUNT = 14;
 
   private readonly pipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly quadVertexBuffer: GPUBuffer;
 
+  private swipes: Array<vec2> = [
+    vec2.fromValues(Number.NaN, Number.NaN),
+    vec2.fromValues(Number.NaN, Number.NaN),
+  ];
   private bindGroup?: GPUBindGroup;
   private previousTrailMapIn?: GPUTexture;
 
@@ -46,17 +52,42 @@ export class DiffusionPipeline {
     diffusionRate,
     decayRate,
     deltaTime,
+    time,
+    swipe,
+    swipeRadius,
+    swipeBlur,
+    isSwipeActive,
   }: {
     width: number;
     height: number;
+    swipe: vec2;
     diffusionRate: number;
     decayRate: number;
     deltaTime: number;
+    time: number;
+    swipeRadius: number;
+    swipeBlur: number;
+    isSwipeActive: boolean;
   }) {
+    if (swipe) {
+      this.swipes = [...this.swipes.slice(-1), swipe];
+    }
+
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
-      new Float32Array([width, height, diffusionRate, decayRate, deltaTime])
+      new Float32Array([
+        width,
+        height,
+        ...this.swipes.flatMap((s) => [s[0], s[1]]),
+        diffusionRate,
+        decayRate,
+        deltaTime,
+        time,
+        swipeRadius,
+        swipeBlur,
+        isSwipeActive ? 1.0 : 0.0,
+      ])
     );
   }