データを使った描画のサンプル
概要
TouchDevelopでは画像や音声等のバイナリデータを内包することができません。
音声に関してはどうしようもないのでwebダウンロードに頼ることになりますが、画像に関してはコマンドを駆使して内部で生成することも可能です。
しかしコマンドを並べて画像を作るというのは非常に大変でコードも膨大な量になってしまうため、数値配列を使った8bit PC時代に主流だった描画システムを再現してみました。
| 命令 |
パラメータ |
動作 |
| 0 |
|
終了 |
| 1 |
r |
g |
b |
ペンの色(各値はTouchDevelopでは0～1.0だが、わかりやすくするために0～255とする) |
| 2 |
a |
ペンの透明度(値はTouchDevelopでは0～1.0だが、わかりやすくするために0～255とする) |
| 3 |
x |
y |
点 |
| 4 |
x1 |
y1 |
x2 |
y2 |
線 |
| 5 |
x3 |
y3 |
線(直前の線に続ける) |
| 6 |
x |
y |
幅 |
高さ |
角度 |
矩形 |
| 7 |
x |
y |
幅 |
高さ |
角度 |
矩形(塗り潰し) |
| 8 |
cx |
cy |
半径 |
歪み |
角度 |
円(半径は横サイズで、半径*歪みが縦サイズになります) |
| 9 |
cx |
cy |
半径 |
歪み |
角度 |
円(塗り潰し) |
| 10 |
sx |
sy |
dx1 |
dy1 |
dx2 |
dy2 |
三角塗り潰し |
描画データは次のように文字列で定義し、それをstr2numMapルーチンを利用してNumber Map化してください。
10進数以外にも16進数も使用できます($FF等のように記述)。
- データ例
- s := "2,255,1,240,50,70,7,0,0,300,300,0,"
- s := s→concat("1,50,30,30,9,148,155,106,1.3,0,9,59,217,19,3.6,0,
9,56,284,26,2.5,0,9,216,272,59,1.9,0,7,71,263,90,38,0,")
- s := s→concat("10,156,67,170,49,179,82,10,192,63,170,49,179,82,
10,207,60,183,48,200,86,10,200,65,206,46,228,75,")
- s := s→concat("1,50,30,30,9,104,168,23,0.3,0,9,186,170,23,0.35,0,
9,144,218,11,0.55,0,9,144,240,15,0.26,0,")
- s := s→concat("1,255,255,255,9,103,171,18,0.33,0,9,184,175,17,0.4,0,
9,144,207,30,0.33,0,9,157,248,11,0.72,0,")
- s := s→concat("1,50,30,30,9,104,168,8,0.75,0,9,185,169,9,0.95,0,")
- m→set_many(code→str2numMap(s→concat("0")))
Number Mapから画像を描画するにはpictureオブジェクト(例：pic)を準備して、pic := code→bin2draw(横サイズ, 縦サイズ, m)のように呼び出してください。
実際に上記データで描画するとこのような画像ができあがります。
ロジック的には閉じられた領域を塗り潰すいわゆるペイントルーチンもできそうですが、ペイントルーチンは領域の形状が複雑になるほど膨大なスタックメモリが必要になり処理時間もかかるため今回は見送ります。
(デモンストレーションとしていつか作りたいですが)
その代わり三角塗り潰し機能を付けたので、擬似的に多角形の塗り潰しができます。
三角塗り潰しはsx,syを基点にdx1,dy1～dx2,dy2まで扇状に線を引くことで塗り潰しを行うため若干モアレが発生するため、気になる場合は座標をずらして上書きして消してください。
例えばx1,y1・x2,y2・x3,y3の3点なら、まずx1,y1・x2,y2～x3,y3で描画した後にx2,y2・x1,y1～x3,y3のように基点を入れ替えて描画するとモアレを軽減することができます。
※ver2.4からjsonオブジェクトをwebからダウンロードするというコマンドが追加されました。
大量のデータを扱う場合はそちらの方が簡単です。
コード
サイズが大きく手入力が現実的ではないため配信設定を行いました。
公式サイトで"install script"を押すと端末にダウンロードされます。
(str2numMapをsplit版に修正し、端末を傾けると画像が移動するように変更しました)
最終更新：2011年11月16日 16:09
