processing png

2012-02-02: processing.js へのリンクが切れて画像が生成されなかった問題を修正

web や iOS app の開発をしているときにボタンとかに使うチマチマした画像が必要なことがあります。いままでは Seashore でドットを打ったりしてましたが、 Processing.js を使うとプログラムで簡単に絵を描くことができるので、プログラマとしては色やサイズの微調整とかの応用がしやすいですね。

以下は iframe に展開したデモです。 m とか s の値を変えて update すると更新されるのがわかるかと思います。


基本的には Processing.js Web IDEの簡易版ですが、 canvas の内容を img タグに画像としてコピーしているので、その画像をファイルとして保存すれば素材として使えます。

現状、ワークフロー的にはローカルリポジトリのファイルとブラウザ上の textarea, img との手作業のコピペが何度も発生するので洗練されてませんが、工夫すればもうちょっとマシになるかもしれません。

ソースのhtmlは gist にあります (raw を iframe の src に指定すると text/plain になっちゃってダメなので dropbox のファイルを参照)