手軽にグラフィカルなプログラミングを楽しめる「p5.js」が、Webページに簡単に埋め込めるようになりました。それが「p5.js-widget」です。
まずは、実物を見てみましょう！
こんな感じで、Webページに、p5.jsの実行環境を埋め込みできるんです。
このコードエリアで、右側のところにマウスポイントを合わせると、グリグリ動きますよね。これ、Procesingのコードを書き換えて、すぐに試すことができます。
使い方
次の1行を記述して・・・
<script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
あとは、こんな感じで、コードを書くだけ。
<script type="text/p5" data-autoplay>
function setup() {
createCanvas(200, 200);
}
function draw() {
fill(255);
ellipse(mouseX, mouseY, 30, 30);
}
</script>
機能
簡易的な開発&デモ環境として、いろいろと機能が充実しています。
- Autoplay
- Autosave
- Error Handlin
こんな感じで、Wordpressに埋め込むこともできます。
うーむ、これは便利。
