ProcessingをAndroid Studio with Kotlinでやる

前置き

今、毎日GLSLでシェーダーを書いてtwitterに投稿するという試みをやっているのですが、その絡みでプログラムでアートを作る人をフォローしていっており、その過程でProcessingやってる人がとても多く見受けられたので、気になっておりました

皆processingやってていいなって思うのだけど
目的がシェーダーなので手出したら寄り道になっちゃう気がしてなかなか手が出ない…
でもいいなあって思う

— Norihiro Narayama (@northprint) April 6, 2019

で、インストールしたのですが、最初の言語選択のところで

今更ながらprocessingインストールしていた
そして言語選択でjavaかpythonかなあと思って、javaならkotlinで書いても良いのでは？ってなってる
お仕事終わったら調べてみたい

— Norihiro Narayama (@northprint) April 16, 2019

ということで、やってみたのですが、あっさり出来ましたということで、方法を書いておこうと思います（実はちょっと嵌ったりしました）

Android Studioでプロジェクトの作成

まず、Android Studio（バージョンは3.4です）でプロジェクトを作ります

とりあえずEmpty Activityで良いと思います

次にプロジェクトの名前とか言語とかを選ぶのですが、言語はKotlinを選択します

ココで注意、androidx使うようにしてしまうと、現状のProcceising for Androidのライブラリが対応していないようなので、うまくいきません

appのbuild.gradleを編集

ライブラリの導入にgradleを使います

appのbuild.gradleに次の一行を追加します

dependencies {
    〜    
    implementation 'org.p5android:processing-core:4.0.4'
}

これでProcessingが使えるようになります

Processingで描画する

さて、問題はここから

どこでどのように描画するのか、というところなのですが

PFragmentというFragmentを継承したクラスが用意されており、そちらにPAppletというクラスを拡張したクラスを使用して描画します

このPFragentがサポートライブラリーのFragmentを継承しているため、androidxが使えなかったのです（androidx版作ろうとしましたが、少しだけ根が深く断念しました。。時間が出来たらやりたいですが。。）

とりあえず、この辺は説明が苦手なので、実際ソースコードを見てもらったほうが良いと思います

MainActivity.kt

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.ViewGroup
import android.widget.FrameLayout
import processing.android.CompatUtils
import processing.android.PFragment

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // FrameLayoutを作成
        val frame = FrameLayout(this)
        frame.id = CompatUtils.getUniqueViewId()
        setContentView(
            frame,
            ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        )

        // PAppletクラスを継承したSketchクラスをNewする
        val sketch = Sketch()
        // PFragmentで描画
        val fragment = PFragment(sketch)
        fragment.setView(frame, this)
    }
}

Sketch.kt

import processing.core.PApplet

class Sketch : PApplet() {

    override fun setup() {
        // 背景色
        background(255)
    }

    override fun draw() {
        noStroke()

        // 色をランダムに設定
        val r = random(0f, 255f)
        val g = random(0f, 255f)
        val b = random(0f, 255f)

        // 位置をランダムに設定
        val x = random(0f, width.toFloat())
        val y = random(0f, height.toFloat())

        // 円の大きさをランダムに設定
        val d = random(10f, 100f)

        // 塗る
        fill(r, g, b)
        // 描く
        stroke(r, g, b)
        // 円
        ellipse(x, y, d, d)
    }
}

これを実行すると

出来ました！（ツールバーは消してあります）

Androidの実機でアプリとして実行出来るので夢が広がりますね！

GitHubにプロジェクトごと上げてありますので、自由にご利用ください

GitHub - northprint/ProcessingForAndroid

Contribute to northprint/ProcessingForAndroid development by creating an account on GitHub.

github.com