canvasとWebGLによるコンピュータ・グラフィックスの基礎

第２週 ２次元座標平面におけるＣＧ表現技法（１）（2014年 4月18日）

例題１：パスによる描画（サンプル）

例題２：円弧の描画（サンプル）

おまけ：スイカ（サンプル）

実習課題

課題#02：ある円に内接する正三角形と外接する正三角形を描画せよ。（サンプル）

制作例（提出確認）

• 12123349（ 2.09ep, 2.69ep）
• 12113623（ 2.41ep, 18.68ep）
• 12121016（ 0.00ep, 0.00ep）
• 12121612（ 5.07ep, 10.14ep）
• 12122583（ 5.71ep, 10.32ep）
• 12123587（ 2.41ep, 14.42ep）
• 12101028（ 2.32ep, 3.04ep）
• 12123826（18.89ep, 2.69ep）
• 12122161（ 3arcs!, 3arcs!）
• 12121098（ 1.46ep, 0.31ep）
• 12121630（ 0.00ep, 0.00ep）
• 12101028a（ 0.34ep）

参考資料

• おまけＡ（三角関数を使って...）
• おまけＢ（整形すると...）
• おまけＣ（ループが使用できる）

参考文献

CG理論

• コンピュータグラフィックス編集委員会 「コンピュータグラフィックス」 CG-ARTS協会（2006） ISBN:978-4-903474-00-7

JavaScript

• 山田祥寛 「JavaScript 本格入門」 技術評論社（2010） ISBN:978-4-7741-4466-5
• 河西朝雄 「ゼロからわかる JavaScript 超入門」 技術評論社（2010） ISBN:978-4-7741-4120-6
• 松崎澄芳 「かんたんプログラミング JavaScript」 技術評論社（2010） ISBN:978-4-7741-4125-1

canvas

• W3C, HTML Canvas 2D Context
• Steve Fulton and Jeff Fulton, HTML5 Canvas, Second Edition, O'Reilly (2013) ISBN:978-1-4493-3498-7
  安藤慶一（訳） 「HTML5 Canvas」 オライリー・ジャパン（2012） ISBN:978-4-87311-527-6
• 鈴木清安 「HTML5 CANVAS & CSS3 デザインガイド」 技術評論社（2012） ISBN:978-4-7741-4970-7

檀 裕也
dan@cc.matsuyama-u.ac.jp