Androidでもクリエイティブコーディングしてみよう！
はじめに
本記事はProcessing Advent Calendar 2024の4日目の記事です！
普段はモバイルエンジニアやデータサイエンスのようなことをしています。
たまにp5.jsを使ってクリエイティブコーディングも楽しんでいます。
今回はAndroidアプリとクリエイティブコーディングを掛け合わせた内容になります。
Androidアプリでクリエイティブコーディングをやってみたところ、なかなか楽しかったのでおすすめできると思った点を紹介していこうと思います！
モチベーション
近年、AndroidアプリはJetpack ComposeというUIフレームワークが発展し、これに伴ってAndroid開発用のIDEであるAndroid Studioもさまざまな機能が増えてきました。
これがとても開発体験が良く、クリエイティブコーディングにもいいのではと感じました。
Androidアプリとして動くジェネラティブアートも面白いと思いますし、実装できる場面が増えるとよりクリエイティブコーディング界隈も楽しくなるのではないかと思います！
Processing for Androidとの違い
既存のフレームワークとしてProcessing for Androidがあります。
こちらはJavaで記述したProcessingのコードをAndroidアプリで使える用にしてくれるものです。
これと違い、今回はAndroid開発環境上でKotlinを使いクリエイティブコーディングをやろうというものになります。
AndroidとJetpack Composeのいいところ
- 宣言的UI的にコンポーネントの作成と配置が書きやすい
- 図形やアニメーションを扱える
- プレビュー機能でアプリ用にビルドしなくても見た目をすぐに確認できる
- Android、WearOSなどにビルドできる
やってみよう
Jetpack ComposeのCanvasを用いることで自由な図形描画などができます。
今回は円をランダムに配置するコードをp5jsとJetpack Composeとで比較をしてみます。
環境構築
環境構築については色々な解説記事があるので省略させてください。
Android Studioがあれば大丈夫です。
細かい環境構築の方法は公式ドキュメントが参考になります。
p５.jsで作ってみる
p5.jsで作ってみるとこんな感じです。
Jetpack Composeで作ってみる
Android Jetpack Composeで作るとこんな感じになります。
// Androidアプリのメインアクティビティ
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MyTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
RandomCircles(
modifier = Modifier.padding(innerPadding),
)
}
}
}
}
}
// ここで円をランダムに描画
@Composable
fun RandomCircles(modifier: Modifier = Modifier) {
val randomSeed = Random(42)
val randomColors =
listOf(
"#B74340",
"#F2CE0E",
"#0E1F28",
"#266BB3",
).map {
Color(android.graphics.Color.parseColor(it))
}
Canvas(
modifier = modifier
.fillMaxSize()
.background(Color.White)
) {
for (i in 1..20) {
drawCircle(
color = randomColors.random(randomSeed),
radius = (50..150).random(randomSeed).toFloat(),
center =
Offset(
x = (0..size.width.toInt()).random(randomSeed).toFloat(),
y = (0..size.height.toInt()).random(randomSeed).toFloat(),
),
)
}
}
}
そして、開発中はこんな感じでプレビュー機能を使って表示を確認できます。
アプリとして書き出したりエミュレータもいらないので、すぐにフィードバックが得られます。
これが今回一番に紹介したかったことです！
応用＆終わりに
ここからさらにアニメーションを加えたり、実機で動かしたりアプリとして公開もできちゃいます。
ただ、アニメーションは考え方がけっこうProcessingと違いがあります。
簡単に説明すると、p5jsは時間ベースであるのに対してJetpack Composeは値ベースの作り方になります。
PixelWatchでアニメーションを動かしてみたものがこちらです。
実機で動くのがなんだか嬉しいです。
これ以外にもシェーダーも使えるのでかなり研究しがいがあるなと感じています。
気になった方はぜひやってみてください！
今回のAndroidのコードはこちらのGitHubにアップしてあります。
Discussion