Create art using Jetpack Compose

Inspired by recent amazing tweets of @alexlockwood about jetpack compose I started playing with jetpack compose canvas and want to share what I learned so far.

Note: To understand the below code you must have basic knowledge of jetpack compose.

In this article, we will look at how to make the below animation in jetpack compose.

This article is based on jetpack compose version 1.0.0-alpha05

To add jetpack compose in your project go to your app-level build.gradle file and add below code

Now, we will start writing our composables.

To create a container to hold your canvas
In your setContent composable add the below code.

Write code to draw a single rectangle first.

To draw a rectangle on the canvas, canvas provides drawRect function.

Let's understand the above code

1. The coordinates start from the top left corner of the canvas and the translate function moves the canvas at a given point. With the above code, our (0,0) coordinates are now at the center of the canvas.
2. drawRect function requires brush, topLeft offset point on the canvas, size, style, alpha, colorFilter and blendMode as arguments. For now we will focus only on brush, topLeft Offset, size and style.

As you have learned to draw a single rectangle on canvas now, we will repeat the same process to draw multiple rectangles of different sizes.
For simplicity and Maintainability, we will create a data class RectData which takes size, OffsetX, offsetY for now (later in this article we will add color as a property). Make a list of RectData and iterate over it as shown in the code below.

Run the app and you will see an output as shown in the below image.

Now we are moving towards an interesting part of this article.
For the animation, we need to rotate the rectangles at a particular angle in every frame.
In order to this, we must get the time taken by our composable till now and multiply it with 360f.
The below code gives us a state with animation time taken by our composable till now in milliseconds and every time the state value changes the rectangles will be drawn at a new angle.

To rotate anything on the canvas we have to use rotate function which takes angle and Offset(x, y) point.
We will wrap drawRect function in rotate function as shown in the below code.

And if we run the app we will get an output as below.

But, that's not what we wanted. We want our inner rectangle to be rotated at a faster speed and gradually decrease the speed as we go towards outer rectangles.
For this, we will change the value of the angle depending on the index of the rectangle in the list.

And the output will be as below.

It's time to add colors now.
Make colorList, add a new property in RectData as color, and remove the style of drawRect as default style is of Type Fill.

And the output is as below

In the above image, the outer rectangles are getting drawn on top of the inner rectangles, so we draw them in reverse order.

And the output will be as below.

For final code and many more canvas animations checkout CanvasPlayGround.