canvasと、p5にコマンドを送る方法

JSで経路探索の動画があったのでやってみた。

Pathfinding - Coding for Beginners - YouTube

最初はcanvasで図表の描画から始まって、

次第に経路探索の何たるかみたいなところの説明があり、

幅有線探索、裁量有線探索、A-starの説明に進んでいく。

コメントにあるが　優先度付き探索priority_queue、priority queueやmin heapを使うのが一般的っぽいのでその辺は後でやりたい。

＊詰まったところ

動画ではChrome開発ツールでメソッドを叩いているんだけど、俺はFirefoxを使っていたのもあるだろうが、エラーばっかりで頭抱えてた。
そしたらこんなところにメニューが・・・　ようはどこに対してコマンドを送るか？を指定できた。なんだよこんなのあったのかよ・・・

ちなみにFirefoxでは「G.」と入力すると補完リストがでてきてくれるので、ここから利用するメソッドを選択して、引数を入れてやると結果が出る。
（この場合はundefinedになるけど問題はない。描画されていればよい）

更に、Chromeの場合。

こちらでもコマンドを送る対象を選択すると、対象に対してコマンドが送れるようになる。

そして動画と同じような結果が表示されるようになる。

＊００座標が左上隅。でもY座標、下に向けてプラス座標

久しぶりに触るとこういうイロハのイが分かってなくってなんでやなんでや愚痴がループする。

よく考えるとピクセル座標っていっても多分iPhoneとPCとAndroidで随分変わると思うからマルチに使えないよね

＊P5は、JSライブラリーの１つ。

　そこの団体がライブコーディングのウェブサービスをやっている。

　　[ home | p5.js ]　( https://p5js.org/ )

　ライブコーディングのウェブサービスはCodePen、JSFiddleが一番有名かな。

　次いでCSS Deck、JSBinなどがあるけどその辺はお好み。

　TSなまだしもコンパイルいらないJSならこういうの使って色々お試ししてみるのが良いと思う。

　基本無料だが共有してチームで使いたいとかの場合は年１万～３万円ほどだが、本格的開発ならGithub使うだろうからどれくらいニーズあるのだろうか。