pipu-music/apps/mobile/src/ui/wave/draw.ts

// Отрисовка «Моей волны» на Skia — тот же алгоритм, что Canvas 2D в вебе (apps/web/src/widgets/wave/draw.ts).
// Функции — worklet'ы: кадр собирается в UI-потоке Reanimated, JS-поток не участвует.
import { mix, rgb, rgba, type Rgb, type WaveState } from '@pipu/core';
import { BlendMode, ClipOp, PaintStyle, Skia, TileMode, type SkCanvas, type SkPaint } from '@shopify/react-native-skia';

function radial(cx: number, cy: number, r0: number, r1: number, colors: string[], pos: number[]): SkPaint {
  'worklet';
  const p = Skia.Paint();
  p.setAntiAlias(true);
  p.setShader(
    Skia.Shader.MakeTwoPointConicalGradient(
      { x: cx, y: cy },
      r0,
      { x: cx, y: cy },
      r1,
      colors.map((c) => Skia.Color(c)),
      pos,
      TileMode.Clamp,
    ),
  );
  return p;
}

/** Градиент со смещённым центром (аналог createRadialGradient(x0, y0, 0, x1, y1, r)). */
function conical(x0: number, y0: number, x1: number, y1: number, r: number, colors: string[]): SkPaint {
  'worklet';
  const p = Skia.Paint();
  p.setAntiAlias(true);
  p.setShader(Skia.Shader.MakeTwoPointConicalGradient({ x: x0, y: y0 }, 0, { x: x1, y: y1 }, r, colors.map((c) => Skia.Color(c)), [0, 1], TileMode.Clamp));
  return p;
}

export function drawOrb(canvas: SkCanvas, cx: number, cy: number, r: number, s: WaveState) {
  'worklet';
  const t = s.t;
  const c1 = rgb(s.colors[0]);
  const c2 = rgb(s.colors[1]);
  const c3 = rgb(s.colors[2]);
  canvas.drawCircle(
    cx,
    cy,
    r * 1.65,
    radial(cx, cy, r * 0.6, r * 1.65, [rgba(c1, 0.32 + s.pulse * 0.35 + s.hover * 0.12), rgba(c2, 0.1 + s.pulse * 0.12), rgba(c1, 0)], [0, 0.5, 1]),
  );

  canvas.save();
  const clip = Skia.Path.Make();
  clip.addCircle(cx, cy, r);
  canvas.clipPath(clip, ClipOp.Intersect, true);
  const bg = Skia.Paint();
  bg.setColor(Skia.Color(s.dark ? '#060B1C' : '#0B1533'));
  const box = Skia.XYWHRect(cx - r, cy - r, r * 2, r * 2);
  canvas.drawRect(box, bg);

  const blobs: Rgb[] = [c1, c2, c3, c1, c2];
  for (let i = 0; i < blobs.length; i++) {
    const c = blobs[i]!;
    const a = t * (0.25 + i * 0.07) + i * 1.7;
    const bx = cx + Math.cos(a) * r * (0.35 + 0.12 * Math.sin(t * 0.3 + i)) + s.mx * r * 0.18 * s.hover;
    const by = cy + Math.sin(a * 1.3) * r * 0.38 + s.my * r * 0.18 * s.hover;
    const br = r * (0.75 + 0.15 * Math.sin(t * 0.7 + i) + s.pulse * 0.2);
    const g = radial(bx, by, 0, br, [rgba(c, 0.55), rgba(c, 0)], [0, 1]);
    g.setBlendMode(BlendMode.Plus);
    canvas.drawRect(box, g);
  }

  const lines = 9;
  for (let l = 0; l < lines; l++) {
    const yy = cy - r * 0.75 + (l / (lines - 1)) * r * 1.5;
    const amp = r * (0.03 + 0.05 * s.amp + 0.09 * s.pulse + 0.03 * s.hover);
    const path = Skia.Path.Make();
    for (let x = -r; x <= r; x += 4) {
      const y = yy + Math.sin((x / r) * (3 + l * 0.4) + t * (1.2 + l * 0.15) + l) * amp * Math.cos((x / r) * 1.4);
      if (x === -r) path.moveTo(cx + x, y);
      else path.lineTo(cx + x, y);
    }
    const stroke = Skia.Paint();
    stroke.setAntiAlias(true);
    stroke.setStyle(PaintStyle.Stroke);
    stroke.setStrokeWidth(1.5);
    stroke.setColor(Skia.Color(`rgba(255,255,255,${0.05 + 0.05 * s.amp + (l % 3 === 0 ? 0.05 : 0)})`));
    stroke.setBlendMode(BlendMode.Plus);
    canvas.drawPath(path, stroke);
  }

  canvas.drawRect(box, conical(cx - r * 0.35, cy - r * 0.45, cx - r * 0.35, cy - r * 0.45, r * 0.9, ['rgba(255,255,255,0.18)', 'rgba(255,255,255,0)']));
  canvas.restore();

  const ring = Skia.Paint();
  ring.setAntiAlias(true);
  ring.setStyle(PaintStyle.Stroke);
  ring.setStrokeWidth(1);
  ring.setColor(Skia.Color(rgba(mix(c1, [255, 255, 255], 0.4), 0.35 + s.pulse * 0.3)));
  canvas.drawCircle(cx, cy, r - 0.5, ring);
}

export function drawLiquid(canvas: SkCanvas, cx: number, cy: number, r: number, s: WaveState) {
  'worklet';
  const t = s.t;
  const cols: Rgb[] = [rgb(s.colors[0]), rgb(s.colors[1]), rgb(s.colors[2])];
  canvas.drawCircle(cx, cy, r * 1.6, radial(cx, cy, r * 0.4, r * 1.6, [rgba(cols[0]!, 0.3 + s.pulse * 0.3), rgba(cols[0]!, 0)], [0, 1]));
  for (let L = 0; L < 3; L++) {
    const path = Skia.Path.Make();
    const P = 140;
    for (let j = 0; j <= P; j++) {
      const th = (j / P) * Math.PI * 2;
      const w =
        1 +
        0.06 * Math.sin(3 * th + t * (0.9 + L * 0.2) + L * 2) +
        0.04 * Math.sin(5 * th - t * (1.3 + L * 0.1) + L) +
        0.03 * Math.sin(7 * th + t * 1.7) * (0.5 + s.amp) +
        0.08 * s.pulse * Math.sin(2 * th + L) +
        0.16 * s.hover * Math.pow(Math.max(0, Math.cos(th - s.ang)), 3);
      const rr = r * (0.86 - L * 0.07) * w;
      const x = cx + Math.cos(th) * rr;
      const y = cy + Math.sin(th) * rr;
      if (j) path.lineTo(x, y);
      else path.moveTo(x, y);
    }
    path.close();
    const ox = Math.cos(t * 0.4 + L * 2) * r * 0.3;
    const oy = Math.sin(t * 0.5 + L) * r * 0.3;
    const c = cols[L]!;
    const g = conical(cx + ox, cy + oy, cx, cy, r * 1.1, [rgba(mix(c, [255, 255, 255], 0.25), 0.85), rgba(c, 0.25)]);
    g.setAlphaf(s.dark ? 0.6 : 0.75);
    g.setBlendMode(s.dark ? BlendMode.Plus : BlendMode.SrcOver);
    canvas.drawPath(path, g);
  }
}