01_WobbleText.md

Wobble Text in Compose Multiplatform

Using Shaders

Targets: (Android, IOS, JVM/Desktop)

11_Gradle.kts

kotlin {
    ...
  
    applyDefaultHierarchyTemplate()

    sourceSets {

        val commonMain by getting
        val nativeMain by getting
        val jvmMain by getting

        val nonAndroidMain by creating {
            dependsOn(commonMain)
        }

        nativeMain.dependsOn(nonAndroidMain)
        jvmMain.dependsOn(nonAndroidMain)
        
        ...
    }
}

12_AppShader.kt

import androidx.compose.ui.graphics.Shader

expect class AppShader

expect fun createAppShader(shaderCode: String): AppShader

expect fun AppShader.makeShader(
    uniforms: Array<Pair<String, Number>>,
    children: Array<Pair<String, Shader>>
): Shader

13_AppShader.android.kt

import android.graphics.RuntimeShader
import android.os.Build
import androidx.annotation.RequiresApi
import androidx.compose.ui.graphics.Shader

actual typealias AppShader = RuntimeShader

@RequiresApi(Build.VERSION_CODES.TIRAMISU)
actual fun createAppShader(shaderCode: String): AppShader {
    return AppShader(shaderCode)
}

@RequiresApi(Build.VERSION_CODES.TIRAMISU)
actual fun AppShader.makeShader(
    uniforms: Array<Pair<String, Number>>,
    children: Array<Pair<String, Shader>>
): Shader {
    // Intentionally take 1st shader only
    if(children.size > 0) {
        setInputShader(children[0].first, children[0].second)
    }
    uniforms.forEach {
        setFloatUniform(it.first, it.second.toFloat())
    }
    return this
}

14_AppShader.nonAndroid.kt

import androidx.compose.ui.graphics.Shader
import androidx.compose.ui.graphics.asComposeShader
import androidx.compose.ui.graphics.skiaShader
import org.jetbrains.skia.Data
import org.jetbrains.skia.RuntimeEffect

actual typealias AppShader = RuntimeEffect

actual fun createAppShader(shaderCode: String): AppShader {
    return AppShader.makeForShader(shaderCode)
}

actual fun AppShader.makeShader(
    uniforms: Array<Pair<String, Number>>,
    children: Array<Pair<String, Shader>>
): Shader {
    // Intentionally take 1st shader only
  
    // Here we cannot provide named allocations, so, pass it in order as per ShaderCode
    return makeShader(
        uniforms = uniformData(*(uniforms.map { it.second }).toTypedArray()),
        children = arrayOf(children.get(0).second.skiaShader),
        localMatrix = null
    ).asComposeShader()
}

private fun uniformData(vararg num: Number): Data {
    return Data.makeFromBytes(
        bytes = sequence {
            num.forEach { yieldBytes(it) }
        }.toList().toByteArray()
    )
}

private suspend fun SequenceScope<Byte>.yieldBytes(num: Number) {
    val v = when(num) {
        is Int -> num
        is Float -> num.toBits()
        else -> TODO()
    }

    repeat(4) {
        yield( (v shr (it*8)).toByte() )
    }
}

27_WobbleTextTest.kt

import androidx.compose.animation.core.withInfiniteAnimationFrameMillis
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.produceState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.ImageShader
import androidx.compose.ui.graphics.Shader
import androidx.compose.ui.graphics.ShaderBrush
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

@Composable
fun WobbleTextTest() {
    val scope = rememberCoroutineScope()

    var imageBitmap by remember {
        mutableStateOf<ImageBitmap?>(null)
    }

    val time by produceState(0f) {
        while (true) {
            withInfiniteAnimationFrameMillis {
                value = it / 1000f
            }
        }
    }

    val drawModifier = Modifier
        .drawWithCache {
            // Creates or recycled the GraphicsLayer
            val layer = obtainGraphicsLayer()

            val appShader = createAppShader(shaderCode)

            layer.apply {
                record {
                    drawContent()
                }
//                scaleX = 2f
//                scaleY = 2f
            }

            scope.launch {
                imageBitmap = layer.toImageBitmap()
            }

            onDrawWithContent {
                if(imageBitmap != null) {
                    val contentShader = ImageShader(image = imageBitmap!!)

                    val shader = appShader.makeShader(
                        uniforms = arrayOf(
                            "width" to size.width,
                            "height" to size.height,
                            "time" to time
                        ),
                        children = arrayOf("content" to contentShader)
                    )

                    val brush = ShaderBrush(shader)

                    drawRect(brush)
                }
            }
        }

    Box(
        modifier = drawModifier
    ) {
        Text("Hello Compose Text", fontSize = 80.sp)
    }
}

