/ComposeWaterRipple

Primary LanguageKotlin

Compose Water Ripple

An implementation of famous Hugo Elias water algorithm in Jetpack compose.

Usage

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Box(
        contentAlignment = Alignment.Center, modifier = Modifier
    ) {
        val canvasModifier =
            Modifier
                .background(OceanBlue)
                .width(400.dp)
                .height(400.dp)
                .pointerInput(Unit) {
                    detectTapGestures {
                        rippleEngine.onClick(it)
                    }
                }
                .pointerInput(Unit) {
                    detectDragGestures(
                        onDragStart = {
                            rippleEngine.onClick(it) },
                        onDrag = { change, _ ->
                            rippleEngine.onClick(change.position)
                        }
                    )

                }

        WaterRipple(canvasModifier, rippleEngine)
    }
}

Demo

ripple_demo.webm

Acknowledgments