RubyGems - sgl - Versions diffs - 0.4.0 → 1.0.0 - Mend

sgl 0.4.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

data/ChangeLog +254 -234
data/History.txt +6 -0
data/Manifest.txt +10 -0
data/Rakefile +27 -7
data/examples/cocoa1-basic.rb +14 -14
data/examples/cocoa10-transparent.rb +26 -26
data/examples/cocoa11-application.rb +13 -13
data/examples/cocoa2-draw.rb +23 -23
data/examples/cocoa3-affine.rb +29 -29
data/examples/cocoa4-font.rb +24 -24
data/examples/cocoa5-image.rb +22 -22
data/examples/cocoa6-sound.rb +24 -24
data/examples/cocoa7-movie.rb +40 -40
data/examples/cocoa8-movieoverlay.rb +42 -42
data/examples/cocoa9-streaming.rb +40 -40
data/examples/opengl1-basic.rb +14 -14
data/examples/opengl11-application.rb +13 -13
data/examples/opengl2-draw.rb +23 -23
data/examples/opengl3-affine.rb +29 -29
data/examples/sample1.rb +11 -11
data/examples/sample10.rb +16 -16
data/examples/sample11.rb +22 -22
data/examples/sample11a.rb +33 -33
data/examples/sample12.rb +30 -30
data/examples/sample12a.rb +35 -35
data/examples/sample13.rb +116 -116
data/examples/sample15.rb +24 -24
data/examples/sample16.rb +31 -31
data/examples/sample16a.rb +35 -35
data/examples/sample6.rb +18 -18
data/examples/sample7.rb +16 -16
data/examples/sample9.rb +20 -20
data/examples/testgl.rb +169 -169
data/lib/sgl/bass.rb +46 -46
data/lib/sgl/cocoa-app.rb +43 -43
data/lib/sgl/cocoa-color.rb +65 -65
data/lib/sgl/cocoa-draw.rb +72 -72
data/lib/sgl/cocoa-event.rb +229 -229
data/lib/sgl/cocoa-media.rb +144 -144
data/lib/sgl/cocoa-notuse.rb +493 -493
data/lib/sgl/cocoa-window.rb +203 -203
data/lib/sgl/cocoa.rb +8 -8
data/lib/sgl/opengl-app.rb +38 -38
data/lib/sgl/opengl-color.rb +44 -44
data/lib/sgl/opengl-draw.rb +260 -260
data/lib/sgl/opengl-event.rb +325 -325
data/lib/sgl/opengl-modules.rb +22 -22
data/lib/sgl/opengl-window.rb +224 -224
data/lib/sgl/opengl.rb +7 -7
data/lib/sgl/sgl-button.rb +135 -135
data/lib/sgl/sgl-client.rb +21 -21
data/lib/sgl/sgl-color.rb +68 -82
data/lib/sgl/sgl-connect.rb +9 -9
data/lib/sgl/sgl-server.rb +58 -58
data/lib/sgl/sgl-spring.rb +216 -216
data/lib/sgl/version.rb +2 -2
data/scripts/lib-txt2html.rb +130 -0
data/scripts/txt2html +2 -63
data/spec/sgl_spec.rb +13 -0
data/spec/spec.opts +1 -0
data/spec/spec_helper.rb +1 -0
data/test/test_cocoa_app.rb +291 -291
data/test/test_module_ruby16.rb +30 -30
data/test/test_opengl_app.rb +147 -147
data/test/test_opengl_basic.rb +22 -22
data/test/test_opengl_fullscreen.rb +23 -23
data/test/test_opengl_novice.rb +35 -35
data/website/challenge1.html +91 -91
data/website/challenge1.txt +3 -3
data/website/challenge2.html +143 -144
data/website/challenge2.txt +13 -14
data/website/challenge3.html +66 -63
data/website/challenge3.txt +7 -7
data/website/cocoa.html +85 -88
data/website/cocoa.txt +2 -4
data/website/description.html +138 -138
data/website/description.txt +1 -1
data/website/exercise1.html +262 -264
data/website/exercise1.txt +58 -53
data/website/exercise2.html +241 -683
data/website/exercise2.txt +11 -427
data/website/exercise3.html +206 -0
data/website/exercise3.txt +155 -0
data/website/exercise4.html +198 -0
data/website/exercise4.txt +151 -0
data/website/exercise5.html +162 -0
data/website/exercise5.txt +113 -0
data/website/exhibition.html +84 -84
data/website/howto.html +146 -134
data/website/howto.txt +9 -0
data/website/index.html +178 -178
data/website/index.txt +20 -19
data/website/sound.html +141 -141
metadata +16 -3

