チュートリアル(ブックカバー編)

基本設定

ブックカバーは「基本設定」のメニューから次のようなブロックを選ぶところから始まります。

この凹みのなかにいろいろなブロックを配置していきます。

はじめの例

まずは文字を書いてみましょう。書く場所は紙の左端からの距離と上端からの距離(単位 mm)で指定します。

ちなみに、最終的にA4用紙(297mm × 210mm)に印刷することを想定しているので、描画できる領域の範囲は (0, 0) — (297, 210) です。

Blockly ではじめる

↓こういうブックカバーができます。

繰返しを入れてみましょう。

Blockly ではじめる

↓こういうブックカバーができます。

繰返しのためのブロックは何種類かありますが、 ここでは変数を変えながら繰り返すのものを選びました。

色やフォントなど、繰返しごとに変らないことは、繰返す前に設定しておきます。 繰返すことは、「...繰り返す:」の右側の凹みの中に置きます。 “変数”(ここでは「i」という名前)

は繰り返すごとに (ここでは 10ずつ)値が変わっていきますので、 それを利用して文字列を置く位置を変えます。

練習問題

  1. 表示される文字を変えてみよう。
  2. 文字の色を(例えば緑色に)変えてみよう。

色を変えてみる

これだと地味すぎるので、繰返しごとに色を変えてみましょう。

Blockly ではじめる

↓こういうブックカバーができます。

こんどは「塗りの色」を「...繰り返す:」のなかで変えています。 「i」という“変数”は繰り返すごとに、10 ずつ増えていきますので、1行ごとに色が変わるのです。

色を表すやりかたはたくさんありますが、ここでは「色相」・「彩度」・「輝度」の 3 つで表すやりかたを紹介します。次の図を見ると、すぐに意味がわかると思います。


Blockly ではじめる

左側の輪は色相を説明しています。 「色相」は、赤が 0, 黄色が 60, 緑が 120, … 青が 240 という角度に割り当てられていて、360 でまた赤に戻ります。 右側の四角は(色相 0 の時の)彩度と輝度を示しています。 「彩度」は白・灰・黒などが 0 で、純色は 100 になります。 「輝度」は黒が 0, 白が 100 で、純色は 50 になります。

練習問題

  1. 色の動く範囲を、例えば赤〜黄色に限定してみよう。

乱数を使う

あまり規則的すぎても面白くないので、乱数を使ってみましょう。 乱数はサイコロを振って出る数のようにデタラメな数のことです。

実は、 コンピューターはデタラメなことができないので、 本当にデタラメなのではなく、現在時刻などから規則に従って計算するけれども、 人間にとってはデタラメに見える数、です。擬似乱数と言います。)

Blockly ではじめる

↓こういうブックカバーができます。
(実行するたびに変わります。)

位置を乱数で変えてみました。実行する度に結果は変わります。

文字列のなかからランダムに文字を一つ選ぶのはよく使うので、 専用のブロックを用意しました。

Blockly ではじめる

↓こういうブックカバーができます。
(実行するたびに変わります。)

練習問題

  1. 文字列の縦の位置もカードごとに乱数で変えてみよう。

条件分岐する

ある条件が成り立つかどうかによって処理をわけてみましょう。 次のようなブロックを使います。

変数「i」の値によって、置く文字列の種類を変えています。

Blockly ではじめる

↓こういうブックカバーができます。

3回に1回だけ英語でなくフランス語で表示しています。

練習問題

  1. 5回に1回だけ、右に 10mm ずらして文字列を表示するようにしてみよう。

さらに繰返す

繰返しのなかに繰返しを入れてみましょう。 色を少しずつ変えながら長方形を描いていきます。

Blockly ではじめる

↓こういうブックカバーができます。

内側の繰返しのなかでは、変数(この例では「x」)の値が変っていくので、 その変数を利用して新しい色を計算しています。

同じ値を2回以上使うため、「今の色」という変数に、 計算した色を一旦代入していることにも注目してください。 代入には次のようなブロックを使います。

練習問題

  1. つぎのように少しずつ色を変えてランダムな文字を出力してみよう。

(発展)三角関数を使う

三角関数を使うと、図形の表現の幅が一気に広がります。三角関数といっても、その定義だけを知っておけば充分で、 高度な性質を理解する必要はありません。三角関数の定義は次の図を見てください。


Blockly ではじめる

図の青色のところを見てください。 半径 1 の円の中心が (0, 0) にあるとき、(0, 0) を通り、水平(つまり(0, 0) — (1, 0) を結ぶ線分)と角度 t をなす線分が 円と交わる点の座標が (cos(t ), sin(t )) です。

正多角形を描いてみましょう。

Blockly ではじめる
↓こういうブックカバーができます。

練習問題

  1. つぎのような図形を描いてみよう。
  2. つぎのような図形を描いてみよう。

タートルに命令する

絵の書き方のもう一つの流儀として、ペンを持った仮想のカメを考え、 カメに指令を与えて線を描かせる、という方法(タートルグラフィックス)があります。 カメに与える指令には次のようなものがあります。

このカメを使って正多角形を描いてみましょう。

Blockly ではじめる
↓こういうブックカバーができます。

練習問題

  1. 六角形・七角形・八角形・…にしてみましょう
  2. 星型★にしてみましょう

さいごに

「お絵かきプログラミング」が用意しているブロックはこれだけではありませんが、 主なものは一通り説明しました。あとは、実際に使ってどのような働きをするか、 試しながら学んでいってください。

戻る


香川研究室