L'Architecture systèmatique [JP]: Processing

ラベル Processing の投稿を表示しています。すべての投稿を表示

2019年12月25日水曜日

Scala.js façade for p5.js

Scala.js façade for p5.js
=========================

[p5.js](https://p5js.org) 用の Scala.js façade を作ってみました、と言いたいのですが、まだ対応する function の欠損や型の不正確があり、完全互換までは未完です。
  先駆者は二人居ましたが、もう三年前で止まっています。jar も提供されていないため、どちらにしろ開発途上でした。実際うまく動かず、 global mode / instance mode も対応されていないようでした。

この façade は [Scala.js 1.0.0-RC3](https://www.scala-js.org/news/2019/11/26/announcing-scalajs-1.0.0-RC1/) 互換で開発していますが、2020 年 1 月末になれば Scala.js 1.0.0 として release されるため、本 façade は 2 月に release できる予定です。

repository はこちらです。

https://github.com/lamusique/Scala.js-p5.js

中に置いてある sample は一応動作します。Scala.js の compile 方法自体は省略します。

これを使うとどういう風に p5.js を Scala で書けるか、以下例を示します。

## Example
### global mode

global mode で書くと以下のようになります。
```scala
package samples

import scala.scalajs.js
import scala.scalajs.js.annotation._

// This import decides which mode.
import p5.js.modes.global.p5

@JSExportTopLevel("GlobalModeSampleApp")
@JSExportAll
object GlobalModeSampleApp {

def main(args: js.Array[String]): Unit = {

val p5InGlobalScope = p5()

val setupFn: () => Unit = () => {
      import p5InGlobalScope._

createCanvas(400, 400)
      background(0)
      noStroke()

()
    }

val drawFn: () => Unit = () => {
      import p5InGlobalScope._

if (mouseIsPressed) {
        ellipse(mouseX, mouseY, 20, 20)
      }
    }

p5InGlobalScope.setup = setupFn
    p5InGlobalScope.draw = drawFn

}
}

```

### instance mode

instance mode で書くと以下のようになります。
```scala
package samples

import scala.scalajs.js
import scala.scalajs.js.annotation._

// This import decides which mode.
import p5.js.modes.instance.p5

@JSExportTopLevel("InstanceModeSampleApp")
@JSExportAll
object InstanceModeSampleApp {

def main(args: js.Array[String]): Unit = {

val sketchFn: js.Function1[p5, Unit] = (sketch: p5) => {
      import sketch._

setup: () => Unit = () => {
        createCanvas(400, 400)
        background(0)
        noStroke()
        ()
      }

draw: () => Unit = () => {
        if (mouseIsPressed) {
          println(mouseX)
          println(mouseY)
          ellipse(mouseX, mouseY, 20, 20)
        }
      }

}

// instantiate
    val myp5 = p5(sketchFn)
  }
}

```

### p5.sound

p5.sound を使うと。
var を削除できます。
```scala
package samples

import scala.scalajs.js
import scala.scalajs.js.annotation._
import org.scalajs.dom
import org.scalajs.dom.document
import p5.js.modules.{FFT, Oscillator}

// This import decides which mode.
import p5.js.modes.instance.p5

@JSExportTopLevel("P5SoundSampleApp")
@JSExportAll
object P5SoundSampleApp {

// https://processing.github.io/p5.js-sound/examples/oscillatorMod_FM/
  def main(args: js.Array[String]): Unit = {

val sketchFn: js.Function1[p5, Unit] = (sketch: p5) => {

val carrier = Oscillator("sine")
      val modulator = Oscillator("sawtooth")
      val fft = FFT()

import sketch._
      setup = () => {
        createCanvas(800,400)
        noFill()

// Start the audio context on a click/touch event

val myDiv = createDiv("click to start audio")
        myDiv.style("color: white")
        myDiv.position(100, 100)

// implicit conversion
        // https://www.scala-js.org/doc/interoperability/types.html
        val onFulfilled: js.Function1[Unit, Unit] = Unit => {
          myDiv.remove()
          ()
        }

userStartAudio().`then`[Unit](
          onFulfilled)

carrier.amp(1)
        carrier.freq(220)
        carrier.start()

modulator.disconnect()
        modulator.amp(1)
        modulator.freq(4)
        modulator.start()

carrier.freq(modulator.mult(200).add(100))

// switches
        document.getElementById("start").addEventListener("click", (e: dom.Event) => {
          carrier.start()
        })
        document.getElementById("stop").addEventListener("click", (e: dom.Event) => {
          carrier.stop(0)
        })

()
      }

draw = () => {

background(30)

// map mouseY to moodulator freq between 0 and 20hz
        val modFreq = map(mouseY, 0, height, 20, 0)
        modulator.freq(modFreq)

// change the original amplitude of the sawOsc, before it's scaled.
        // negative amp reverses the waveform, and sounds percussive
        var modAmp = map(mouseX, 0, width, -1, 1)
        modulator.amp(modAmp)

// analyze the waveform
        val waveform = fft.waveform()

// draw the shape of the waveform
        stroke(255)
        strokeWeight(10)
        beginShape()

for (i <- 0 until waveform.length) {
          val x = map(i, 0, waveform.length, 0, width)
          val y = map(waveform(i), -1, 1, -height/2, height/2)
          vertex(x, y + height/2)
        }
        endShape()
      }

}

// instantiate
    val myp5 = p5(sketchFn)

println("the main ends.")
  }
}

```

作った感想
=========
1. 既存 library へ facade を作ってみると、Scala.js がよりわかる。JavaScript に対して苦労している点など。
1. immutable や functional に書ける。
1. しかし、すぐ書いて反映し試行錯誤できる live coding のような俊敏性は損なっている...。

References
==========
1. https://www.scala-js.org/doc/interoperability/facade-types.html
    - 公式 façade の書き方。
1. https://www.scala-js.org/libraries/facades.html
    - 既存 façade 一覧
    - 公式の façade の書き方の説明は抽象的な部分があるので、実際の例を見たほうが分りやすい。

2015年12月24日木曜日

つかむ

つかむ in 3D with Processing
================================
[Processing Advent Calendar 2015](https://atnd.org/events/72012) 25日目

*English version: http://sys-architecture.blogspot.com/2015/12/grab-an-object-in-3d-with-processing.html*

3D Object を掴んで移動させたい。
ただそれだけのことだったのですが、そんなに簡単な問題ではないとわかりました。
3D については素人です。

方法は、
1. pixels matching
    - 奥側の座標を pixel 化して matching させる計算機科学的方法
1. ray casting
    - cursor からの直線上に存在するか線型代数学的方法

がありそうなことはわかりました。

1 は trick なのでまずは 2 をやろうとしましたが、
Processing API には screen 座標から model 座標への変換処理がまだないようです。作ってあげればいいのですが...。

手前から奥への Camera の角度から 2 を実現しようとしましたが、よく分からない歪みによってうまくいかない状態です。

ということで、とりあえず今回の機会に間に合わすために、
model から screen への変換ができる screenX などの既存の method を使いました。

![demo](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8f82uKoEa2RktZ5qN17n3o61CkCPUYQjs9KKHMt74n6lUM5M8_uBHXURtSqKSaQge4DvsGClD5fXqETnZNTRCBHZ1JkmaEQRMlpD2OkxDZjTaVH8lbyRX6EnCOl9LVBY0C52l9YrioE/s1600/grabbing-demo-trimmed.gif)

P5.js で見せたかったのですが、時間がありませんでした。

私が [Processing with Scala](http://sys-architecture.blogspot.com/2015/12/processing-with-scala.html) で書いたコードは [こちら](https://github.com/lamusique/ScalaProcessing/blob/feature/samples/src/test/scala/com/nekopiano/scala/processing/sandbox/sample/Grabbing.scala) にあります。

課題
- inverse matrix の処理を実装し本来の処理を行う
- mouse と model の移動量を同期
- 手前に見えているものだけ移動

2015年12月13日日曜日

Processing with Scala

プロセッシング・ウィズ・スカーラー
================================
English version: http://sys-architecture.blogspot.com/2015/12/processing-with-scala.html

Processing の文法は基本的に Java です。
しかし今は関数型言語の時代。古き良き時代の文法を抱え込んだ Java では色々書くのがまどろっこしいのです。
最後に**強制される**命令言語的な `;` とか。

そこで JVM 上で動く関数型言語 Scala /ˈskɑːlɑː/ を書くことで、 Processing を実現しようと思います。
純粋に JavaScript 上で Processing を実現する P5.js も同じような方向性ですね。

作成のベースになる Scala はこちらに作成しました。
> https://github.com/lamusique/ScalaProcessing

最近は、 Processing も Maven Repository に置かれるようになったため、 Scala への取り込みも楽です。

さて、一例を。
Processing の Examples にある
https://processing.org/examples/bouncybubbles.html
を Scala で書いてみたら以下のようになりました。

```scala
package com.nekopiano.scala.processing.sandbox.sample

import com.nekopiano.scala.processing.ScalaPApplet
import processing.core.PApplet

class BouncyBubbles extends ScalaPApplet {
  import BouncyBubbles._

val balls:Set[Ball] = {
    // in parallel
    val localBalls = (0 to numBalls).par.map(i => {
      new Ball(random(width), random(height), random(30, 70), i)
    }).seq.toSet
    localBalls.foreach(_.others = localBalls)
    localBalls
  }

override def settings(): Unit = {
    size(640, 360)
  }

override def setup() {
    noStroke()
    fill(255, 204)
  }

override def draw() {
    background(0)
    balls.foreach(ball => {
      ball.collide()
      ball.move()
      ball.display()
    })
  }

}

object BouncyBubbles {
  // Constants
  val numBalls = 12

val spring = 0.05f
  val gravity = 0.03f
  val friction = -0.9f

// ==== booting process
  val BOOTING_CLASS_NAME = this.getClass.getName.dropRight(1)
  def main(args: Array[String]) {
    // This specifies the class to be instantiated.
    val appletArgs = Array(BOOTING_CLASS_NAME)
    if (args != null) {
      PApplet.main(PApplet.concat(appletArgs, args))
    } else {
      PApplet.main(appletArgs)
    }
  }
}

class Ball(var x:Float, var y:Float, val diameter:Float, val id:Int)(implicit val sp5: ScalaPApplet) {

import sp5._
  import com.nekopiano.scala.processing.Angles._
  import BouncyBubbles._

var others: Set[Ball] = Set.empty[Ball]

var vx = 0f
  var vy = 0f

def collide() {
    others.foreach(ball => {
      val dx = ball.x - x
      val dy = ball.y - y
      val distance = sqrt(dx*dx + dy*dy)
      val minDist = ball.diameter/2 + this.diameter/2
      if (distance < minDist) {
        val angle = atan2(dy, dx)
        val targetX = x + cos(angle) * minDist
        val targetY = y + sin(angle) * minDist
        val ax = (targetX - ball.x) * spring
        val ay = (targetY - ball.y) * spring
        vx -= ax
        vy -= ay
        ball.vx += ax
        ball.vy += ay
      }

})
  }

def move() {
    vy += gravity
    x += vx
    y += vy
    if (x + diameter/2 > width) {
      x = width - diameter/2
      vx *= friction
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2
      vx *= friction
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2
      vy *= friction
    }
    else if (y - diameter/2 < 0) {
      y = diameter/2
      vy *= friction
    }
  }

def display() {
    ellipse(x, y, diameter, diameter)
  }
}

```
うーん、あんまり代わり映えがなく面白くないですね（笑）例が悪かったのか。

ベースの class にはまだ PApplet などから全部移植していないので work in progress です...。
Scala の得意な並列処理は、描画処理 (line, box, etc.) の手前で止めないとエラーになります。描画の並列処理は GPU のお仕事なので。

Processing 上の Scala エディターも作れたらいいなと思います。手軽に書けるので。
SPD というエディターもありましたが、 6 年前から止まっているようですね。
https://github.com/n8han/spde-examples

Scala を書く人なら、 Scala で一度書いてみてはどうでしょうか。
https://github.com/lamusique/ScalaProcessing をテンプレートに利用できます。
色々と Processing 内部の仕組みもわかってくると思います。

2014年12月11日木曜日

Theremin on Processing

Theremin on Processing in progress?

テルミン・オン・プロセシング・イン・プログレス？
If you want English, here is English version.

これは Processing Advent Calendar 2014 の 12月13日(土) に参加している記事です。

Advent Calendar 初参加で今回自分の中で設定した objective は、
Processing を使って、手の動きを検知し Theremin ができないか ということでした。
あとは 特別に何か用意しなくてもいい ということも考えました。

と思っているとほとんど時間が取れず、
でもその中で何ができるかを考えて実行するのも一つの勉強だと考えました (lean startup or microservice?) 。
なので温かくみてください...。

さて、しかしもうすでに同じことを誰かがやっているなら意味ないだろうと恐る恐る Theremin で調べてみると案の定ありました...。
Theremin webcam (Windows, Mac??)
http://www.openprocessing.org/sketch/29512

でもみてみると、セキュリティのおかげで Web 上でうまく動かないし、ダウンロードしてもそのままでは動かず、なんとか起動させてみたんですが、画面が小さすぎて control できない状態でした。
これじゃあ音階が作れないということでやはり自作しようとする動機ができました(笑)

さて効率的に進めるため、 libraries とその examples を漁って関係するものを見てみました。

まず音ですが以下の二つを見てみました。

minim (Processing 用の sound library)
sound (Processing 純正)

純正 sound で十分なんで minim は却下。

Camera は、以下の三つを見てみました。

video (Processing 純正)
OpenCV
BoofCV (Java でできた CV library です)

初めに考えたのは video の画像差異を検知し point を決定する方法で、 Processing 上で programing しないといけないのですが (最初に挙げた Theremin webcam でもやっていました) 、これは一から書くのも時間がかかるので却下。
そしたら CV なんですが、 OpenCV がなぜかうまく Mac OS に install できないため、原因を探って直す時間もないんで (笑) 、 BoofCV を採用。そこで使えそうな example をベースにしました。

他にも import 可能な library を見ていたんですが、うまく使えそうなものはありませんでした。

ということで今できているものがこれです。

そしてこちらが作業している repository です。
GitHub - Theremin on Processing

作ったものはこちらからダウンロードできます。
GitHub - Theremin on Processing - release page

Camera 解像度は FaceTime HD (1280x720) に合わさせてもらってます。選べればいいですけど...。

まず起動したら controller にする対象を drag して囲ってください。普通は手ですね。
横軸が pitch です。縦にすると短すぎるので...。左から右へ高くなります。
縦が音量です。下から上へ音量が上がります。

作っていて思ったのは、実演奏に耐えるには、精度等に問題があると感じたので、確かにinfrared camera device (e.g. Kinect, Leap Motion) を使えばより実用的になるかと思いますが、何も用意しなくてできるというところで今回はここまでにしておきます。

この記事は、技術的に特別なことをしたわけではないので、主に Processing でこういうこともできますよという紹介ですね (笑)

この記事と artifacts は、 Boulez ではないですが work in progress にさせてもらいます。
非常に時間が限られた中でも何かはできると分かりました。

さて実用的かどうか判定してもらうため...
Neko Piano さんにこれを使って演奏してもらいました。
はじめてでかなり難しそうです...。

先ず手始めに操作の確認と音階の練習。

音楽っぽく、ピノキオの「星に願いを」を歌ってもらいました。

うーん、かなり音痴な感じですが (笑)
一応、これで音楽が演奏できることは確認しました。

ちょっと他の YouTube の video も見てみましたが、こういう digital な Theremin だと、音を動かすところで技術的に満足して終わって、音楽を演奏しているのは見つからなかったです。初かも？

しかしなんとかものになって良かった...。

登録: 投稿 (Atom)

L'Architecture systèmatique [JP]

Links