Electronics

2015.08.27

p5.jsビジュアルプログラミングエディタ

Text by Takumi Funada

スクリーンショット 2015-08-23 9.17.27

p5.js“はProcessingによく似たスタイルでインタラクティブなプログラムを作ることができるJavaScriptライブラリだ。DOMライブラリと併用することで、canvas上だけでなく、ウェブページ全体をスケッチの要素として扱えるようになる。応用範囲はかなり広い印象だ。

今回は可知豊さんが開発しているp5.js用のビジュアルプログラミングエディタのベータ版を紹介しよう。次のページへ行くと、Processingユーザーにはおなじみのマウスで円の軌跡を描くサンプルがウェブページ内で動いている。

p5.js用ビジュアルプログラミングエディタ

実行領域の下にスケッチ(ソースコード)も表示される。そこにある編集ボタンをクリックするとエディタが現れて、視覚的にプログラミングの構造が示され、コード要素のドラッグ&ドロップとパラメータの編集によってスケッチを作ることができる。

p5.jsに関する日本語の資料はまだ少ないが、このエディタの上では日本語でp5.jsの構文やスケッチの構造を見ることができる。初心者の入口にどうだろう。