website/exercise1.html in sgl-0.4.0 vs website/exercise1.html in sgl-1.0.0
- old
+ new
@@ -1,264 +1,262 @@
-<!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>
- 練習問題 1〜10
- </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>練習問題 1〜10</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>課題1 基本 (window, background, color, line)</h2>
-
-
- <h3>課題1A 一本の線を描くプログラムを作る</h3>
-
-
- <h3>課題1B ある考えの元に3本の線を描くプログラムを作る</h3>
-
-
- <h3>課題1C 5本以下の直線で「変化」を表現するプログラムを作る</h3>
-
-
- <h3>課題1D 10本以下の直線で「ハーモニー（調和）」を表現するプログラムを作る</h3>
-
-
-<pre syntax="ruby">
-require 'sgl' # プログラムの最初に必ず書く必要がある
-window 100, 100 # windowを開く
-background 0 # 背景を黒にする
-color 100 # 描画する色を白にする
-line 0, 0, 100, 100 # 左下から右上に線を描く
-wait # そのまま待つ
-</pre>
-
- <h3>半透明色の使い方</h3>
-
-
-<pre syntax="ruby">
-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>課題2A</h2>
-
-
-一つの変数を使って2本の直線の構成をコントロールするプログラムを作る．
-<pre syntax="ruby">
-require 'sgl'
-window 100, 100
-a = 50
-line 0, 0, 50, a
-line 100, 0, 50, a
-wait
-</pre>
-
- <h2>課題3A 繰り返し (for a in 0..100; end)</h2>
-
-
-繰り返しを使った形態を描く．
-<pre syntax="ruby">
-require 'sgl'
-window 100, 100
-for a in 20..80
- color a
- line a, 0, a, 100
-end
-wait
-</pre>
-
- <h2>課題4A 計算 (+ – * /)</h2>
-
-
-計算を使った形態をかくプログラムを作る．
-<pre syntax="ruby">
-require 'sgl'
-window 100, 100
-for a in 20..40
- color a
- line(a, 0, a*2, 100)
-end
-wait
-</pre>
-
- <h2>課題6A kadai6a.rb</h2>
-
-
-h3. 入れ子構造 6A 格子状にひろがる形態を作る．
-<pre syntax="ruby">
-# kadai6a.rb
-require 'sgl'
-window 200,200
-for a in 0..10
- for b in 0..10
- color a*10, b*10, b*10
- rect a*20+5, b*20+5, a*20+15, b*20+15
- end
-end
-wait
-</pre>
-
- <h2>課題7A kadai7a.rb</h2>
-
-
-h3. 質問 (if 50 < a; end) 7A 画面の左右で違う形態を描く．
-<pre syntax="ruby">
-# kadai7a.rb
-require 'sgl'
-window 200,200
-for a in 0..200
- color a/2, 50, 50
- if a < 100
- line a, 50, a, 100
- else
- line a, 100, a, 150
- end
-end
-wait
-</pre>
-
- <h2>課題8A</h2>
-
-
- <h3>defを使って自分なりのコマンドを作り，それを用いた形態を描く．</h3>
-
-
-ファイル名 kadai8a.rb
-<pre syntax="ruby">
-require 'sgl'
-window 100,100
-background 100
-
-def my_rect(x1, y1, x2, y2, outline, fill)
- color fill
- rect x1, y1, x2, y2
- color outline
- line x1, y1, x2, y1
- line x2, y1, x2, y2
- line x2, y2, x1, y2
- line x1, y2, x1, y1
-end
-
-my_rect(20, 20, 40, 30, 20, 50)
-my_rect(60, 60, 80, 90, 70, 90)
-wait
-</pre>
-
- <p>defというコマンドで関数を定義する．自分がよく使う形，例えば枠付きの塗
-りつぶされた四角形を定義する．defの後に続くのが関数名である．アルファ
-ベットの小文字から始まっている必要がある．</p>
-
-
- <h2>課題9A</h2>
-
-
- <h3>flipを使ってアニメーションを作る．</h3>
-
-
-ファイル名 kadai9a.rb
-<pre syntax="ruby">
-require 'sgl'
-window 100,100
-loop do
- for a in 0..100
- line 20,a,80,a
- flip
- end
-end
-wait
-</pre>
-
- <p>flipというところで、ちょうど紙をめくるように次の画面を表示させている。
-<code>loop do 〜〜〜 end</code> で，その間を無限に繰り返す．</p>
-
-
- <h2>課題10A</h2>
-
-
- <h3><span class="caps">HSV</span>による色指定を使って，自分なりの色グラデーションを作る。</h3>
-
-
- <p>静止画でもアニメーションでもよい．(colorHSV, backgroundHSV)</p>
-
-
-ファイル名 kadai10a.rb
-<pre syntax="ruby">
-require 'sgl'
-window 100,100
-background 100
-
-loop do
- for h in 0..100
- colorHSV h, 50, 100
- rect 0, h, 100, h+5
- flip
- end
-end
-wait
-</pre>
-
- <ul>
- <li>colorHSV(h, s, v) → hue, saturation, value</li>
- <li>hue → 色調</li>
- <li>saturation → どれだけ原色に近いか</li>
- <li>value → 明るさ</li>
- </ul>
-
-
- <ul>
- <li>4番目のパラメーターを使って，透明度を設定することもできる．</li>
- <li>backgroundHSVというコマンドもある．</li>
- </ul>
-
-
- <h2>課題の注意点</h2>
-
-
- <p>課題はいずれもwindowサイズなどは自由．課題例は100,100のサイズになって
-いるが，より大きいwindowサイズを選択してもよい。</p>
-
-
- <p>ファイル名は必ず指定のものにし，Z:に保存する．指定のファイル名のファイ
-ルが保存されているかどうかで課題提出を判定する．ファイル名が違う場合は
-提出してないことになってしまうので，注意する．</p>
- <p class="coda">
- 19th 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>
+ 練習問題1
+ </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>練習問題1</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>課題1: 一本の線を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai1.rb
+require 'sgl' # プログラムの最初に必ず書く必要がある
+window 100, 100 # windowを開く
+background 0 # 背景を黒にする
+color 100 # 描画する色を白にする
+line 0, 0, 100, 100 # 左下から右上に線を描く
+wait # そのまま待つ
+</pre>
+
+ <h2>課題2: ある考えの元に3本の線を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai2.rb
+require 'sgl'
+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>課題3: 5本以下の直線で「変化」を表現する</h2>
+
+
+<pre syntax="ruby">
+# kadai3.rb
+# 考えてみましょう．
+</pre>
+
+ <h2>課題4: 10本以下の直線で「ハーモニー(調和)」を表現する</h2>
+
+
+<pre syntax="ruby">
+# kadai4.rb
+# 考えてみましょう．
+</pre>
+
+ <h2>課題5: 一つの変数を使って2本の直線の構成をコントロールする</h2>
+
+
+<pre syntax="ruby">
+# kadai5.rb
+require 'sgl'
+window 100, 100
+a = 50
+line 0, 0, 50, a
+line 100, 0, 50, a
+wait
+</pre>
+
+ <h2>課題6: 繰り返しを使った形態を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai6.rb
+require 'sgl'
+window 100, 100
+for a in 20..80
+ color a
+ line a, 0, a, 100
+end
+wait
+</pre>
+
+ <h2>課題7: 計算を使った形態を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai7.rb
+require 'sgl'
+window 100, 100
+for a in 20..40
+ color a
+ line(a, 0, a*2, 100)
+end
+wait
+</pre>
+
+ <h2>課題8: 半透明を使った形態を描く</h2>
+
+
+<pre syntax="ruby">
+# 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: 入れ子構造，格子状にひろがる形態を作る</h2>
+
+
+<pre syntax="ruby">
+# kadai9.rb
+require 'sgl'
+window 200,200
+for a in 0..10
+ for b in 0..10
+ color a*10, b*10, b*10
+ rect a*20+5, b*20+5, a*20+15, b*20+15
+ end
+end
+wait
+</pre>
+
+ <h2>課題10: 条件分岐，画面の左右で違う形態を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai10.rb
+require 'sgl'
+window 200,200
+for a in 0..200
+ color a/2, 50, 50
+ if a < 100
+ line a, 50, a, 100
+ else
+ line a, 100, a, 150
+ end
+end
+wait
+</pre>
+
+ <h2>課題11: 自分なりの命令を作り，それを用いた形態を描く</h2>
+
+
+<pre syntax="ruby">
+# kadai11.rb
+require 'sgl'
+window 100,100
+background 100
+
+def my_rect(x1, y1, x2, y2, outline, fill)
+ color fill
+ rect x1, y1, x2, y2
+ color outline
+ line x1, y1, x2, y1
+ line x2, y1, x2, y2
+ line x2, y2, x1, y2
+ line x1, y2, x1, y1
+end
+
+my_rect(20, 20, 40, 30, 20, 50)
+my_rect(60, 60, 80, 90, 70, 90)
+wait
+</pre>
+
+ <p>defというコマンドで命令を定義する．ここでは，枠付きの塗りつぶされた四
+角形を定義している．defの後に続くのが命令の名前となる．アルファベット
+の小文字から始まっている必要がある．</p>
+
+
+ <h2>課題12: flipを使ってアニメーションを作る</h2>
+
+
+<pre syntax="ruby">
+# kadai12.rb
+require 'sgl'
+window 100,100
+loop do
+ for a in 0..100
+ line 20,a,80,a
+ flip
+ end
+end
+wait
+</pre>
+
+ <p>flipというところで，ちょうど紙をめくるように次の画面を表示させている．
+<code>loop do 〜〜〜 end</code> で，その間を無限に繰り返す．</p>
+
+
+ <h2>課題13: <span class="caps">HSV</span>による色指定を使り，自分なりの色グラデーションを作る</h2>
+
+
+ <p>静止画でもアニメーションでもよい．(colorHSV, backgroundHSV)</p>
+
+
+<pre syntax="ruby">
+# kadai13.rb
+require 'sgl'
+window 100,100
+background 100
+
+loop do
+ for h in 0..100
+ colorHSV h, 50, 100
+ rect 0, h, 100, h+5
+ flip
+ end
+end
+wait
+</pre>
+
+ <ul>
+ <li>colorHSV(h, s, v) → hue, saturation, value</li>
+ <li>hue → 色調</li>
+ <li>saturation → どれだけ原色に近いか</li>
+ <li>value → 明るさ</li>
+ </ul>
+
+
+ <ul>
+ <li>4番目のパラメーターを使って，透明度を設定することもできる．</li>
+ <li>backgroundHSVというコマンドもある．</li>
+ </ul>
+ <p class="coda">
+ 30th June 2007<br>
+ </p>
+</div>
+
+<!-- insert site tracking codes here, like Google Urchin -->
+
+</body>
+</html>