data/website/exercise1.txt CHANGED Viewed

@@ -1,16 +1,9 @@
-h1. 練習問題 1〜10
+h1. 練習問題1
-h2. 課題1 基本 (window, background, color, line)
-h3. 課題1A 一本の線を描くプログラムを作る
-h3. 課題1B ある考えの元に3本の線を描くプログラムを作る
-h3. 課題1C 5本以下の直線で「変化」を表現するプログラムを作る
-h3. 課題1D 10本以下の直線で「ハーモニー（調和）」を表現するプログラムを作る
+h2. 課題1: 一本の線を描く
 <pre syntax="ruby">
+# kadai1.rb
 require 'sgl'         # プログラムの最初に必ず書く必要がある
 window 100, 100       # windowを開く
 background 0          # 背景を黒にする
@@ -19,22 +12,38 @@ line 0, 0, 100, 100   # 左下から右上に線を描く
 wait                  # そのまま待つ
 </pre>
-h3. 半透明色の使い方
+h2. 課題2: ある考えの元に3本の線を描く
 <pre syntax="ruby">
+# kadai2.rb
 require 'sgl'
-window 100,100
-color 100, 0, 0       # 赤
-rect 10,10,70,70      # 四角
-color 0,0,100,50      # 半透明の青
-rect 30,30,90,90      # 四角を重ねてかく
+window 100, 100
+background 0
+color 100
+line 0, 0, 100, 100
+line 0, 0, 100,  50
+line 0, 0, 100,  25
 wait
 </pre>
-h2. 課題2A
+h2. 課題3: 5本以下の直線で「変化」を表現する
+<pre syntax="ruby">
+# kadai3.rb
+# 考えてみましょう．
+</pre>
+h2. 課題4: 10本以下の直線で「ハーモニー(調和)」を表現する
+<pre syntax="ruby">
+# kadai4.rb
+# 考えてみましょう．
+</pre>
+h2. 課題5: 一つの変数を使って2本の直線の構成をコントロールする
-一つの変数を使って2本の直線の構成をコントロールするプログラムを作る．
 <pre syntax="ruby">
+# kadai5.rb
 require 'sgl'
 window 100, 100
 a = 50
@@ -43,10 +52,10 @@ line 100, 0, 50, a
 wait
 </pre>
-h2. 課題3A 繰り返し (for a in 0..100; end)
+h2. 課題6: 繰り返しを使った形態を描く
-繰り返しを使った形態を描く．
 <pre syntax="ruby">
+# kadai6.rb
 require 'sgl'
 window 100, 100
 for a in 20..80
@@ -56,10 +65,10 @@ end
 wait
 </pre>
-h2. 課題4A 計算 (+ - * /)
+h2. 課題7: 計算を使った形態を描く
-計算を使った形態をかくプログラムを作る．
 <pre syntax="ruby">
+# kadai7.rb
 require 'sgl'
 window 100, 100
 for a in 20..40
@@ -69,11 +78,23 @@ end
 wait
 </pre>
-h2. 課題6A kadai6a.rb
+h2. 課題8: 半透明を使った形態を描く
-h3. 入れ子構造 6A 格子状にひろがる形態を作る．
 <pre syntax="ruby">
-# kadai6a.rb
+# kadai8.rb
+require 'sgl'
+window 100,100
+color 100, 0, 0       # 赤
+rect 10,10,70,70      # 四角
+color 0,0,100,50      # 半透明の青
+rect 30,30,90,90      # 四角を重ねてかく
+wait
+</pre>
+h2. 課題9: 入れ子構造，格子状にひろがる形態を作る
+<pre syntax="ruby">
+# kadai9.rb
 require 'sgl'
 window 200,200
 for a in 0..10
@@ -85,11 +106,10 @@ end
 wait
 </pre>
-h2. 課題7A kadai7a.rb
+h2. 課題10: 条件分岐，画面の左右で違う形態を描く
-h3. 質問 (if 50 &lt; a; end) 7A 画面の左右で違う形態を描く．
 <pre syntax="ruby">
