タイトル

• easy Tangram editor (Win)
• javade Tangram editor
• paTan (Chrome/Firefox/Edge)

lab.

easy Tangram editor 2.13b

---

フリーウェア

　easy Tangram editorは、Windows上でタングラムをはじめとしたさまざまなシルエットパズルの問題を気軽に作ることができるように設計されたタングラム・エディタです。タングラムの他にもユークリッドや魔法の卵など、現在30種類のピースが扱えるようになっており、形状ファイルさえ作ればオリジナルのピースを扱うこともできます。

　ピースの移動・回転・裏返しは全てマウスで行ない、クリック1つで角度を45度単位に自動調節したりマウスを左右に振ることで裏返したりと、感覚的に操作できるように工夫してみました。
　もちろん、新しく作ったシルエットはまとめてファイルに保存することができます。またそういった「データ」としてだけではなく、クリップボードへ直に画像として描き出したり、Ａ４サイズに印刷できるカタログHTMLを出力することもできます。

ダウンロード
eTe213b051002.zip(629kbytes) README.TXT
最終版 (Borland C++ Builder 5用プロジェクトが同梱されています)

はじめに
　javade Tangram editorは、タングラムをはじめとしたシルエットパズルをJavaで手軽に扱えるようにと設計されたタングラムクラスと、そのサービスクラスの端的な使用例です。タングラムエディタとしてのねらいはeasy Tangram editorと同じく、シルエットパズルの問題を気軽に作って保存することにあります。Javaで動いているため、日本語版WindowsではないOSでも動かせたり、曲線のピースがきれいに描画できるようになっています。現在は、easy Tangram editorのデータファイルとは互換性はありませんが、作った問題集は、パズルのピースの情報とセットでXMLベースのファイルに保存することができます。

実行の前に
javade Tangram editorを実行するにはJavaが必要です。jte.jarが実行できない場合は、こちらなどからJava8をダウンロード・インストールして下さい。

操作方法
　ピースの動かし方だけは少し変わっていますので、説明します。
操作としては、「ピースを選ぶ」→「動かす」→「固定」の流れが基本となります。
以下には全ての操作を説明しますが、はじめはアンダーラインの付いた項目のあたりを読んでください。

まず、ピースが一つも選択されていないときは…。

ピースを選択したあとは…。

jteファイルについて
　問題集としてリストしたシルエットは、ひとつのファイル(*.jte)に保存されます。
　ファイルには、ピースセットの情報と、問題集の各シルエットの題名やピース配置がXMLで記述されています。XMLというのは、データの意味を一緒に書き込んでおけるテキストの書き方のひとつです。ちなみに、問題のシルエットが１コも書かれていない場合でも、ピースセットを読み込むことが出来ます。
　ピースセットの書き方については、自分自身のメモのためにも、以下に簡単な例を挙げておきます。緑字は注釈なので、実際には不要です。

<?xml version="1.0" encoding="UTF-8" ?><!-- テキストエディタがUTF-8を扱えない場合、
                                            WindowsならencodingをShift_JISにする -->
<jte format="0.0">                     <!-- フォーマットはしばらく0.0 -->
  <pieceset name="Sample" num="3">     <!-- piecesetのnameはローマ字で書く
                                            numはパズルに使うピースの数 -->
    <localname iso3language="jpn" name="サンプル"/><!-- 和名の指定、なければ無くても良い -->

    <!-- geomに1つ分のピース形状を書く
         ピースの順番やidは適当でよいが、idは重複しないようにする
         まずは簡単そうな中央の正方形を定義してみる -->
    <geom id="Sqr">
      <p kind="origin">40 40</p><!-- ピースの中心座標を指定 -->
      <p kind="moveTo">0 0</p>  <!-- 最初の頂点 -->
      <p kind="lineTo">0 80</p> <!-- 次の頂点、以下同じ -->
      <p kind="lineTo">80 80</p>
      <p kind="lineTo">80 0</p>
      <p kind="lineTo">0 0</p>  <!-- 最初の頂点に戻っておしまい -->
    </geom>                     <!-- これで正方形"Sqr"が定義できた -->

    <!-- 次は半円 -->
    <geom id="Hmn">
      <p kind="origin">16 40</p><!-- ピースの中心 -->
      <p kind="moveTo">0 0</p>  <!--最初の頂点 -->
      <p kind="lineTo">0 80</p> <!--次の頂点、この次が少し難しい -->
      <p kind="curveTo">21.9433508141945 80 40 61.9433508141945 40 40</p>
      <!-- curveToは3次ベジェ曲線で、2つの制御点と終点の座標を指定して、円弧の下半分を表す
           円弧については、あとでもう少し補足します -->
      <p kind="curveTo">40 18.0566491858055 21.9433508141945 0 0 0</p>
      <!-- 円弧の上半分 -->
    </geom>

    <!-- 最後にピースの初期配置を書く
         silhouetteのnameには、折角なのでピースセットの簡単な紹介を書いておく

         内容は1行が1ピースに対応していて
         1つのピースについては、id  x  y  rad  flip(1 or -1)を書く
         ピースの順番は特に気にしない -->
    <silhouette name="jte sample piece-set">
      Hmn -56 0 0 -1
      Sqr 0 0 0 1
      Hmn 56 0 0 1
    </silhouette>
    <!-- 普通は、座標と角度は計算しにくいので
         はじめは0にしておいて、あとで保存したシルエットから適当に持ってくる -->

  </pieceset>
  <!-- 以上がピースセット -->

</jte>
<!-- おしまい -->
	

　円弧については、今のところ手計算で3次ベジェ曲線(curveTo)で近似するしか方法がありません。中心角が90度以内となるように円弧を分割しておいて、下の図のように制御点を与えれば、ほぼ正確な円弧が描けます。

この近似は以下を参考にさせていただきました。
http://www.spaceroots.org/documents/ellipse/elliptical-arc.pdf

素材について
　javade Tangram editorで使っているアイコンのほとんどは、FAMFAMFAMさんのSILK ICONS(Creative Commons Licenseの素材)からいただいています。

Javaにまつわる情報

• jTans…オープンソースタングラムの草分けgTansのjava版
  
• Apuzzle…原理的にXMLベースで読み書きできる仕組みのコンパクトなjavaシルエットパズル
  
• JPeces…Piecesのjava版。シルエット集は新しめのものも取り入れた一大コレクション
  

メモφ(.. )
　参加できるタイプのタングラム。

• TANGRAM MAN…キーワード管理によるタングラムシルエットの一大データベース
  
• le Tangram…FLASHのインターフェースが軽快な、タングラムシルエットのデータベース
  
• Tanzzle…シルエットを自動生成できる独自のエディタ。メールで投稿できる
  
• Webデザインと私…他の人と同じタングラムを共有できる
  

paTan

---

Webアプリケーション