Utah teapot

ＣＧ分野で標準的に使用されるUtah Teapotの種々の描画(ゲームエンジンenchant.jsで開発したもの) 2014/2/10 by T. Nishita

この頁は、ＨＴＭＬ５とJavascriptが必要です(htmファイルのみで他のライブラリは不要で、アニメーションになります）。
Utah teapotのデータをパーティクルで表現しています。マウスを近づけると粒子が反発し、大きくなります。（ただタッチパネルにはまだ未対応です。）

ゲームエンジンenchant.jsを利用したUtah tpotの描画　

粒子表現のUtah Teapot

BoncingBallTpot 　粒子が壁に反射　（３次元） ○
BouncingTpot 粒子が壁に反射(2次元） ○
flockingTpot粒子が鳥（虫）のように群れで動く ○
tpotParticle 粒子間引力で移動　 ○
tpotBezierDot 粒子描画（単にクリックする毎輪郭を部分的に描画）
PingPongTpot 球がPingPongのようにで移動　
doodlepot 粒子がマウスで移動　 ○
tpotballs.htm 粒子でポット表現(ﾏｳｽで移動）　本ページ

線画表現のUtah Teapot

tpotBezierNis　輪郭のBezier曲線描画(クリック毎に曲線描画）
tpotBezier　制御多角形表示
TpotIsoPramametric　等パラメータ曲線描画(ワイヤーフレーム） ○

Teapotの画像

6kakuPotImages 6角形でpot画像を敷き詰める
circlePotImg 円盤上にpot画像を配置(中心に拡大図）
BluiTpotimages Pot画像集
tpotcollection ティーポットの収集写真の部分拡大

Bezier Clipping法の例

SolutionBezFunc 3次ベジエ曲線で表現される多項式の解
CurveLineInt 3次ベジエ曲線と線分の交差
CurvesLinesInt 　複数のベジエ曲線と線分の交差
3DcurvesLineInt 　複数の3次ベジエ曲線の投影曲線と線分の交差
SolutionPolygonalFunc 高次ベジエ曲線で表現される多項式の解
3DcurvesLineInt 　複数の3次ベジエ曲線の投影曲線と線分の交差+交点の平面投影
curvesLineCut 　複数の3次ベジエ曲線の投影曲線と線分の交点抽出し曲線カット+交点の低面へ投影
BezierSurface/plane intersection 3次ベジエ曲面の等パラメータ曲線と平面との交点計算

参考； tpotCG集、 Javaでのtpot表示（最新のJavaでは動作しない）

以下「play」ボタンを押して実行してください。「stop」ボタンを押してから次のプログラムを実行してください(複数実行を避ける）。

Ｂｅｚｉｅｒ曲面の等パラメータ曲線表示；マウスドラッグで見る方向が変化
Utah teapotを構成する球(3次元的に分布）の落下とバウンス
ポットの輪郭上の粒子（虫）が互いの間隔を監視して動き回る(ﾏｳｽで餌をやる）
ポットの輪郭上の粒子が粒子間の引力で動く(ﾏｳｽで変化させられる）
ポットの輪郭上の半透明円盤の落下とバウンス
球がピンポンのように跳ね回るポットの輪郭上の円盤がマウスに反発して動く
クリック毎にポットの輪郭を構成するＢｅｚｉｅｒ曲線を描画
Ｂｅｚｉｅｒ曲面の制御多角形の描画