UI Ripple Wave Deformation - Compose Snapshot + AGSL

---

🚀 Project Overview

This mini-project explores applying a realistic wave deformation effect on a Jetpack Compose UI by combining graphical rendering and user interaction.

The main idea is to simulate a ripple wave propagating over a 2D grid surface, then successively apply this deformation on:

• the grid itself,
• a bitmap image placed on the grid,
• a snapshot of the real Compose UI,
  while keeping a fully interactive UI responsive via a transparent overlay.

---

🎯 Goals

• Implement a realistic wave deformation (ripple/distortion) on a 2D grid.
• Apply this deformation progressively on more complex graphical content: bitmap, Compose UI snapshot.
• Implement a AGSL (Android Graphics Shading Language) solution.
• Maintain UI interactivity with a transparent interactive overlay above the deformed rendering.
• Support multiple simultaneous wave interactions triggered at different screen points.
• Provide a clean and performant architecture compatible with Jetpack Compose.

---

🧩 Challenges

• How to dynamically deform an entire Compose UI?
  Compose doesn’t natively allow transforming the whole composable tree as a single modifiable canvas in real-time.

• Keeping UI responsiveness despite heavy graphical rendering (snapshot + deformation animations)?
  Running deformation animations on a static image without blocking or disabling the real UI layer.

• Managing multiple independent wave animations triggered by user interactions fluidly and synchronized.

• Optimizing performance to avoid frame drops or excessive CPU usage.

---

💡 Approach

1. Phase 1: Grid deformation

   • Draw a 2D grid inside a Compose Canvas.
   • Apply wave deformation by dynamically transforming grid points using sinusoidal wave functions with damping.

2. Phase 2: Bitmap deformation

   There are currently two different approaches explored for deforming the bitmap texture with wave effects:

   • 2.a) Full CPU Tile-based Deformation

     • The bitmap is subdivided into equal tiles (cells).
     • Each tile is individually transformed (translated/scaled) according to wave deformation vectors computed on CPU.
     • Dynamic subdivision is applied near wave origins for finer deformation.
     • A blurred background layer compensates the visible mosaic effect caused by discrete tile transformations.
     • Pros: Works on all Android versions, no GPU requirements.
     • Cons: Visual artifacts due to tile mosaicking, limited smoothness.

   • 2.b) Runtime Shader (AGSL) Displacement (Planned for Android 13+)

     • Uses Android 13+ RuntimeShader API with AGSL shaders.
     • The deformation is performed per-pixel on the GPU, based on a displacement map generated from wave parameters.
     • Produces smooth, continuous wave distortions without visible tile artifacts.
     • Pros: High-quality deformation, efficient GPU usage.
     • Cons: Requires Android 13+, more complex shader development.

3. Phase 3: Compose UI snapshot deformation

   • Capture a snapshot (bitmap) of the real Compose UI.
   • Apply wave deformation on this snapshot.
   • Render the deformed image as a background.

4. Maintaining UI interactivity

   • Overlay a transparent, fully interactive Compose UI on top of the deformed canvas.
   • This overlay captures touch/click inputs to trigger wave animations.
   • The UI remains fully functional and responsive, with multiple waves triggered concurrently without blocking.

---

📸 Screenshots

Phase 1 - 2D Grid Canvas	Phase 2a - Full CPU (step I)	Phase 2a - Full CPU (step II)
Phase 2b - Runtime Shader AGSL	Phase 2b - Runtime Shader AGSL alt	Phase 3 - UI Compose Snapshot
:---:	:---:	:---:

---

⚙️ Key Features

• Real-time management of multiple waves with natural propagation and decay.
• Geometric transformation of grid points using sine functions and damping for smooth waves.
• Android Graphics Shading Language version to a good and optimised rendering.
• Efficient Compose UI snapshot capturing.
• Synchronized animation and interaction handling.
• Simple interface to switch between grid, bitmap, and snapshot deformation modes.
• Modular architecture for easy extension of deformation effects.

---

📈 Expected Outcomes

• Ultra-realistic visual ripple effect on any graphical surface.
• Fully responsive UI with multiple interactive wave triggers.
• Potential integration into real-world projects for unique visual effects.

---

🔧 Technologies & Tools

• Kotlin + Jetpack Compose
• Compose Canvas for drawing and graphic transformations
• Compose Snapshot API for UI capture
• AGSL shader (android 13+ only)
• Coroutines and State management for animation and interaction
• Math & trigonometry for wave modeling

---

🚧 Limitations & Future Work

• Performance constraints on low-end devices with multiple simultaneous waves.
• Snapshot capture latency depending on UI complexity.
• Potential to add extra optical effects (blur, reflection, refraction).
• Adaptation for multi-screen and orientation changes.

---

🧠 Conclusion

This project demonstrates how to combine complex graphical rendering and modern interactive UI on Android Compose by cleverly using snapshots,layered UI overlays and AGSL shaders.

It opens the door to unique visual effects while maintaining smooth, responsive user experiences — a common challenge in advanced UI/UX design.

---