差分

このページの2つのバージョン間の差分を表示します。

--- ch_figure [2018/01/03 23:21] – 作成 kanemune
+++ ch_figure [2018/02/09 11:03] (現在) – klab
@@ 行 1: / 行 1: @@
+#  描いた絵に色を塗ろう
+「[[ch_graphics|はじめてのプログラミング]]」では、タートルオブジェクトを動かして、画面に図形を描いたり、図形を描くための命令を定義した。このActivityでは、描いた図形をオブジェクトとして操作する方法を扱う。
+##  図形の生成
+タートルが移動して描いた線は、タートルの一部である。カメのしっぽが延びている状態をイメージすると分かりやすい。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　90　左回り」！4　繰り返す。
+</code>
+{{:pasted:20180103-141711.png}}
+**図形を作る**という命令を使うと、しっぽをカメから切り離して、新たに**図形**オブジェクトを作れる。自分で描いた絵をオブジェクトにすることで、アニメーションやゲームなどで動かして活用できる。
+次の例では、描いた図形をオブジェクトにして、「四角」という名前を付けた。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　90　左回り」！4　繰り返す。
+ 四角＝かめた！図形を作る。
+</code>
+{{:pasted:20180103-141824.png}}
+「図形を作る」のパラメータとして色を指定すると、その色で塗られた図形が作られる。次の例では青く塗られた図形を作った後、**位置**で画面上の特定の座標（ここでは（100,100））に移動している。色については後の節で説明する。数式や変数は括弧（...）で囲んで記述する。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　90　左回り」！4　繰り返す。
+  四角＝かめた！（青）図形を作る。
+  四角！100　100　位置。
+</code>
+{{:pasted:20180103-141849.png}}
+ドリトルの画面上の位置はxy座標で指定できる。原点は画面の中央で、右にx軸、上にy軸が伸びている。数学で扱う座標と同様である。
+{{:pasted:20180103-141923.png}}
+図形オブジェクトでは、図形を描き始めた点が図形の座標になる。タートルオブジェクトでは画像の中心が、「[[ch_paint|ペイントソフトを作ろう]]」で扱う**ボタン**などの**GUI部品**は左上がオブジェクトの座標である。
+次の表は図形の命令の一部である。
+^命令^用途^使用例^
+|右回り|右に回る|四角！30　右回り。|
+|左回り|左に回る|四角！30　左回り。|
+|移動する|移動する|四角！100　0　移動する。|
+|位置|特定の位置に動く|四角！100　100　位置。|
+|作る|オブジェクトを複製する|四角2＝四角！作る。|
+|塗る|色を塗る|四角！（青）塗る。|
+##  図形の複製
+オブジェクトは複製して使うことができる。あるオブジェクトを複製すると、同じオブジェクトが作られる。
+複製を作る命令は**作る**である。通常のプログラムでは「かめた＝タートル！作る」のように、新しいオブジェクトを作るために使われるが、「かめた！作る」とすると、画面上のかめたが複製されて、もうひとつのタートルオブジェクトが作られる。
+<code>
+ かめた＝タートル！作る。
+ かめきち＝かめた！作る。
+</code>
+{{:pasted:20180103-141942.png}}
+タートルのように画面に表示されているオブジェクトでは、複製されたオブジェクトは元のオブジェクトと同じ位置に作られるため、ぴったり重なり合ってしまい、見た目には複製されたことが分かりづらいことがある。このようなときは、どちらか片方を動かしてみればよい。次のプログラムでは、新しく作られたかめきちを100歩動かしている。
+<code>
+ かめた＝タートル！作る。
+ かめきち＝かめた！作る　100　歩く。
+</code>
+{{:pasted:20180103-142001.png}}
+図形も同様に複製できる。自分の好きな形を描けたら、複製して画面の上で増やしてみよう。次のプログラムは、三角形を複製して横に並べている。
+<code>
+ かめた＝タートル！作る。
+ 三角＝「かめた！100　歩く　120　左回り」！3 繰り返す 図形を作る。
+ 三角！作る　100　0　移動する。
+</code>
+{{:pasted:20180103-142016.png}}
+##  色オブジェクト
+図形を塗るときの色もオブジェクトである。基本的な色として、8色（**黒**、**赤**、**緑**、**青**、**紫**、**水色**、**黄色**、**白**の**色**オブジェクトがあらかじめ用意されている。次のプログラムは、三角形の図形オブジェクトを「緑」に塗るプログラムである。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　120　右回り」！3　繰り返す。
+ 三角＝かめた！（緑）図形を作る。
+</code>
+{{:pasted:20180103-142033.png}}
+あらかじめ用意されている色は、もっとも明るい状態である。必要に応じて**暗くする**で暗くして使うことができる。暗くした色は**明るくする**で明るくすることができる。次のプログラムは、「暗くする」で「濃い緑」を作り、色を塗っている。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　120　右回り」！3　繰り返す。
+ 濃い緑＝緑！暗くする。
+ 三角＝かめた！（濃い緑）図形を作る。
+</code>
+{{:pasted:20180103-142052.png}}
+色を混ぜ合わせて新しい色を作ることができる。次のプログラムは、「**光**」**パレット**を使い、「緑」と「黄色」を混ぜて「きみどり」という新しい色を作っている((いろいろな色の**光**を混ぜ合わせていくと、明るくなってやがて白に近付く。このような混ぜ合わせは**加法混色**である。**絵具**を混ぜ合わると黒に近付く。このような混ぜ合わせは**減法混色**である。詳しくは「[[ref_graphics|レファレンス]]」を参照。))。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　120　右回り」！3　繰り返す。
+ きみどり＝光！（緑）（黄色）混ぜる。
+ 三角＝かめた！（きみどり）図形を作る。
+</code>
+{{:pasted:20180103-142109.png}}
+さらに黄色に近い色にしたければ、次のように、同じ色を2回以上加えたり、
+> きみどり＝光！（緑）（黄色）（黄色）混ぜる。
+次のように、3個以上の色を加えることもできる。
+> きみどり＝光！（緑）（黄色）（青）混ぜる。
+特殊な色を作りたい場合は、「赤」、「緑」、「青」の**三原色**を数値で指定して新しい色オブジェクトを作る。色の強さは0〜255で表現する。0は光がまったくない暗い状態、255はいちばん明るい状態である((色の強さは16進数でも指定できる。詳しくは「[[ref_graphics|レファレンス]]」を参照。))。
+<code>
+ かめた＝タートル！作る。
+ 「かめた！100　歩く　120　右回り」！3　繰り返す。
+ 茶色＝色！166　42　42　作る。
+ 三角＝かめた！（茶色）図形を作る。
+</code>
+{{:pasted:20180103-142124.png}}