-# kadai7a.rb
+# kadai10.rb
 require 'sgl'
 window 200,200
 for a in 0..200
@@ -103,12 +123,10 @@ end
 wait
 </pre>
-h2. 課題8A
+h2. 課題11: 自分なりの命令を作り，それを用いた形態を描く
-h3. defを使って自分なりのコマンドを作り，それを用いた形態を描く．
-ファイル名 kadai8a.rb
 <pre syntax="ruby">
+# kadai11.rb
 require 'sgl'
 window 100,100
 background 100
@@ -128,16 +146,14 @@ my_rect(60, 60, 80, 90, 70, 90)
 wait
 </pre>
-defというコマンドで関数を定義する．自分がよく使う形，例えば枠付きの塗
-りつぶされた四角形を定義する．defの後に続くのが関数名である．アルファ
-ベットの小文字から始まっている必要がある．
-h2. 課題9A
+defというコマンドで命令を定義する．ここでは，枠付きの塗りつぶされた四
+角形を定義している．defの後に続くのが命令の名前となる．アルファベット
+の小文字から始まっている必要がある．
-h3. flipを使ってアニメーションを作る．
+h2. 課題12: flipを使ってアニメーションを作る
-ファイル名 kadai9a.rb
 <pre syntax="ruby">
+# kadai12.rb
 require 'sgl'
 window 100,100
 loop do
@@ -149,17 +165,15 @@ end
 wait
 </pre>
-flipというところで、ちょうど紙をめくるように次の画面を表示させている。
+flipというところで，ちょうど紙をめくるように次の画面を表示させている．
 @loop do 〜〜〜 end@ で，その間を無限に繰り返す．
-h2. 課題10A
-h3. HSVによる色指定を使って，自分なりの色グラデーションを作る。
+h2. 課題13: HSVによる色指定を使り，自分なりの色グラデーションを作る
 静止画でもアニメーションでもよい．(colorHSV, backgroundHSV)
-ファイル名 kadai10a.rb
 <pre syntax="ruby">
+# kadai13.rb
 require 'sgl'
 window 100,100
 background 100
@@ -181,12 +195,3 @@ wait
 * 4番目のパラメーターを使って，透明度を設定することもできる．
 * backgroundHSVというコマンドもある．
-h2. 課題の注意点
-課題はいずれもwindowサイズなどは自由．課題例は100,100のサイズになって
-いるが，より大きいwindowサイズを選択してもよい。
-ファイル名は必ず指定のものにし，Z:に保存する．指定のファイル名のファイ
-ルが保存されているかどうかで課題提出を判定する．ファイル名が違う場合は
-提出してないことになってしまうので，注意する．

data/website/exercise2.html CHANGED Viewed

