\n Over the past two weeks, we covered some basics graphics, animation canvases, and basic animations. This week, we\u2019ll polish up our garden with some more complex animation combos and background shaders.\n<\/p>\n
Creating more complex animations<\/h2>\n
\n We\u2019ll be continuing to use our \n So far, we\u2019ve built a basic sunflower, then animated its rotation, size, and color individually. Now, to create more complex animations, let\u2019s try animated multiple properties at once! We can combine petal color animations with rotation to create a rainbow spinner effect, and we can also combine the color, size, and rotation animations together for an exciting effect:\n<\/p>\n \n Our garden looks colorful and dynamic now:\n<\/p>\n \n \n The last step to complete our garden is to surround the flowers with some vibrant grass, which we can do by adding a dynamic shader background. I started by checking out BackgroundShaderScreen.kt<\/a> and GradientShaderScreen.kt<\/a> to see how shaders were incorporated into the composable sheep project. For Android apps, you can use the Android Graphics Shading Language (AGSL<\/a>), which is very similar to the popular OpenGL Shading Languade (GLSL<\/a>) if you\u2019re already familiar with shaders. Since our project is built with Compose Multiplatform, though, we also need to support the desktop version of the app. Instead of AGSL, for desktop we can use Skia\u2019s Shading Language (SKSL<\/a>).\n<\/p>\n \n Let\u2019s first try to modify the GradientShaderScreen.kt<\/b> code to show a nice blend of greens! Throughout this process, we can use the Skia Shaders Playground<\/a> or the Shdr Editor (for GLSL)<\/a> tools to help visualize the results.\n<\/p>\n \n Here\u2019s what the shader code currently looks like (and literally looks like<\/a>):\n<\/p>\n \n The line where \n \n Once the colors were chosen, all I had to do was experiment a bit in the shader preview tool and dust off my trigonometry knowledge to get the RGB values to vary between those of my chosen shades of green; this resulted in the following updated shader code:\n<\/p>\n \n Now that we\u2019re happy with the shader code, all that\u2019s left to do is use it in the app as our garden background. Since our desktop and mobile implementations will be different, we can add a \n Here\u2019s the result:\n<\/p>\n \n \n Now that we have the shader infrastructure set up, we can play around more with creating different shader effects. The \n This, the RGB values are determined by the \n \n The content covered today is part of PR #3<\/a> in the animated-garden repo<\/a>. \n<\/p>\n \n To learn more about Jetpack Compose animations and creative coding, check out these resources:\n<\/p>\n \n If you have any questions, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\ndrawSunflower<\/code> method and Sketch<\/code> composable to build animations in this post, so if you haven\u2019t already, check out the previous blog posts to see how we built those functions!\n<\/p>\n @Composable\r\n fun AnimatedPetalColorAndRotationSunflower() {\r\n Sketch<\/em>(\r\n modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n targetValue = 360f,\r\n animationSpec = infiniteRepeatable<\/em>(tween<\/em>(durationMillis = 3000, easing = LinearEasing<\/em>))\r\n ) { <\/strong>animationState ->\r\n <\/strong>drawSunflower<\/em>(hue = animationState, rotation = animationState)\r\n }
<\/strong>\r\n }\r\n\r\n @Composable\r\n fun AnimatedEverythingSunflower() {\r\n Sketch<\/em>(\r\n modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n targetValue = 360f,\r\n animationSpec = infiniteRepeatable<\/em>(\r\n tween<\/em>(durationMillis = 800, delayMillis = 50, easing = LinearOutSlowInEasing<\/em>),\r\n repeatMode = RepeatMode.Reverse
<\/em>)\r\n ) { <\/strong>animationState ->
<\/strong>drawSunflower<\/em>(\r\n sizePct = animationState \/ 360f,\r\n rotation = animationState,\r\n color = Color.hsv(hue = animationState, saturation = 1f, value = 1f)\r\n )\r\n }<\/strong>\r\n }<\/pre>\n![\"[video-to-gif](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/video-to-gif-output-image-3.gif\")
\n<\/p>\nAdding a background shader<\/h2>\n
Basic green gradient shader<\/h3>\n
uniform float2 iResolution;\r\n uniform float iTime;\r\n\r\n vec4 main(in float2 fragCoord) {\r\n \/\/ Normalized pixel coordinates (from 0 to 1)\r\n vec2 uv = fragCoord\/iResolution.xy;\r\n\r\n \/\/ Time varying pixel color\r\n vec3 col = 0.8 + 0.2*cos(iTime*2.0+uv.xxx*2.0+vec3(1,2,4));\r\n \r\n \/\/ Output to screen\r\n return vec4(col,1.0);\r\n }<\/pre>\ncol<\/code> is assigned is where the time varying color is decided, so to make the gradient only show shades of green, this is the line we\u2019ll have to change. This vec3<\/code> represents the RGB values of the shader color, so the first step to building a new gradient was to pick a few shades of green and note their RGB values.\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/word-image-3248-3.png\")
\n<\/p>\n uniform float2 iResolution;\r\n uniform float iTime;\r\n\r\n vec4 main(in float2 fragCoord) {\r\n \/\/ Normalized pixel coordinates (from 0 to 1)\r\n vec2 uv = iTime\/iResolution.xy;\r\n\r\n \/\/ Time varying pixel color\r\n float r = 0.3 + 0.5*sin(iTime*2.0+uv.x*3.0);\r\n float g = 0.9 + 0.1*cos(iTime*2.0+uv.x*3.0);\r\n float b = 0.3 + 0.4*cos(iTime*2.0+uv.x*3.0);\r\n\r\n \/\/ Output to screen\r\n return vec4(r, g, b, 1.0);\r\n }<\/pre>\nbackgroundBrush<\/code> parameter to our main composable and write the appropriate code in each module. We will again be using LaunchedEffect<\/code> to create a changing time value (like we did previously with Sketch<\/code>) that can be passed in as the iTime<\/code> float for the shader code. And, since we don\u2019t want to cause unnecessary recomposition, we will make sure to use the lambda Modifier drawBehind<\/code>. For the desktop app, we will be using Skia\u2019s RuntimeEffect<\/code> to build a shader, as covered in this article on Skia shaders for Compose desktop<\/a>. For the Android app, we\u2019ll use RuntimeShader<\/code>, as described by the AGSL documentation<\/a>. Both of these versions can then be converted to an Android ShaderBrush<\/code><\/a> and passed into the common main composable. Check out the GitHub repo for the fully updated MyGarden<\/code> code<\/a> .\n<\/p>\n![\"[video-to-gif](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/video-to-gif-output-image-4.gif\")
\n<\/p>\nComplex shader<\/h3>\n
noodleZoom<\/code><\/a> shader in GradientShaderScreen.kt<\/b>, originally from Twitter user @notargs<\/a>, creates an awesome zooming web-like effect<\/a> that I think would look pretty cool behind our flowers. But it\u2019s not green! So, let\u2019s try using our RGB and trig knowledge again to change the original shader code, which is shown here:\n<\/p>\n uniform float2 iResolution;\r\n uniform float iTime;\r\n \/\/ Source: @notargs https:\/\/twitter.com\/notargs\/status\/1250468645030858753\r\n float f(vec3 p) {\r\n p.z -= iTime * 10.;\r\n float a = p.z * .1;\r\n p.xy *= mat2(cos(a), sin(a), -sin(a), cos(a));\r\n return .1 - length(cos(p.xy) + sin(p.yz));\r\n }\r\n \r\n half4 main(vec2 fragcoord) { \r\n vec3 d = .5 - fragcoord.xy1 \/ iResolution.y;\r\n vec3 p=vec3(0);\r\n for (int i = 0; i < 32; i++) {\r\n p += f(p) * d;\r\n }\r\n return ((sin(p) + vec3(2, 5, 12)) \/ length(p)).xyz1;<\/pre>\nvec3(2, 5, 12)<\/code> in the return statement. The brightness of the color also depends on this vector, so we\u2019ll also want to make sure we don\u2019t make the values too high or low. After some experimenting in the shader playground again, I settled on vec3(0.95, 3.725, 2.05)<\/code>. Here\u2019s how the final iteration of our garden looks: \n<\/p>\n![\"[video-to-gif](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/video-to-gif-output-image-5.gif\")
\n<\/p>\nResources and feedback<\/h2>\n
\n