「p5.js」カテゴリーアーカイブ

ブロックで亀 2016

一年間のご無沙汰でした。
これは「Processing Advent Calendar 2016 – Qiita」の参加記事です。

昨年は、p5.jsをブロックで編集・実行できる「ブロックでタートル with mameblock.js」を紹介しましたが、ちょうどアップデートが間に合ったので、紹介します。

今回は、なんとカメが動くようになりました！！！
ラインの上で、カメがアニメーションするようになっています。

turtle_s

ま、それだけなんですが、少しばかり、ややこしい展開でここまでこぎつけました。
まず、p5.play.jsを導入しました。
そして、インスタンスモードで動かそうとしたんですが、createGraphicsが対応していないことが判明。
がんばってバグレポートを書きました。
そしたら、なんとか#119で対応してもらえました。
（ただし、p5.play.jsのmasterには取り込まれていないので、#119から取り出す必要があります）

これで、タートルでブロックでも、細かなところを気にせずに、タートルコードを書けるようになりました。

という訳で、いよいよこれで、なにかまとまったアプリを作ってみたいと思います。

こちらからは以上です！

このエントリーをはてなブックマークに追加

p5.js-widgetを試してみた


Dashboard widgets and iChat w/Jabber

手軽にグラフィカルなプログラミングを楽しめる「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に埋め込むこともできます。

うーむ、これは便利。

関連ページ

このエントリーをはてなブックマークに追加