ProcessingをAndroid Studio with Kotlinでやる

Android

前置き

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

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

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

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にプロジェクトごと上げてありますので、自由にご利用ください

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

 

コメント