UI: whole-sphere Fourier-mode deformation during speech
Dropped the internal waveform lines — not what we wanted visually — and replaced them with a spectrum-driven deformation of the sphere outline itself. Each of the 12 log-spaced bands drives one Fourier mode of the perimeter (band b → mode b + 2, so modes 0/1 stay circular and higher bands produce tighter ripples). Low bands pull the shape into wide asymmetric bumps that feel like formants; high bands add quick sibilant-like tremors. Phase advances faster for higher modes so tight ripples visually match high-frequency content. Overall displacement is gated by the RMS envelope so silence is quiet and loud syllables distort strongly. Fill + highlight are clipped to the deformed path so the gradient follows the shape and it reads as a single living object rather than a circle with stuff bolted on. Removed drawSpectrumBars and drawWaveformLine. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kazeia Team
parent
2fe46e0f15
commit
b5b13780f7
|
|
@ -317,7 +317,7 @@ class AudioVisualizerView @JvmOverloads constructor(
|
||||||
private fun drawSpeaking(
|
private fun drawSpeaking(
|
||||||
canvas: Canvas, cx: Float, cy: Float, maxR: Float, now: Long, s: State.Speaking
|
canvas: Canvas, cx: Float, cy: Float, maxR: Float, now: Long, s: State.Speaking
|
||||||
) {
|
) {
|
||||||
// Envelope → orb size pulsation, spectrogram → bars inside.
|
// Envelope → overall size pulsation + halo intensity.
|
||||||
val elapsed = now - s.startedAtMs
|
val elapsed = now - s.startedAtMs
|
||||||
val envIdxF = elapsed.toFloat() * s.envelope.size / s.durationMs
|
val envIdxF = elapsed.toFloat() * s.envelope.size / s.durationMs
|
||||||
val envIdx = envIdxF.toInt().coerceIn(0, s.envelope.size - 1)
|
val envIdx = envIdxF.toInt().coerceIn(0, s.envelope.size - 1)
|
||||||
|
|
@ -328,12 +328,25 @@ class AudioVisualizerView @JvmOverloads constructor(
|
||||||
envFrac
|
envFrac
|
||||||
)
|
)
|
||||||
smoothedAmp += (env - smoothedAmp) * 0.30f
|
smoothedAmp += (env - smoothedAmp) * 0.30f
|
||||||
val scale = 0.92f + 0.16f * smoothedAmp
|
|
||||||
|
// Update per-band smoothed energies — these drive the Fourier
|
||||||
|
// modes of the sphere outline in buildSpeakingBlobPath below.
|
||||||
|
val timeIdxF = elapsed.toFloat() * s.spectrogram.size / s.durationMs
|
||||||
|
val timeIdx = timeIdxF.toInt().coerceIn(0, s.spectrogram.size - 1)
|
||||||
|
val timeFrac = (timeIdxF - timeIdx).coerceIn(0f, 1f)
|
||||||
|
for (b in 0 until SPECTRUM_BANDS) {
|
||||||
|
val a = s.spectrogram[timeIdx][b]
|
||||||
|
val c = s.spectrogram[min(timeIdx + 1, s.spectrogram.size - 1)][b]
|
||||||
|
val target = lerp(a, c, timeFrac)
|
||||||
|
smoothedBars[b] += (target - smoothedBars[b]) * 0.35f
|
||||||
|
}
|
||||||
|
|
||||||
|
val scale = 0.92f + 0.14f * smoothedAmp
|
||||||
val radius = maxR * scale
|
val radius = maxR * scale
|
||||||
|
|
||||||
// Halo pulses with amp; emit ripples on peaks.
|
// Halo pulses with amp; emit ripples on envelope peaks.
|
||||||
drawHalo(canvas, cx, cy, maxR * 1.25f * scale,
|
drawHalo(canvas, cx, cy, maxR * 1.30f * scale,
|
||||||
alphaBase = 80, alphaGain = (140 * smoothedAmp).toInt().coerceIn(0, 200))
|
alphaBase = 90, alphaGain = (160 * smoothedAmp).toInt().coerceIn(0, 220))
|
||||||
|
|
||||||
if (envIdx != lastSpectroIdx && env > 0.45f) {
|
if (envIdx != lastSpectroIdx && env > 0.45f) {
|
||||||
val prev = if (envIdx > 0) s.envelope[envIdx - 1] else 0f
|
val prev = if (envIdx > 0) s.envelope[envIdx - 1] else 0f
|
||||||
|
|
@ -345,153 +358,88 @@ class AudioVisualizerView @JvmOverloads constructor(
|
||||||
}
|
}
|
||||||
drawRipples(canvas, cx, cy, maxR, now, listeningMode = false)
|
drawRipples(canvas, cx, cy, maxR, now, listeningMode = false)
|
||||||
|
|
||||||
// Sphere body — pure circle here, serves as the container for
|
// The sphere outline IS the spectrometer: each spectrogram band
|
||||||
// the spectrum bars.
|
// drives one Fourier mode of the perimeter (low bands = wide
|
||||||
spherePath.rewind()
|
// low-mode bumps, high bands = tight high-mode ripples), so the
|
||||||
spherePath.addCircle(cx, cy, radius, Path.Direction.CW)
|
// whole shape distorts in response to the voice content. No
|
||||||
|
// internal bars or curves — the sphere itself is what speaks.
|
||||||
|
buildSpeakingBlobPath(spherePath, cx, cy, radius, now)
|
||||||
|
|
||||||
|
// Fill the deformed sphere with the voice-tinted gradient.
|
||||||
corePaint.shader = RadialGradient(
|
corePaint.shader = RadialGradient(
|
||||||
cx - radius * 0.25f, cy - radius * 0.30f, radius * 1.2f,
|
cx - radius * 0.25f, cy - radius * 0.30f, radius * 1.25f,
|
||||||
currentCore, deriveCoreEdge(currentCore),
|
currentCore, deriveCoreEdge(currentCore),
|
||||||
Shader.TileMode.CLAMP
|
Shader.TileMode.CLAMP
|
||||||
)
|
)
|
||||||
canvas.drawPath(spherePath, corePaint)
|
canvas.drawPath(spherePath, corePaint)
|
||||||
|
|
||||||
// Spectrum bars, clipped to the sphere so they appear *inside*.
|
// Soft top-left highlight clipped to the deformed shape — lends
|
||||||
|
// a subtle "3D glassy" read without being distracting.
|
||||||
canvas.save()
|
canvas.save()
|
||||||
canvas.clipPath(spherePath)
|
canvas.clipPath(spherePath)
|
||||||
drawSpectrumBars(canvas, cx, cy, radius, s, elapsed)
|
val hl = Paint(Paint.ANTI_ALIAS_FLAG).apply {
|
||||||
|
style = Paint.Style.FILL
|
||||||
|
shader = RadialGradient(
|
||||||
|
cx - radius * 0.28f, cy - radius * 0.30f, radius * 0.9f,
|
||||||
|
Color.argb(75, 255, 255, 255),
|
||||||
|
Color.argb(0, 255, 255, 255),
|
||||||
|
Shader.TileMode.CLAMP
|
||||||
|
)
|
||||||
|
}
|
||||||
|
canvas.drawCircle(cx, cy, radius * 1.2f, hl)
|
||||||
canvas.restore()
|
canvas.restore()
|
||||||
|
|
||||||
// Outline ring on top so the sphere edge stays crisp after bar
|
// Outline of the deformed shape on top, thickness tracks amp so
|
||||||
// clipping.
|
// loud consonants give a stronger line.
|
||||||
blobOutlinePaint.strokeWidth = 2f + 3f * smoothedAmp
|
blobOutlinePaint.strokeWidth = 2.5f + 3.5f * smoothedAmp
|
||||||
blobOutlinePaint.color = withAlpha(currentAccent, 220)
|
blobOutlinePaint.color = withAlpha(currentAccent, 230)
|
||||||
canvas.drawCircle(cx, cy, radius, blobOutlinePaint)
|
canvas.drawPath(spherePath, blobOutlinePaint)
|
||||||
}
|
|
||||||
|
|
||||||
private fun drawSpectrumBars(
|
|
||||||
canvas: Canvas, cx: Float, cy: Float, radius: Float,
|
|
||||||
s: State.Speaking, elapsed: Long
|
|
||||||
) {
|
|
||||||
val nBands = SPECTRUM_BANDS
|
|
||||||
val timeIdxF = elapsed.toFloat() * s.spectrogram.size / s.durationMs
|
|
||||||
val timeIdx = timeIdxF.toInt().coerceIn(0, s.spectrogram.size - 1)
|
|
||||||
val timeFrac = (timeIdxF - timeIdx).coerceIn(0f, 1f)
|
|
||||||
|
|
||||||
// Smoothly interpolate between adjacent spectrogram columns and
|
|
||||||
// exponentially smooth toward the target so the curves flow
|
|
||||||
// even at 60 fps with 20 fps spectrogram data.
|
|
||||||
for (b in 0 until nBands) {
|
|
||||||
val a = s.spectrogram[timeIdx][b]
|
|
||||||
val c = s.spectrogram[min(timeIdx + 1, s.spectrogram.size - 1)][b]
|
|
||||||
val target = lerp(a, c, timeFrac)
|
|
||||||
smoothedBars[b] += (target - smoothedBars[b]) * 0.35f
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw 3 superimposed waveform lines centred on the sphere
|
|
||||||
// horizontal axis. Each line is a smooth Bézier curve whose
|
|
||||||
// vertical displacement is driven by the spectrogram plus a
|
|
||||||
// slow-moving phase offset per line (for depth, so the lines
|
|
||||||
// don't lock-step). Top and bottom mirrors around the center
|
|
||||||
// keep the shape symmetric like a real oscilloscope trace.
|
|
||||||
val spanW = radius * 1.75f
|
|
||||||
val leftX = cx - spanW / 2f
|
|
||||||
val baseline = cy
|
|
||||||
val maxDisp = radius * 0.55f
|
|
||||||
|
|
||||||
// nPoints samples along the horizontal — more than the 12
|
|
||||||
// spectrogram bands so interpolation renders smoothly.
|
|
||||||
val nPoints = 36
|
|
||||||
val tSec = System.currentTimeMillis() / 1000f
|
|
||||||
|
|
||||||
drawWaveformLine(canvas, leftX, baseline, spanW, maxDisp, nPoints,
|
|
||||||
phase = 0f, gain = 1.00f, thickness = 4.0f,
|
|
||||||
color = withAlpha(currentAccent, 230), tSec = tSec)
|
|
||||||
drawWaveformLine(canvas, leftX, baseline, spanW, maxDisp, nPoints,
|
|
||||||
phase = 0.18f, gain = 0.78f, thickness = 2.8f,
|
|
||||||
color = withAlpha(brighten(currentAccent, 0.25f), 170), tSec = tSec)
|
|
||||||
drawWaveformLine(canvas, leftX, baseline, spanW, maxDisp, nPoints,
|
|
||||||
phase = -0.14f, gain = 0.55f, thickness = 1.8f,
|
|
||||||
color = withAlpha(darken(currentAccent, 0.15f), 130), tSec = tSec)
|
|
||||||
|
|
||||||
// Horizontal hairline so silence still hints at a live surface.
|
|
||||||
barPaint.style = Paint.Style.STROKE
|
|
||||||
barPaint.strokeWidth = 1.2f
|
|
||||||
barPaint.color = withAlpha(currentAccent, 60)
|
|
||||||
canvas.drawLine(leftX, baseline, leftX + spanW, baseline, barPaint)
|
|
||||||
barPaint.style = Paint.Style.FILL_AND_STROKE
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sample the smoothed spectrogram across [nPoints] positions and
|
* Build the speaking-state sphere perimeter: base circle plus a
|
||||||
* draw a Bézier-smoothed "deforming line" through them, mirrored
|
* sum of Fourier modes, one per spectrogram band. Each band drives
|
||||||
* above and below the baseline. Displacement = band energy × gain,
|
* mode (band + 2) so the circle remains the rest shape and modes
|
||||||
* with a small moving phase offset so overlaid lines stay visually
|
* 0/1 (translation / stretch) aren't excited. Phase drifts faster
|
||||||
* distinct. Uses a quadratic midpoint-to-midpoint curve — cheaper
|
* for higher modes so tight ripples visually correspond to the
|
||||||
* and more organic than Catmull-Rom for this band count.
|
* higher-frequency content of speech. Deformation amplitude is
|
||||||
|
* scaled both by per-band energy and by overall envelope so quiet
|
||||||
|
* passages show small motion and loud syllables show strong
|
||||||
|
* distortion. Sampled at 96 points — smooth enough for the
|
||||||
|
* highest mode we render without being expensive.
|
||||||
*/
|
*/
|
||||||
private fun drawWaveformLine(
|
private fun buildSpeakingBlobPath(
|
||||||
canvas: Canvas,
|
path: Path, cx: Float, cy: Float, radius: Float, now: Long
|
||||||
leftX: Float, baseline: Float, spanW: Float,
|
|
||||||
maxDisp: Float, nPoints: Int,
|
|
||||||
phase: Float, gain: Float, thickness: Float,
|
|
||||||
color: Int, tSec: Float
|
|
||||||
) {
|
) {
|
||||||
val xs = FloatArray(nPoints)
|
path.rewind()
|
||||||
val disps = FloatArray(nPoints)
|
val steps = 96
|
||||||
for (i in 0 until nPoints) {
|
val tSec = now / 1000f
|
||||||
val u = i.toFloat() / (nPoints - 1)
|
// Max radial displacement contributed by a single band at full
|
||||||
xs[i] = leftX + u * spanW
|
// energy. 0.22 × radius gives visible distortion without the
|
||||||
// Map x position → band index. Windowed by a soft cosine
|
// shape collapsing through the center.
|
||||||
// taper so curve edges decay to zero at the sphere's
|
val modeGain = radius * 0.22f
|
||||||
// left/right endpoints, matching the circular mask.
|
// Envelope weight — quiet passages feel less jittery.
|
||||||
val bandF = u * (SPECTRUM_BANDS - 1) + phase * SPECTRUM_BANDS * 0.1f
|
val envWeight = (0.5f + 0.5f * smoothedAmp).coerceIn(0f, 1f)
|
||||||
val bandA = bandF.toInt().coerceIn(0, SPECTRUM_BANDS - 1)
|
|
||||||
val bandB = (bandA + 1).coerceAtMost(SPECTRUM_BANDS - 1)
|
|
||||||
val frac = (bandF - bandA).coerceIn(0f, 1f)
|
|
||||||
val v = lerp(smoothedBars[bandA], smoothedBars[bandB], frac)
|
|
||||||
val taper = 0.5f - 0.5f * cos((u * PI).toFloat()) // 0 at edges, 1 at center
|
|
||||||
// Small sinusoidal jitter over time to keep the line alive
|
|
||||||
// during quieter passages — amplitude scales with the
|
|
||||||
// smoothed RMS so silence stays flat.
|
|
||||||
val jitter = sin((tSec * 2.5f + i * 0.35f + phase * 6f).toDouble()).toFloat() *
|
|
||||||
0.10f * smoothedAmp
|
|
||||||
disps[i] = (v + jitter) * taper * gain
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build path: top curve baseline - disp, bottom curve baseline + disp.
|
for (i in 0..steps) {
|
||||||
ringPaint.style = Paint.Style.STROKE
|
val theta = (i % steps).toFloat() / steps * 2f * PI.toFloat()
|
||||||
ringPaint.strokeWidth = thickness
|
var d = 0f
|
||||||
ringPaint.color = color
|
for (b in 0 until SPECTRUM_BANDS) {
|
||||||
ringPaint.strokeCap = Paint.Cap.ROUND
|
val mode = b + 2
|
||||||
ringPaint.strokeJoin = Paint.Join.ROUND
|
val energy = smoothedBars[b]
|
||||||
|
val phase = tSec * (0.45f + 0.22f * b)
|
||||||
// Top line (above baseline).
|
d += modeGain * energy * envWeight *
|
||||||
blobPath.rewind()
|
sin((mode * theta + phase).toDouble()).toFloat()
|
||||||
blobPath.moveTo(xs[0], baseline - maxDisp * disps[0])
|
}
|
||||||
for (i in 1 until nPoints - 1) {
|
val r = radius + d
|
||||||
val xMid = (xs[i] + xs[i + 1]) * 0.5f
|
val x = cx + r * cos(theta.toDouble()).toFloat()
|
||||||
val yI = baseline - maxDisp * disps[i]
|
val y = cy + r * sin(theta.toDouble()).toFloat()
|
||||||
val yMid = baseline - maxDisp * (disps[i] + disps[i + 1]) * 0.5f
|
if (i == 0) path.moveTo(x, y) else path.lineTo(x, y)
|
||||||
blobPath.quadTo(xs[i], yI, xMid, yMid)
|
|
||||||
}
|
}
|
||||||
blobPath.lineTo(xs.last(), baseline - maxDisp * disps.last())
|
path.close()
|
||||||
canvas.drawPath(blobPath, ringPaint)
|
|
||||||
|
|
||||||
// Bottom line (below baseline, mirrored).
|
|
||||||
blobPath.rewind()
|
|
||||||
blobPath.moveTo(xs[0], baseline + maxDisp * disps[0])
|
|
||||||
for (i in 1 until nPoints - 1) {
|
|
||||||
val xMid = (xs[i] + xs[i + 1]) * 0.5f
|
|
||||||
val yI = baseline + maxDisp * disps[i]
|
|
||||||
val yMid = baseline + maxDisp * (disps[i] + disps[i + 1]) * 0.5f
|
|
||||||
blobPath.quadTo(xs[i], yI, xMid, yMid)
|
|
||||||
}
|
|
||||||
blobPath.lineTo(xs.last(), baseline + maxDisp * disps.last())
|
|
||||||
canvas.drawPath(blobPath, ringPaint)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ---------- Helpers: halo / ripples / blob ----------
|
// ---------- Helpers: halo / ripples / blob ----------
|
||||||
private fun drawHalo(
|
private fun drawHalo(
|
||||||
canvas: Canvas, cx: Float, cy: Float, r: Float,
|
canvas: Canvas, cx: Float, cy: Float, r: Float,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue