プログラミング入門

Scratchの「ペン」でコンピューターの「色」を学ぼう

いろいろな模様を描くことができるScratchの「ペン」機能。Scratchのサイトを検索すると、ペンだけの作品もたくさん公開されています。ペンをもっと面白く活用するために、今回はペンの色について解説してみたいと思います。
 

1. ペンの色を指定する方法

ペンの色を指定する方法は何種類かあります。ご存知の方法もあるかとおもいますが一通りご紹介します。
 

1-1. 色を数値で指定する

Scratchには色を指定するブロックが2つあります。一つは色を数値で指定するブロック。もう一つは色をカラーピッカーで指定するブロックです。まず色を数値で指定するブロックについて解説します。下図の矢印のブロックです。

このブロックには0〜199の値を入れて色を指定します。200以上の値も入れることができますが、200以上の色は繰り返し同じ色になります。200の色は0と同じ色、201は1と同じ色、400の色は0と同じ、410は10と同じ色、ということです。

まずこのようなプログラムを作って、0が何色か確かめてみます。

実行するとこうなりました。0は赤色のようです。

じゃあ、青は何番なの??と入れると・・・よくわかりませんね。
番号と色を対応させるプログラムを作ってみましょう。

色を変えながら横にまっすぐ動かして、ペンで点を描きます。そうすることで、x座標から色の番号がわかるので(x座標-200の時が色は0、x座標-202の時が色は1・・・)となるので、マウスを色の上に乗せるとその色の番号がわかるようにしました。

結果はこんな感じです。青色の数値はだいたい120ぐらいだということがわかりました。

こちらの作品のURLはこちらです。何色が何番か調べてみてくださいね。

1-2. カラーピッカーを使う

次はカラーピッカーを使う方法についてです。下図の矢印のブロックの使い方について説明します。

下の図のようなプログラムで色を指定したいと思います。まず最初に、「色」の部分にカーソルを合わせます。この時、カーソルは矢印になっています。

この状態で、一度「色」の部分をクリックしてみてください。するとカーソルが指のマークに変わります。

この指マークを使いたいところの色に合わせてクリックします。例えば、赤色なら停止ボタンをクリックします。

すると、プログラムブロックの「色」のところが同じ色になりました。

とても便利な機能ですが・・・Scratchの画面の中に使いたい色がない時には使えません。あらかじめ色々な色を背景やスプライトで用意しておく必要があります。そんなわけで、カラーピッカーで使えるスプライトを用意いたしました。バックアップして持って行っていただければと思います。

 

1-3. RGBで指定する

コンピューターでは光の三原色の「赤 Red」「緑 Green」「青 Blue」の色の組み合わせで色を表現します。この色の表現方法のことを、RBGといいます。

「赤 Red」「緑 Green」「青 Blue」の各色には明るさ(輝度)があり、0-255の数値の範囲で指定します。各色ごとに輝度を設定して組み合わせるといろいろな色が表現できます。色の例は、下の表を参考にしてみてください。

もっといろいろな色のRGBの値を知りたい場合には以下のようなサイトが参考になります。
https://www.scollabo.com/banban/lectur/websafe.html

では、このRGBを使って、色を自在に作れるプログラムを作ってみましょう。
まずはR、G、Bの三つの変数を用意します。

RGBを指定して色を使うためには、次のような演算ブロックを使ったプログラムを作ります。

!注意:このようにRGBで色を指定するときは、こちらのカラーピッカーのブロックを使います。

数値を指定する以下のブロックでは、うまく動作しないので気をつけてください。

これで、RGBに数値を入れることで好きな色が作れます。
こんなプログラムを作ってみました。

RGBの輝度をスライダーで設定してください。その後で緑の旗を押すと、指定された色でねこが三角形を描きます。

1-4. RGBを16進数で表現しよう

Webサイトなどを作ったことがある人なら色の指定に「#0033ff」という#と6桁の数字とアルファベットを使ったことがあると思います。実はこの数字はRGBを16進数で表記したものなのです。

16進数と10進数の対応表はこちら。

ちょっと難しいですが、16で次の桁になるのが16進数なんだ・・・となんとなく理解してもらえれば結構です。で、16進数を使うと255までの数を2桁で表すことができるんです。

▼16進数と10進数の対応表
http://www16.plala.or.jp/fm677/16hex.htm

RGBの輝度はそれぞれ0〜255まででしたから、16進数ならRGBそれぞれを2桁づつ、合計6桁で表示できるという訳です。図にするとこんな感じです。

なんとなーく色を16進数で表現する方法がわかったところで、Scratchで16進数で指定する方法をご紹介します。

Scratchでは#の代わりに16進数を表す方法として#の代わりに0x(数字のゼロとアルファベットのエックス)を使います。0x(ゼロエックス)はコンピューターの世界では時々でてきますので、0xが出てきたら「これは16進数なんだなー」と思ってください。

そして、以下の演算ブロックを使ってRGBを16進数で指定します。

ペンの色を指定するときはカラーピッカーのブロックに上記の演算ブロックを入れてください。

このプログラムを実行すると、16進数で指定した色でペンが使えます。

 

1-4. ARGB(RGBA)で透明色を使おう

上で解説したRGBに透明度(alpha)を追加したものがARGB(もしくはRGBA)です。アルファ値が100%(不透明)がff、0%(完全に透明)が00になります。まずは、ARGBをそれぞれ10進数で使う場合です。

アルファ値が100%(不透明)がff、0%(完全に透明)が00、というのが一般的です。ScrathでARGBを10進数で指定してペンの色で使う場合は次のような計算式を作ります。

では、ARGBのそれぞれの値をスライダーで指定できるようにしておきます。0%のとき、透明な線が引かれるでしょうか?

あれれ?0にしたのに透明になりません・・・・

ではアルファ値を1にしてみましょう。こんどは透明(ほとんど見えない)になりました。

どうやら、Scratchではアルファ値0は不透明になってしまうようです。もっとも透明なアルファ値は1、ということがわかりました。

 

1-5. ARGBを16進数で表現しよう

では、次に16進数を使う方法を試してみましょう。透明度を表すアルファ値はRGBの前にきます。

16進数だとわかりづらいので以下に透明度と16進数の対応表を乗せておきます。

この表の見方ですが、少し透明=アルファ値75(透明度75%)にしたいときは、ARGBのAのところに「BF」を入れるというふうに使います。

アルファ値50(=透明度50%=16進数だと80)を指定して、プログラムを実行すると・・・半透明の線が引けました!

 

2. まとめ

今回はScratchのペンの色について解説しましたが、RGB、ARGBはコンピューターで色を使う場合によく出てくる内容なので知っておいて損はありません。
16進数はちょっと難しいですが、0-Fを使って数値を表すことができるということがわかっていればOKです。

色見本のサイトでいろいろな、色を眺めるのも楽しいのでぜひScratchで色に親しんでみてくださいね。

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。