L'Architecture systèmatique [JP]: p5js

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 の書き方の説明は抽象的な部分があるので、実際の例を見たほうが分りやすい。

L'Architecture systèmatique [JP]

Links

2019年12月25日水曜日

Scala.js façade for p5.js

Scala on VSCode

My Blogs

不正行為を報告