.

src/game-loop/pointer-input.ts

@@ -26,10 +26,16 @@ interface GardenPointerInputOptions {
 }
 
 export class GardenPointerInput {
+  private static readonly MIN_SMOOTH_SAMPLE_DISTANCE_SQUARED = 0.25;
+  private static readonly MIN_CURVE_SEGMENT_SPACING_PIXELS = 4;
+  private static readonly CURVE_SEGMENT_BRUSH_RADIUS_RATIO = 0.65;
+
   private activePointerId: number | null = null;
   private lastPointerPosition: vec2 | null = null;
   private lastPointerEventTimeMs: number | null = null;
   private lastPointerPressure = 0.5;
+  private smoothedStrokePoints: Array<vec2> = [];
+  private lastSmoothedBrushPosition: vec2 | null = null;
   private isErasing = false;
 
   public constructor(private readonly options: GardenPointerInputOptions) {}
@@ -75,6 +81,14 @@ export class GardenPointerInput {
     if (this.lastPointerPosition !== null) {
       vec2.mul(this.lastPointerPosition, this.lastPointerPosition, scale);
     }
+
+    this.smoothedStrokePoints.forEach((point) => {
+      vec2.mul(point, point, scale);
+    });
+
+    if (this.lastSmoothedBrushPosition !== null) {
+      vec2.mul(this.lastSmoothedBrushPosition, this.lastSmoothedBrushPosition, scale);
+    }
   }
 
   public get isSwipeActive(): boolean {
@@ -98,6 +112,13 @@ export class GardenPointerInput {
 
     this.options.audio.start(activeVibe, { userGesture: event.isTrusted });
     this.options.audio.beginGesture();
+    this.options.audio.touchDown({
+      vibe: activeVibe,
+      colorIndex: settings.selectedColorIndex,
+      mirrorSegmentCount: this.options.getMirrorSegmentCount(),
+      pressure: this.getPointerPressure(event),
+      pointerType: event.pointerType,
+    });
     this.options.onStartDrawing();
     this.activePointerId = event.pointerId;
     this.canvas.setPointerCapture(event.pointerId);
@@ -106,8 +127,9 @@ export class GardenPointerInput {
     this.options.eraserTexturePipeline.clearSwipes();
     this.lastPointerPosition = null;
     this.lastPointerEventTimeMs = null;
+    this.clearSmoothedStroke();
     this.lastPointerPressure = this.getPointerPressure(event);
-    this.addSwipeAt(event);
+    this.addSwipeAt(event, { emitAudio: false });
   };
 
   private readonly onPointerMove = (event: PointerEvent) => {
@@ -115,7 +137,9 @@ export class GardenPointerInput {
     if (event.pointerId !== this.activePointerId) {
       return;
     }
-    this.addSwipeAt(event);
+    this.getCoalescedPointerEvents(event).forEach((coalescedEvent) => {
+      this.addSwipeAt(coalescedEvent);
+    });
   };
 
   private readonly onPointerUp = (event: PointerEvent) => {
@@ -123,6 +147,7 @@ export class GardenPointerInput {
       return;
     }
     this.addSwipeAt(event, { emitAudio: false });
+    this.finishSmoothedStroke();
     this.options.audio.endGesture();
     if (this.isErasing) {
       this.options.onEraseGestureEnded();
@@ -131,6 +156,7 @@ export class GardenPointerInput {
     this.activePointerId = null;
     this.lastPointerPosition = null;
     this.lastPointerEventTimeMs = null;
+    this.clearSmoothedStroke();
     this.options.eraserPreview.setPointerHoveringCanvas(
       this.options.eraserPreview.isPointerInsideCanvas(event)
     );
@@ -169,14 +195,14 @@ export class GardenPointerInput {
       ? [{ from: previousPosition, to: position }]
       : this.getMirroredStrokeSegments(previousPosition, position);
 
-    segments.forEach((segment) => {
-      if (this.isErasing) {
+    if (this.isErasing) {
+      segments.forEach((segment) => {
         this.options.eraserAgentPipeline.addSwipeSegment(segment.from, segment.to);
         this.options.eraserTexturePipeline.addSwipeSegment(segment.from, segment.to);
-      } else {
-        this.options.brushPipeline.addSwipeSegment(segment.from, segment.to);
-      }
-    });
+      });
+    } else {
+      this.addSmoothedBrushSample(position);
+    }
 
     if (!this.isErasing) {
       segments.forEach((segment) => {
@@ -194,6 +220,7 @@ export class GardenPointerInput {
         pressure: pressure > 0 ? pressure : this.lastPointerPressure,
         velocityPixelsPerSecond,
         eraserSizePixels: settings.eraserSize * devicePixelRatio,
+        mirrorSegmentCount: this.options.getMirrorSegmentCount(),
         pointerType: event.pointerType,
       });
     }
@@ -201,6 +228,113 @@ export class GardenPointerInput {
     this.lastPointerEventTimeMs = event.timeStamp;
   }
 
+  private addSmoothedBrushSample(position: vec2): void {
+    const previousSample =
+      this.smoothedStrokePoints[this.smoothedStrokePoints.length - 1];
+    if (
+      previousSample !== undefined &&
+      vec2.squaredDistance(previousSample, position) <=
+        GardenPointerInput.MIN_SMOOTH_SAMPLE_DISTANCE_SQUARED
+    ) {
+      return;
+    }
+
+    this.smoothedStrokePoints.push(vec2.clone(position));
+
+    if (this.smoothedStrokePoints.length > 3) {
+      this.smoothedStrokePoints.shift();
+    }
+
+    if (this.smoothedStrokePoints.length === 1) {
+      this.addMirroredBrushSegment(position, position);
+      this.lastSmoothedBrushPosition = vec2.clone(position);
+      return;
+    }
+
+    if (this.smoothedStrokePoints.length === 2) {
+      const [start, end] = this.smoothedStrokePoints;
+      const midpoint = getMidpoint(start, end);
+      this.addMirroredBrushSegment(start, midpoint);
+      this.lastSmoothedBrushPosition = midpoint;
+      return;
+    }
+
+    const [start, control, end] = this.smoothedStrokePoints;
+    const curveStart = getMidpoint(start, control);
+    const curveEnd = getMidpoint(control, end);
+    this.addQuadraticBrushSegments(curveStart, control, curveEnd);
+    this.lastSmoothedBrushPosition = curveEnd;
+  }
+
+  private addQuadraticBrushSegments(start: vec2, control: vec2, end: vec2): void {
+    const curveLength = vec2.distance(start, control) + vec2.distance(control, end);
+    const brushRadius = Math.max(1, settings.brushSize / 2);
+    const segmentSpacing = Math.max(
+      GardenPointerInput.MIN_CURVE_SEGMENT_SPACING_PIXELS,
+      brushRadius * GardenPointerInput.CURVE_SEGMENT_BRUSH_RADIUS_RATIO
+    );
+    const mirrorSegmentCount = Math.max(1, this.options.getMirrorSegmentCount());
+    const curveResolution = getBrushCurveResolution();
+    const maxCurveSegments = Math.max(
+      1,
+      Math.floor(curveResolution / Math.sqrt(mirrorSegmentCount))
+    );
+    const segmentCount = Math.min(
+      maxCurveSegments,
+      Math.max(1, Math.ceil(curveLength / segmentSpacing))
+    );
+
+    let previousPoint = start;
+    for (let i = 1; i <= segmentCount; i++) {
+      const point = getQuadraticPoint(start, control, end, i / segmentCount);
+      this.addMirroredBrushSegment(previousPoint, point);
+      previousPoint = point;
+    }
+  }
+
+  private addMirroredBrushSegment(from: vec2, to: vec2): void {
+    this.getMirroredStrokeSegments(from, to).forEach((segment) => {
+      this.options.brushPipeline.addSwipeSegment(segment.from, segment.to);
+    });
+  }
+
+  private finishSmoothedStroke(): void {
+    if (this.isErasing || this.smoothedStrokePoints.length === 0) {
+      return;
+    }
+
+    const finalSample = this.smoothedStrokePoints[this.smoothedStrokePoints.length - 1];
+    if (
+      this.lastSmoothedBrushPosition !== null &&
+      vec2.squaredDistance(this.lastSmoothedBrushPosition, finalSample) >
+        GardenPointerInput.MIN_SMOOTH_SAMPLE_DISTANCE_SQUARED
+    ) {
+      this.addMirroredBrushSegment(this.lastSmoothedBrushPosition, finalSample);
+    }
+  }
+
+  private clearSmoothedStroke(): void {
+    this.smoothedStrokePoints.length = 0;
+    this.lastSmoothedBrushPosition = null;
+  }
+
+  private getCoalescedPointerEvents(event: PointerEvent): Array<PointerEvent> {
+    const getCoalescedEvents = (
+      event as PointerEvent & { getCoalescedEvents?: () => Array<PointerEvent> }
+    ).getCoalescedEvents;
+    const coalescedEvents =
+      typeof getCoalescedEvents === 'function' ? getCoalescedEvents.call(event) : [];
+
+    if (coalescedEvents.length === 0) {
+      return [event];
+    }
+
+    const lastEvent = coalescedEvents[coalescedEvents.length - 1];
+    return isSamePointerSample(lastEvent, event)
+      ? coalescedEvents
+      : [...coalescedEvents, event];
+  }
+
   private getMirroredStrokeSegments(from: vec2, to: vec2): Array<StrokeSegment> {
     const segmentCount = this.options.getMirrorSegmentCount();
     if (segmentCount <= 1) {
@@ -246,3 +380,27 @@ const rotatePointAround = (point: vec2, center: vec2, angle: number): vec2 => {
     center[1] + offsetX * sin + offsetY * cos
   );
 };
+
+const getMidpoint = (from: vec2, to: vec2): vec2 =>
+  vec2.fromValues((from[0] + to[0]) / 2, (from[1] + to[1]) / 2);
+
+const getQuadraticPoint = (start: vec2, control: vec2, end: vec2, t: number): vec2 => {
+  const inverseT = 1 - t;
+  return vec2.fromValues(
+    inverseT * inverseT * start[0] + 2 * inverseT * t * control[0] + t * t * end[0],
+    inverseT * inverseT * start[1] + 2 * inverseT * t * control[1] + t * t * end[1]
+  );
+};
+
+const getBrushCurveResolution = (): number => {
+  const resolution = Number.isFinite(settings.brushCurveResolution)
+    ? settings.brushCurveResolution
+    : appConfig.runtimeSettings.defaults.brushCurveResolution;
+  return Math.max(1, Math.floor(resolution));
+};
+
+const isSamePointerSample = (left: PointerEvent, right: PointerEvent): boolean =>
+  left.clientX === right.clientX &&
+  left.clientY === right.clientY &&
+  left.pressure === right.pressure &&
+  left.buttons === right.buttons;