#p5js のプログラムを Window.js を使って動かしてみた手順のメモ（Mac を利用）

:::note warn
【注意】 とりあえず動作はさせられてますが、表示の問題が出ている状況で、原因はこれから調べるところです
:::

Twitter で [@takawo さん](https://twitter.com/takawo)が以下のツイートをされていたのを見て、自分も「p5.js のプログラムを Window.js で動かす」というのを試してみたのですが、その時の手順のメモです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お🥳や🥰す🤯み <a href="https://t.co/oYRHDL1u07">pic.twitter.com/oYRHDL1u07</a></p>&mdash; TAKAWO Shunsuke (@takawo) <a href="https://twitter.com/takawo/status/1481646404150120449?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 自分が試したものの結果
試した結果が以下のような感じで、ウィンドウの部分が少しおかしいです。
何か、試す手順でまずい部分があるのか、それとも...

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/takawo?ref_src=twsrc%5Etfw">@takawo</a> さんがツイートされてた Window.js で <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> を動かせる話の件、<br>公式ドキュメントを見つつ Mac で動かしてみた！<br>（やり方がまずい部分があるのか、生成されたウィンドウがちょっとおかしいｗ）<br><br>●Window.js | Processing with p5.js<br>　<a href="https://t.co/VvkfaL3WKu">https://t.co/VvkfaL3WKu</a> <a href="https://t.co/O23fEGQdvN">pic.twitter.com/O23fEGQdvN</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1481653823295062019?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 試した手順
### バイナリで配布されている実行ファイルのダウンロード
ツイートに「Window.js」という名前が出ていたので、ググって以下の GitHubリポジトリにたどりつきました。
●windowjs/windowjs: Window.js is an open-source Javascript runtime for desktop graphics programming.
　https://github.com/windowjs/windowjs

[クイックスタートの部分](https://github.com/windowjs/windowjs#quick-start)を見ると、Windows用・Mac用のバイナリを配布していると書いてあったので、[そのリンク先]()を見てみることに。
![クイックスタート.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3ea393d1-cf58-713d-3566-9885cd6dbf97.jpeg)

そこにあったバイナリのリンクのうち、Mac用のほうをクリックしてダウンロードしました。
　●Window.js | Download
　　https://windowjs.org/download
![バイナリ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/15c80886-33bb-fe37-025e-7fe8f36278dd.jpeg)

ダウンロードについて、上記の公式ページに「ブラウザで警告がでるような話」が書かれており、その通りのメッセージが実際に出ました（ブラウザは Google Chrome）。
以下の画像にある、「破棄」と書かれたボタンの右の「^」という見た目の部分を押し、その後に表示される「継続」を押せばファイルをダウンロードできます。
![警告.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b700524-10b6-129b-707a-535bc43c756a.jpeg)
ここでダウンロードした ZIPファイルを解凍すると、「windowjs」というファイルが 1つだけ出てきます。

これを適当なフォルダに置いて、ターミナルから `./windowjs` というコマンドで実行すると、最終的には以下の画面が表示されるのですが、おそらくこの時点では警告がでて、実行をブロックされると思います。
![Welcomeの画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/afad1a94-dcf7-3c3e-fe51-97be67d1b3a5.jpeg)

原因は Apple公式の以下のページに書いてある「ノータリゼーション (公証) を受けていない未署名のソフトウェア」に該当するためです。
　●Mac で App を安全に開く - Apple サポート (日本)
　　https://support.apple.com/ja-jp/HT202491
これに対処するには、上記のページの「ノータリゼーションを受けていない App や未確認の開発元の App を開きたい場合」という部分に書かれた手順を実行するか、上記のページの下のほうに書いてる以下の手順を実行する必要があります。
![Mac_で_App_を安全に開く_-_Apple_サポート__日本_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/80a0e508-6e29-79d8-3182-5f7943f14e89.jpeg)
自分は 2つ目のほう、具体的には以下を実行しました。

　1）Finder上で「controlキー」を押しながら「windowjs」をクリック
　2）表示されるメニューの中の「開く」を選択
　3）さらにその後に出てくる警告画面で「開く」を選択

一度、これを行ってしまえば、次からは普通に実行できるようになります。

上記のファイルのダウンロードや実行がブロックされてしまう話は、公式のダウンロードページの中で、以下のように書かれていたりします。
![ブロックされる話.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9867f15f-0c01-eabd-799f-00c7e5fca09f.jpeg)

### p5.js のファイルを実行するための準備
先ほど、バイナリをダウンロードしたページの左の方を見ると、「Processing with p5.js」という記載があるので、それをクリックしてみました。
そうすると、以下のページが表示され、p5.js のプログラムを実行するためのコマンドが書いてありました。
![実行方法の記載.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/840bcb84-a1ff-d531-408d-1f5db2e50f40.jpeg)

```bash
$ out/src/windowjs.exe examples/p5.js -- examples/p5/simulate-recursive-tree.js
```

コマンドの左端の部分（`out/src/windowjs.exe`の部分）は、先ほど試しに実行したコマンド（`./windowjs`）で置き換えができそうです。
あとは `examples/p5.js` の部分と `-- examples/p5/simulate-recursive-tree.js` の部分をどうすればいいか、という話が残ります。

それらを見ていきます。
コマンドの例が書かれた部分の下にある、「Implementation details」の部分で、「Support for p5.js in Window.js is provided via a loader in examples/p5.js that ...」という記載があり、 examples/p5.js の部分のリンク先が以下の GitHub のファイルになっていました。

●windowjs/p5.js at main · windowjs/windowjs
　https://github.com/windowjs/windowjs/blob/main/examples/p5.js

その 403行目あたりを見ると、p5フォルダ内のファイルを読み込んだりしているようです。
https://github.com/windowjs/windowjs/blob/main/examples/p5.js#L403
![読み込んでいるファイル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/232e237d-5094-bd64-6cdc-c835dff45609.jpeg)

[GitHub のリポジトリ上にある「examples」以下](https://github.com/windowjs/windowjs/tree/main/examples)の「p5.js」と「p5/p5.min.js」があれば、p5.js のプログラムを実行できるようでした（それと、プログラムを実行しているウィンドウにエラーメッセージが出るので「examples」以下に「p5/p5.ico」も置きました）。

話をまとめると、ファイルの構成は以下のようになり、その中の「p5test.js」が p5.js のプログラムという形です。
![ファイル構成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/341fbad7-9674-7eca-7ae6-7197aee98faa.jpeg)
（余談ですが、当初はどのファイルが必要そうかを確かめず、とりあえず [examples以下全体](https://github.com/windowjs/windowjs/tree/main/examples)を使って動かしたりしてました）

ここまで準備ができたら、あとは以下のコマンドでプログラムを実行するだけです。

```bash
$ ./windowjs ./examples/p5.js -- p5test.js
```

実行結果は、冒頭に掲載していたツイートのとおりです。
なお、その時に用いていたプログラムは以下です。

```javascript:p5test.js
function setup() {
  createCanvas(400, 400);
  frameRate(15);
  strokeWeight(15);

  pixelDensity(0.5);
}

function draw() {
  // background(220, 220, 220, 255 / 3);
  background(220, 220, 220);
  stroke(125, 125, 200, 100);
  line(mouseX, mouseY, pmouseX, pmouseY);
  stroke(200, 125, 200, 100);
  line(width - mouseX, height - mouseY, width - pmouseX, height - pmouseY);
  stroke(125, 200, 200, 100);
  line(width - mouseX, mouseY, width - pmouseX, pmouseY);
  stroke(200, 125, 125, 100);
  line(mouseX, height - mouseY, pmouseX, height - pmouseY);
}
```

これは、少し前に p5.js Web Editor上で作って動かしていたものを、そのまま流用しました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">先ほど動画をツイートしていた <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> のマウスの軌跡をシンプルに使うプログラム、軌跡を描く部分の数を 4つにしてみた。<br><br>ここからさらに、ちょっとした変更で楽しくできそうな予感。 <a href="https://t.co/EfAEyD8bzO">pic.twitter.com/EfAEyD8bzO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1477422412413423620?ref_src=twsrc%5Etfw">January 1, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

とりあえず、動くには動いたのですが、ウィンドウの表示が意図しない感じになっていそうなので、もう少し詳細を見ていければと思います。

## 【追記】 この話に対して Twitter でもらったコメント
このあたり、確かめたり対応したりできればと思います。

### マウスの位置などのずれ
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Retinaの場合pixelDensityが効いてなくてマウス位置などがズレるのかもです</p>&mdash; TAKAWO Shunsuke (@takawo) <a href="https://twitter.com/takawo/status/1481654426557632512?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 画面表示まわり
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thank you for the comment!<br>Before I do that, may I confirm that the rough procedure I have tried is correct?<br><br>1. Download &quot;<a href="https://t.co/MO1KIWqjMj">https://t.co/MO1KIWqjMj</a>&quot;<br>2. Download the files from GitHub except for the &quot;p5test.js (It&#39;s a program I wrote)&quot; in the attached image<br>3. Execute the command <a href="https://t.co/SGoqkgO5PP">pic.twitter.com/SGoqkgO5PP</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1481676826984730624?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記の続きで、以下の回答をいただいた感じからすると、記事で書いていた手順は問題はなさそうです。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Looks about right. Can you try the p5js examples in examples/p5, like examples/p5/simulate-recursive-tree.js? Do those look OK or have the same problem?<br><br>An earlier version had issues with retina displays; this is likely a pixel-ratio issue.<br><br>Could you share p5test.js too?</p>&mdash; Joao da Silva (@JoaoDaSilvaZ) <a href="https://twitter.com/JoaoDaSilvaZ/status/1481685683504918531?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>