sgl 0.3.1 → 0.4.0

data/website/exercise2.txt

@@ -0,0 +1,597 @@
+h1. 練習問題 11〜21
+
+h2. 課題15 マウスのボタンが押された時に
+
+h2. 課題16 円の描き方
+
+h2. 課題18 三次元
+
+h2. 課題19 速度
+
+h2. 課題20 キーボードからの入力
+
+h2. 課題21 配列の使い方
+
+h2. 課題11A マウスの位置に反応する形
+
+<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>
+
+mouseXとmouseYでマウス位置を取得する．rectで四角形を描画する．
+
+rectの前に@color x, y, 0@をいれてみる．
+
+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 複雑な形の描画
+
+<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>
+
+@window -200, -200, 200, 200@のようにして四つの値を指定できる．
+beginObjとendObjではさまれた領域で形を描く．
+
+<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>
+
+頂点ごとに色を指定できる．
+
+<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>
+
+頂点ごとに透明度も変えられる．
+
+h2. 課題13A スムースな線の描画
+
+<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>
+
+windowの前にuseSmoothを指定することによって，アンチエイリアスを
+かけることができる．
+
+beginObjの括弧の中は，@POLYGON@または@LINE_LOOP@を指定する．
+この二つがあればほぼ十分であるが，他に下記方法も指定できる．
+
+LINES, POINTS, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP,
+TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON,
+
+h2. 課題14A 物体の移動
+
+<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>
+
+今回でてきた新しいコマンド，
+push, pop, translate, rotateZ, scaleを使って回転移動拡大縮小などができ
+るようになる．pushとpopで囲まれていることが非常に重要である．また襦袢
+として，translate, rotateZ, scaleの順番に指定することが重要．形を描く
+コマンドと，位置，回転角度などの指定を分離できる．
+
+h2. 課題15A ボタンが押されたその時に
+
+<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>
+
+いままではプログラムはかかれている順番通りに実行されるものだったが，こ
+こでは違う順序となっている．まず最初にコマンドを登録し，それが後に呼ば
+れて実行されることになる．このようにプログラムの実行順番が違う方式をこ
+れから採用する．
+
+setup, onMouseDown, displayというコマンドを登録する．その後mainloopと
+いうコマンドを呼ぶ．このメインループの中で，全てのプログラムが実行され，
+適宜setup, displayが呼び出される．マウスのボタンが押された瞬間に，
+onMouseDownというコマンドが呼ばれる．
+
+そのonMouseDownの前に，$xという$のついた変数がつかわれている．変数には
+それぞれ使える範囲というのもがあるのだが，通常は一つのコマンドの範囲内
+でしか使うことができなかった．しかし，$のついた変数であれば，プログラ
+ムが動いている間ずっと残る．プログラムの最初の部分で，@$x = 0@のように
+して，あらかじめなんらかの値を代入することで，変数を使うということを示
+す必要がある．
+
+h2. 課題16A 円
+
+<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>
+
+円を描く．マウスボタンを押すと，ボタンを押したところに移動する．
+プログラムの構造は課題15Aで導入された構造を使っている．
+
+<pre syntax="ruby">
+def display
+  colorHSV 66, 100, 100, 30
+  circle($x, $y, 100, POLYGON)
+end
+</pre>
+
+塗り潰された円を描く．
+
+<pre syntax="ruby">
+def display
+  colorHSV 33, 100, 100, 30
+  circle($x, $y, 100, POLYGON, 5)
+end
+</pre>
+
+五角形を描く．いままで円といってきたものは，実は正確には正32角形である．
+上記circle文の@5@のところを@32@にすると，普通の円と同じになる．
+
+<pre syntax="ruby">
+def display
+  x = mouseX
+  y = mouseY
+  colorHSV 8, 100, 100, 50
+  circle(x, y, 100, POLYGON, 7)
+end
+</pre>
+
+マウスを押されないでもついてくるようにする．
+
+h2. 課題18A 3D
+
+<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>
+
+課題14の物体の移動の例とほとんど同じだが，@translate 30, 40, 20@として
+三つの値を指定している点，@rotateZ@だけではなく，@rotateY@ @rotateX@を
+使っている点が違う．三つめの値はZ軸，奥行きである．手前が正の値，奥の
+ほうが負の値となる．vertexを使った形の描画は，三つの値を指定することで
+3Dに対応できる．
+
+<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>
+
+マウスの移動と組み合わせることもできる．
+
+<pre syntax="ruby">
+require 'sgl'
+
+def setup
+  window -200, -200, 200, 200
+  background 100
+  $pos = []             # 中身が空の配列を用意する．
+end
+
+def display
+  x = mouseX
+  y = mouseY
+
+  $pos << [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 < $pos.length    # 配列がたまりすぎた場合は，先頭から順に捨てていく．
+    $pos.shift
+  end
+end
+
+mainloop
+</pre>
+
+配列の使用と組み合わせてみている．
+
+h2. 課題19A 速度
+
+<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>
+
+物の位置に加え，速度を導入する．円がマウスのところに近付こうとする．
+
+<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>
+
+配列の使い方を説明する．
+
+<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>
+
+マウスにすいよせられる円．マウスボタンを押しているときだけ反応する．
+
+<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>
+
+配列の使い方を変更した．
+
+h2. 課題20A キーボードからの入力の仕方
+
+<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>
+
+アルファベットのキーを押すと，keyに1〜26の値が入る．Aが1，Zが26という
+関係になる．
+
+それら以外のキーを押したときにどのようなキーコードになるかは，
+@c:\ruby\doc\rubysdl\rubysdl_const_list.txt@ に記述されている．
+数字の0が押されたときは，@SDL::Key::K0@という値となる．
+
+h2. 課題21A 配列の使い方return
+
+<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 < $index        # $indexが配列の大きさを越えたら0にセットしなおす．
+    $index = 0
+  end
+
+  p $pos                # $posという配列の中身を表示する．
+end
+
+mainloop
+</pre>
+
+配列の使い方の基本形である．縦線が，マウスの動きを追って動く．つまりマ
+ウスのx座標だけを保存している．x座標，y座標を保存するとどうなるか，実
+験する．
+
+<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 < $index        # $indexが配列の最大を越えたら，0にセットしなおす．
+    $index = 0
+  end
+
+  p $xpos
+  p $ypos
+end
+
+mainloop
+</pre>
+
+このように値を保存する配列を増やしていくようにする．

data/website/exhibition.html

@@ -0,0 +1,84 @@
+<!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>
+      作品合同展示
+  </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>作品合同展示</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>合同展示</h2>
+
+
+	<ul>
+	<li>展示場所，見せ方について考える．複数のプログラムを統合したものを見せる．</li>
+		<li>まずは全員のプログラムをお互いに観賞し，どのような作品ができたかを見る．</li>
+		<li>useFullScreenを使って画面を最大化する．必要な変更をする．
+	<ul>
+	<li>全画面使用に伴い，デザインを変更する必要がある．</li>
+	</ul>
+	</li>
+		<li>キーボードは展示に出さないため，マウスだけで操作できるようにする．
+	<ul>
+	<li>どのように変更すればいいかを説明する．</li>
+	</ul>
+	</li>
+		<li>複数のプログラムを連結する方法について説明する．
+	<ul>
+	<li>展示用のファイル名を指定する．指定したディレクトリーにそのファイルを置く．</li>
+	</ul>
+	</li>
+		<li>展示についてのリーダーを決める．</li>
+	</ul>
+
+
+	<h2>サウンド機能</h2>
+
+
+	<ul>
+	<li>作品はサウンドのあるなしで大分印象が違う．</li>
+		<li>音をつける手順について説明する．</li>
+		<li>まずどのような音をつけるか考える．後で変えられるので簡単でよい．</li>
+		<li>サンプル音は，マイクで取り込む，フリーのサンプル音を使う，MP3から切り出すなどがある．</li>
+		<li>波形編集ソフトで必要な部分だけを抜き出す．0.1秒くらいを目途にする．</li>
+		<li>useSoundの使い方を学ぶ．</li>
+		<li>サウンドファイルを再生する方法．音程，音量，パンなどを指定できる．</li>
+		<li>小さい音を重ねて再生するようにすると効果的である．50音程度は再生できる．</li>
+	</ul>
+    <p class="coda">
+      20th June 2007<br>
+    </p>
+</div>
+
+<!-- insert site tracking codes here, like Google Urchin -->
+
+</body>
+</html>

data/website/exhibition.txt

@@ -0,0 +1,24 @@
+h1. 作品合同展示
+
+h2. 合同展示
+
+* 展示場所，見せ方について考える．複数のプログラムを統合したものを見せる．
+* まずは全員のプログラムをお互いに観賞し，どのような作品ができたかを見る．
+* useFullScreenを使って画面を最大化する．必要な変更をする．
+** 全画面使用に伴い，デザインを変更する必要がある．
+* キーボードは展示に出さないため，マウスだけで操作できるようにする．
+** どのように変更すればいいかを説明する．
+* 複数のプログラムを連結する方法について説明する．
+** 展示用のファイル名を指定する．指定したディレクトリーにそのファイルを置く．
+* 展示についてのリーダーを決める．
+
+h2. サウンド機能
+
+* 作品はサウンドのあるなしで大分印象が違う．
+* 音をつける手順について説明する．
+* まずどのような音をつけるか考える．後で変えられるので簡単でよい．
+* サンプル音は，マイクで取り込む，フリーのサンプル音を使う，MP3から切り出すなどがある．
+* 波形編集ソフトで必要な部分だけを抜き出す．0.1秒くらいを目途にする．
+* useSoundの使い方を学ぶ．
+* サウンドファイルを再生する方法．音程，音量，パンなどを指定できる．
+* 小さい音を重ねて再生するようにすると効果的である．50音程度は再生できる．