28_WobbleTextShaderCode.kt

@Language("AGSL")
private val shaderCode = """
    uniform float width;
    uniform float height;
    uniform float time;
    uniform shader content;
    
    vec3 mod289(vec3 x) {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
    
    vec4 mod289(vec4 x) {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
    
    vec4 permute(vec4 x) {
         return mod289(((x*34.0)+10.0)*x);
    }
    
    vec4 taylorInvSqrt(vec4 r)
    {
      return 1.79284291400159 - 0.85373472095314 * r;
    }
    
    float snoise(vec3 v)
      { 
      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
    
    // First corner
      vec3 i  = floor(v + dot(v, C.yyy) );
      vec3 x0 =   v - i + dot(i, C.xxx) ;
    
    // Other corners
      vec3 g = step(x0.yzx, x0.xyz);
      vec3 l = 1.0 - g;
      vec3 i1 = min( g.xyz, l.zxy );
      vec3 i2 = max( g.xyz, l.zxy );
    
      //   x0 = x0 - 0.0 + 0.0 * C.xxx;
      //   x1 = x0 - i1  + 1.0 * C.xxx;
      //   x2 = x0 - i2  + 2.0 * C.xxx;
      //   x3 = x0 - 1.0 + 3.0 * C.xxx;
      vec3 x1 = x0 - i1 + C.xxx;
      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
    
    // Permutations
      i = mod289(i); 
      vec4 p = permute( permute( permute( 
                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
               + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
    
    // Gradients: 7x7 points over a square, mapped onto an octahedron.
    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
      float n_ = 0.142857142857; // 1.0/7.0
      vec3  ns = n_ * D.wyz - D.xzx;
    
      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
    
      vec4 x_ = floor(j * ns.z);
      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
    
      vec4 x = x_ *ns.x + ns.yyyy;
      vec4 y = y_ *ns.x + ns.yyyy;
      vec4 h = 1.0 - abs(x) - abs(y);
    
      vec4 b0 = vec4( x.xy, y.xy );
      vec4 b1 = vec4( x.zw, y.zw );
    
      //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
      //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
      vec4 s0 = floor(b0)*2.0 + 1.0;
      vec4 s1 = floor(b1)*2.0 + 1.0;
      vec4 sh = -step(h, vec4(0.0));
    
      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
    
      vec3 p0 = vec3(a0.xy,h.x);
      vec3 p1 = vec3(a0.zw,h.y);
      vec3 p2 = vec3(a1.xy,h.z);
      vec3 p3 = vec3(a1.zw,h.w);
    
    //Normalise gradients
      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
      p0 *= norm.x;
      p1 *= norm.y;
      p2 *= norm.z;
      p3 *= norm.w;
    
    // Mix final noise value
      vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
      m = m * m;
      return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
                                    dot(p2,x2), dot(p3,x3) ) );
      }
    
    half4 main(in vec2 fragCoord) {
    
        vec2 resolution = vec2(width,height);
        vec2 uv = (fragCoord.xy / resolution.xy);
        
        float noise = snoise(vec3(uv.x * 6, uv.y * 6, time * 0.5));
        
        noise *= exp(-length(abs(uv * 1.5)));
        
        vec2 offset1 = vec2(noise * 0.02);
        vec2 offset2 = vec2(0.02) / resolution.xy;
        
        uv += offset1 - offset2;
        
        return content.eval(uv * resolution.xy);
    }
""".trimIndent()

WobbleText.mp4