@@ -1,683 +1,241 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-  <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title>
-      練習問題 11〜21
-  </title>
-  <script src="javascripts/rounded_corners_lite.inc.js" type="text/javascript"></script>
-<style>
-</style>
-  <script type="text/javascript">
-    window.onload = function() {
-      settings = {
-          tl: { radius: 10 },
-          tr: { radius: 10 },
-          bl: { radius: 10 },
-          br: { radius: 10 },
-          antiAlias: true,
-          autoPad: true,
-          validTags: ["div"]
-      }
-      var versionBox = new curvyCorners(settings, document.getElementById("version"));
-      versionBox.applyCornersToAll();
-    }
-  </script>
-</head>
-<body>
-<div id="main">
-    <h1>練習問題 11〜21</h1>
-    <div id="version" class="clickable" onclick='document.location = "http://rubyforge.org/projects/sgl"; return false'>
-      <p>Get Version</p>
-      <a href="http://rubyforge.org/projects/sgl" class="numbers">0.4.0</a>
-    </div>
-    <h2>課題15 マウスのボタンが押された時に</h2>
-	<h2>課題16 円の描き方</h2>
-	<h2>課題18 三次元</h2>
-	<h2>課題19 速度</h2>
-	<h2>課題20 キーボードからの入力</h2>
-	<h2>課題21 配列の使い方</h2>
-	<h2>課題11A マウスの位置に反応する形</h2>
-<pre syntax="ruby">
-require 'sgl'
-window 200,200
-loop do
-  x = mouseX
-  y = mouseY
-  rect x-5, y-5, x+5, y+5
-  flip
-end
-</pre>
-	<p>mouseXとmouseYでマウス位置を取得する．rectで四角形を描画する．</p>
-	<p>rectの前に<code>color x, y, 0</code>をいれてみる．</p>
-rectの後に下記をいれてみる．
-<pre syntax="ruby">
-line   0,   0, x, y
-line 200,   0, x, y
-line   0, 200, x, y
-line 200, 200, x, y
-</pre>
-	<h2>課題12A 複雑な形の描画</h2>
-<pre syntax="ruby">
-require 'sgl'
-window -200, -200, 200, 200
-beginObj(POLYGON)
-vertex 60, 90
-vertex -120, 60
-vertex -90, -90
-vertex 120, -90
-endObj
-wait
-</pre>
-	<p><code>window -200, -200, 200, 200</code>のようにして四つの値を指定できる．
-beginObjとendObjではさまれた領域で形を描く．</p>
-<pre syntax="ruby">
-beginObj(POLYGON)
-color 100, 0, 0, 100
-vertex 60, 90
-color 0, 100, 0, 100
-vertex -120, 60
-color 0, 0, 100, 100
-vertex -90, -90
-color 100, 100, 0, 100
-vertex 120, -90
-endObj
-</pre>
-	<p>頂点ごとに色を指定できる．</p>
-<pre syntax="ruby">
-beginObj(POLYGON)
-color 100, 0, 0, 0
-vertex 60, 90
-color 0, 100, 0, 100
-vertex -120, 60
-color 0, 0, 100, 100
-vertex -90, -90
-color 100, 100, 0, 0
-vertex 120, -90
-endObj
-</pre>
-	<p>頂点ごとに透明度も変えられる．</p>
-	<h2>課題13A スムースな線の描画</h2>
-<pre syntax="ruby">
-require 'sgl'
-useSmooth
-window -200, -200, 200, 200
-beginObj(LINE_LOOP)
-color 100, 0, 0, 100
-vertex 60, 90
-color 0, 100, 0, 50
-vertex -120, 60
-color 0, 0, 100, 50
-vertex -90, -90
-color 100, 100, 0, 100
-vertex 120, -90
-endObj
-wait
-</pre>
-	<p>windowの前にuseSmoothを指定することによって，アンチエイリアスを
-かけることができる．</p>
-	<p>beginObjの括弧の中は，<code>POLYGON</code>または<code>LINE_LOOP</code>を指定する．
-この二つがあればほぼ十分であるが，他に下記方法も指定できる．</p>
-	<p><span class="caps">LINES</span>, POINTS, <span class="caps">LINE</span>_STRIP, <span class="caps">LINE</span>_LOOP, <span class="caps">TRIANGLES</span>, TRIANGLE_STRIP,
-<span class="caps">TRIANGLE</span>_FAN, <span class="caps">QUADS</span>, QUAD_STRIP, <span class="caps">POLYGON</span>,</p>
-	<h2>課題14A 物体の移動</h2>
-<pre syntax="ruby">
-require 'sgl'
-useSmooth
-window -200, -200, 200, 200
-push
-translate 100, 0
-rotateZ 10
-scale 2
-rect -5, -5, 5, 5
-pop
-wait
-</pre>
-	<p>今回でてきた新しいコマンド，
-push, pop, translate, rotateZ, scaleを使って回転移動拡大縮小などができ
-るようになる．pushとpopで囲まれていることが非常に重要である．また襦袢
-として，translate, rotateZ, scaleの順番に指定することが重要．形を描く
-コマンドと，位置，回転角度などの指定を分離できる．</p>
-	<h2>課題15A ボタンが押されたその時に</h2>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 0
-  $x = 0
-  $y = 0
-end
-def onMouseDown(x, y)
-  $x = x
-  $y = y
-end
-def display
-  line 0, 0, $x, $y
-end
-mainloop
-</pre>
-	<p>いままではプログラムはかかれている順番通りに実行されるものだったが，こ
-こでは違う順序となっている．まず最初にコマンドを登録し，それが後に呼ば
-れて実行されることになる．このようにプログラムの実行順番が違う方式をこ
-れから採用する．</p>
-	<p>setup, onMouseDown, displayというコマンドを登録する．その後mainloopと
-いうコマンドを呼ぶ．このメインループの中で，全てのプログラムが実行され，
-適宜setup, displayが呼び出される．マウスのボタンが押された瞬間に，
-onMouseDownというコマンドが呼ばれる．</p>
-	<p>そのonMouseDownの前に，$xという$のついた変数がつかわれている．変数には
-それぞれ使える範囲というのもがあるのだが，通常は一つのコマンドの範囲内
-でしか使うことができなかった．しかし，$のついた変数であれば，プログラ
-ムが動いている間ずっと残る．プログラムの最初の部分で，<code>$x = 0</code>のように
-して，あらかじめなんらかの値を代入することで，変数を使うということを示
-す必要がある．</p>
-	<h2>課題16A 円</h2>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $x = 0
-  $y = 0
-end
-def onMouseDown(x, y)
-  $x = x
-  $y = y
-end
-def display
-  color 100, 0, 0
-  circle($x, $y, 100)
-end
-mainloop
-</pre>
-	<p>円を描く．マウスボタンを押すと，ボタンを押したところに移動する．
-プログラムの構造は課題15Aで導入された構造を使っている．</p>
-<pre syntax="ruby">
-def display
-  colorHSV 66, 100, 100, 30
-  circle($x, $y, 100, POLYGON)
-end
-</pre>
-	<p>塗り潰された円を描く．</p>
-<pre syntax="ruby">
-def display
-  colorHSV 33, 100, 100, 30
-  circle($x, $y, 100, POLYGON, 5)
-end
-</pre>
-	<p>五角形を描く．いままで円といってきたものは，実は正確には正32角形である．
-上記circle文の<code>5</code>のところを<code>32</code>にすると，普通の円と同じになる．</p>
-<pre syntax="ruby">
-def display
-  x = mouseX
-  y = mouseY
-  colorHSV 8, 100, 100, 50
-  circle(x, y, 100, POLYGON, 7)
-end
-</pre>
-	<p>マウスを押されないでもついてくるようにする．</p>
-	<h2>課題18A 3D</h2>
-<pre syntax="ruby">
-require 'sgl'
-window -200, -200, 200, 200
-push
-color 100, 0, 0
-translate 30, 40, 20
-rotateZ 10
-rotateY 20
-rotateX 30
-scale 20
-rect -5, -5, 5, 5
-pop
-wait
-</pre>
-	<p>課題14の物体の移動の例とほとんど同じだが，<code>translate 30, 40, 20</code>として
-三つの値を指定している点，<code>rotateZ</code>だけではなく，<code>rotateY</code> <code>rotateX</code>を
-使っている点が違う．三つめの値はZ軸，奥行きである．手前が正の値，奥の
-ほうが負の値となる．vertexを使った形の描画は，三つの値を指定することで
-3Dに対応できる．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-end
-def display
-  x = mouseX
-  y = mouseY
-  push
-  color 100, 0, 0
-  translate x, y, 0
-  rotateX x
-  rotateY y
-  scale 20
-  rect -5, -5, 5, 5
-  pop
-end
-mainloop
-</pre>
-	<p>マウスの移動と組み合わせることもできる．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $pos = []             # 中身が空の配列を用意する．
-end
-def display
-  x = mouseX
-  y = mouseY
-  $pos &lt;&lt; [x, y]     # 配列に現在のマウスの位置を追加する．
-  $pos.each {|pos|   # 配列の各々の要素について，{}の中身を実行する．
-                     # その各々の要素は，posという変数に入る．
-    x = pos[0]
-    y = pos[1]
-    push
-    colorHSV 0, 100, 100, 10
-    translate x, y, 0
-    rotateX x
-    rotateY y
-    scale 20
-    rect -5, -5, 5, 5
-    pop
-  }
-  if 10 &lt; $pos.length    # 配列がたまりすぎた場合は，先頭から順に捨てていく．
-    $pos.shift
-  end
-end
-mainloop
-</pre>
-	<p>配列の使用と組み合わせてみている．</p>
-	<h2>課題19A 速度</h2>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $x = 0
-  $y = 0
-end
-def display
-  x = mouseX
-  y = mouseY
-  speed = 20.0
-  vx = (x - $x)/speed
-  vy = (y - $y)/speed
-  $x = $x + vx
-  $y = $y + vy
-  color 100, 0, 0
-  circle($x, $y, 50, POLYGON)
-end
-mainloop
-</pre>
-	<p>物の位置に加え，速度を導入する．円がマウスのところに近付こうとする．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $pos=[]
-  for i in 0..9
-    $pos[i] = [-200 + i * 40, 0]     # 最初の位置を指定する．
-  end
-end
-def display
-  x = mouseX
-  y = mouseY
-  speed = 10.0
-  for i in 0..9
-    pos = $pos[i]
-    vx = (x - pos[0]) / speed     # マウスに吸い寄せられる速度
-    vy = (y - pos[1]) / speed
-    speed += 2.0                  # 円によって速度が異なるようにする．
-    pos[0] = pos[0] + vx          # マウスに吸い寄せられた位置
-    pos[1] = pos[1] + vy
-    color 100, 0, 0, 10
-    circle(pos[0], pos[1], 50, POLYGON)
-  end
-end
-mainloop
-</pre>
-	<p>配列の使い方を説明する．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $pos=[]
-  $orgpos=[]
-  for i in 0..19
-    $pos[i]    = [-200 + i * 40, 0]     # 最初の位置を指定する．
-    $orgpos[i] = [-200 + i * 40, 0]     # もう一つ別の配列にも保存する．
-  end
-end
-def display
-  x = mouseX
-  y = mouseY
-  for i in 0..19
-    pos    = $pos[i]     # 現在の円の位置
-    orgpos = $orgpos[i]  # 元々の位置
-    if mouseDown         # ボタンが押されているときだけマウスに吸いつく．
-      vx = x - pos[0]
-      vy = y - pos[1]
-      mag = Math.sqrt(vx * vx + vy * vy)
-      mag = mag / 40
-      mag = mag * mag + 1
-      vx = vx / mag
-      vy = vy / mag
-      pos[0] = pos[0] + vx
-      pos[1] = pos[1] + vy
-    end
-    speed = 3.0
-    vx2 = (orgpos[0] - pos[0]) / speed     # 元々の位置に吸い寄せられる速度
-    vy2 = (orgpos[1] - pos[1]) / speed
-    pos[0] = pos[0] + vx2                  # マウスに吸い寄せられた位置
-    pos[1] = pos[1] + vy2
-    color 100, 0, 0, 30
-    circle(pos[0], pos[1], 50, POLYGON)
-  end
-end
-mainloop
-</pre>
-	<p>マウスにすいよせられる円．マウスボタンを押しているときだけ反応する．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $xpos = []    # 配列を準備する．
-  $ypos = []
-  for i in 0..9
-    $xpos[i] = -200 + i * 40
-    $ypos[i] = 0
-  end
-end
-def display
-  x = mouseX
-  y = mouseY
-  speed = 10.0
-  for i in 0..9
-    vx = (x - $xpos[i]) / speed     # マウスに吸い寄せられる速度
-    vy = (y - $ypos[i]) / speed
-    speed += 2.0                  # 円によって速度が異なるようにする．
-    $xpos[i] = $xpos[i] + vx                  # マウスに吸い寄せられた位置
-    $ypos[i] = $ypos[i] + vy
-    color 100, 0, 0, 10
-    circle($xpos[i], $ypos[i], 50, POLYGON)
-  end
-end
-mainloop
-</pre>
-	<p>配列の使い方を変更した．</p>
-	<h2>課題20A キーボードからの入力の仕方</h2>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window 200, 200
-  background 100
-  $key = 0
-end
-def onKeyDown(key)
-  p key
-  $key = key
-end
-def display
-  colorHSV $key, 100, 100
-  line $key, 0, $key, 200
-end
-mainloop
-</pre>
-	<p>アルファベットのキーを押すと，keyに1〜26の値が入る．Aが1，Zが26という
-関係になる．</p>
-	<p>それら以外のキーを押したときにどのようなキーコードになるかは，
-<code>c:\ruby\doc\rubysdl\rubysdl_const_list.txt</code> に記述されている．
-数字の0が押されたときは，<code>SDL::Key::K0</code>という値となる．</p>
-	<h2>課題21A 配列の使い方return</h2>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $pos = []             # 中身が空の配列を用意する．
-  for a in 0..10        # 配列の要素それぞれについて繰り返す．
-    $pos[a] = 0         # 中身に全部0を入れておく．
-  end
-  $index = 0            # 現在配列のどこの部分を指しているかを示す変数である．
-end
-def display
-  $pos[$index] = mouseX # 配列の$indexの示す個所に現在のマウスのx座標を入れる．
-  for a in 0..10        # 配列の要素それぞれについて繰り返します．
-    x = $pos[a]
-    color 0
-    line x, -100, x, 100 # 縦線を描く．
-  end
-  $index = $index + 1   # 現在を示す$indexを次の値のところにセットする．
-  if 10 &lt; $index        # $indexが配列の大きさを越えたら0にセットしなおす．
-    $index = 0
-  end
-  p $pos                # $posという配列の中身を表示する．
-end
-mainloop
-</pre>
-	<p>配列の使い方の基本形である．縦線が，マウスの動きを追って動く．つまりマ
-ウスのx座標だけを保存している．x座標，y座標を保存するとどうなるか，実
-験する．</p>
-<pre syntax="ruby">
-require 'sgl'
-def setup
-  window -200, -200, 200, 200
-  background 100
-  $xpos = []            # 中身が空の配列を，x座標，y座標について用意する．
-  $ypos = []
-  for a in 0..10        # 配列の要素それぞれについて繰り返す．
-    $xpos[a] = 0
-    $ypos[a] = 0
-  end
-  $index = 0            # 現在配列のどこの部分を指しているかを示す変数．
-end
-def display
-  $xpos[$index] = mouseX
-  $ypos[$index] = mouseY
-  for a in 0..10        # 配列の要素それぞれについて繰り返す．
-    x = $xpos[a]
-    y = $ypos[a]
-    color 0
-    circle x, y, 50
-  end
-  $index = $index + 1   # 現在を示す$indexを，次の値のところにセットする．
-  if 10 &lt; $index        # $indexが配列の最大を越えたら，0にセットしなおす．
-    $index = 0
-  end
-  p $xpos
-  p $ypos
-end
-mainloop
-</pre>
-	<p>このように値を保存する配列を増やしていくようにする．</p>
-    <p class="coda">
-      20th June 2007<br>
-    </p>
-</div>
-<!-- insert site tracking codes here, like Google Urchin -->
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>
+      練習問題2
+  </title>
+  <script src="javascripts/rounded_corners_lite.inc.js" type="text/javascript"></script>
+<style>
+</style>
+  <script type="text/javascript">
+    window.onload = function() {
+      settings = {
+          tl: { radius: 10 },
+          tr: { radius: 10 },
+          bl: { radius: 10 },
+          br: { radius: 10 },
+          antiAlias: true,
+          autoPad: true,
+          validTags: ["div"]
+      }
+      var versionBox = new curvyCorners(settings, document.getElementById("version"));
+      versionBox.applyCornersToAll();
+    }
+  </script>
+</head>
+<body>
+<div id="main">
+    <h1>練習問題2</h1>
+    <div id="version" class="clickable" onclick='document.location = "http://rubyforge.org/projects/sgl"; return false'>
+      <p>Get Version</p>
+      <a href="http://rubyforge.org/projects/sgl" class="numbers">1.0.0</a>
+    </div>
+    <h2>課題14: マウスの位置に反応する形</h2>
+<pre syntax="ruby">
+# kadai14.rb
+require 'sgl'
+window 200,200
+loop do
+  x = mouseX
+  y = mouseY
+  rect x-5, y-5, x+5, y+5
+  flip
+end
+</pre>
+	<p>mouseXとmouseYでマウス位置を取得する．rectで四角形を描画する．</p>
+	<p>rectの前に<code>color x, y, 0</code>をいれてみる．</p>
+rectの後に下記をいれてみる．
+<pre syntax="ruby">
+line   0,   0, x, y
+line 200,   0, x, y
+line   0, 200, x, y
+line 200, 200, x, y
+</pre>
+	<h2>課題15: 複雑な形の描画</h2>
+<pre syntax="ruby">
+# kadai15.rb
+require 'sgl'
+window -200, -200, 200, 200
+beginObj(POLYGON)
+vertex 60, 90
+vertex -120, 60
+vertex -90, -90
+vertex 120, -90
+endObj
+wait
+</pre>
+	<p><code>window -200, -200, 200, 200</code>のようにして四つの値を指定できる．
+beginObjとendObjではさまれた領域で形を描く．</p>
+<pre syntax="ruby">
+beginObj(POLYGON)
+color 100, 0, 0, 100
+vertex 60, 90
+color 0, 100, 0, 100
+vertex -120, 60
+color 0, 0, 100, 100
+vertex -90, -90
+color 100, 100, 0, 100
+vertex 120, -90
+endObj
+</pre>
+	<p>頂点ごとに色を指定できる．</p>
+<pre syntax="ruby">
+beginObj(POLYGON)
+color 100, 0, 0, 0
+vertex 60, 90
+color 0, 100, 0, 100
+vertex -120, 60
+color 0, 0, 100, 100
+vertex -90, -90
+color 100, 100, 0, 0
+vertex 120, -90
+endObj
+</pre>
+	<p>頂点ごとに透明度も変えられる．</p>
+	<h2>課題16: スムースな線の描画</h2>
+<pre syntax="ruby">
+# kadai16.rb
+require 'sgl'
+useSmooth
+window -200, -200, 200, 200
+beginObj(LINE_LOOP)
+color 100, 0, 0, 100
+vertex 60, 90
+color 0, 100, 0, 50
+vertex -120, 60
+color 0, 0, 100, 50
+vertex -90, -90
+color 100, 100, 0, 100
+vertex 120, -90
+endObj
+wait
+</pre>
+	<p>windowの前にuseSmoothを指定することによって，アンチエイリアスを
+かけることができる．</p>
+	<p>beginObjの括弧の中は，<code>POLYGON</code>または<code>LINE_LOOP</code>を指定する．
+この二つがあればほぼ十分であるが，他に下記方法も指定できる．</p>
+	<p><span class="caps">LINES</span>, POINTS, <span class="caps">LINE</span>_STRIP, <span class="caps">LINE</span>_LOOP, <span class="caps">TRIANGLES</span>, TRIANGLE_STRIP,
+<span class="caps">TRIANGLE</span>_FAN, <span class="caps">QUADS</span>, QUAD_STRIP, <span class="caps">POLYGON</span>,</p>
+	<h2>課題17: 物体の移動</h2>
+<pre syntax="ruby">
+# kadai17.rb
+require 'sgl'
+useSmooth
+window -200, -200, 200, 200
+push
+translate 100, 0
+rotateZ 10
+scale 2
+rect -5, -5, 5, 5
+pop
+wait
+</pre>
+	<p>今回でてきた新しいコマンド，
+push, pop, translate, rotateZ, scaleを使って回転移動拡大縮小などができ
+るようになる．pushとpopで囲まれていることが非常に重要である．また襦袢
+として，translate, rotateZ, scaleの順番に指定することが重要．形を描く
+コマンドと，位置，回転角度などの指定を分離できる．</p>
+	<h2>課題18: ボタンが押された時に</h2>
+<pre syntax="ruby">
+# kadai18.rb
+require 'sgl'
+def setup
+  window -200, -200, 200, 200
+  background 0
+  $x = 0
+  $y = 0
+end
+def onMouseDown(x, y)
+  $x = x
+  $y = y
+end
+def display
+  line 0, 0, $x, $y
+end
+mainloop
+</pre>
+	<p>いままではプログラムはかかれている順番通りに実行されるものだったが，こ
+こでは違う順序となっている．まず最初にコマンドを登録し，それが後に呼ば
+れて実行されることになる．このようにプログラムの実行順番が違う方式をこ
+れから採用する．</p>
+	<p>setup, onMouseDown, displayというコマンドを登録する．その後mainloopと
+いうコマンドを呼ぶ．このメインループの中で，全てのプログラムが実行され，
+適宜setup, displayが呼び出される．マウスのボタンが押された瞬間に，
+onMouseDownというコマンドが呼ばれる．</p>
+	<p>そのonMouseDownの前に，$xという$のついた変数がつかわれている．変数には
+それぞれ使える範囲というのもがあるのだが，通常は一つのコマンドの範囲内
+でしか使うことができなかった．しかし，$のついた変数であれば，プログラ
+ムが動いている間ずっと残る．プログラムの最初の部分で，<code>$x = 0</code>のように
+して，あらかじめなんらかの値を代入することで，変数を使うということを示
+す必要がある．</p>
+    <p class="coda">
+      30th June 2007<br>
+    </p>
+</div>
+<!-- insert site tracking codes here, like Google Urchin -->
+</body>
+</html>