"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

Scratch(スクラッチ)入門(6)/色の扱い方を整理してみよう。

クラッチで色を数字で指定する方法を、簡単なサンプルを作って確かめてみます。

f:id:arakan_no_boku:20200824233948p:plain

 

はじめに

 

使う用語とかは、こちらの記事で説明しています。

arakan-pgm-ai.hatenablog.com

はじめての方は、上記を先に読んでもらえると、読みやすいと思います。

 

Scratch(スクラッチ)の色

 

コンピュータの色の指定方法で最も一般的なのは「RGB」です。

RGB(またはRGBカラーモデル)とは、赤 (Red)(●)、緑 (Green)(●)、青 (Blue)(●) の三つの原色を混ぜて色を表現する方法です。

もちろん、Scratch(スクラッチ)でも、RGBによる色指定は可能です。

ja.scratch-wiki.info

でも。

RGBでの色指定には16進数とか理解しないといけませんし、子供とかに教えるにはハードルが高いです。

なので。

Scratch(スクラッチ)では「0から100」までの数字で色を指定する独自の方法を標準にしています。

以下の4つの組み合わせで指定することができます。

  • 色:0 ~ 100
  • 鮮やかさ: 0 ~ 100
  • 明るさ: 0 ~ 100
  • 透明度:0 ~ 100

ただ、毎回4つを指定しなければいけないわけでもなく、たとえば、ペンの色指定だと以下のような感じで、透明度以外で指定します。

f:id:arakan_no_boku:20200908222838p:plain

 

試しに一つずつ変化させてみます

 

お試しのために、こんなスクリプトを用意してみます。

f:id:arakan_no_boku:20200908234028p:plain

スプライトを左端にもっていって、色の要素を初期設定し、右に動かしながら色を2.5ずつ変更して「0」~「100」まで変化させて太い線を描いていきます。

まずは。

鮮やかさ=100、明るさ=100、透明度=0でやると。

f:id:arakan_no_boku:20200908231105p:plain

こんな感じで色が変化していきます。

 

鮮やかさを変化させると白に近づく

 

鮮やかさの数字を小さくしていくと、どんどん白に近づきます。

他の部分は変えずに、鮮やかさだけ変えていきます。

例えば 鮮やかさ=50なら

f:id:arakan_no_boku:20200908231309p:plain

鮮やかさ=10だと。

f:id:arakan_no_boku:20200908231355p:plain

0だと真っ白になる感じがわかります。

 

明るさを変えていくと黒に近づきます

 

上記の鮮やかさを100に戻して、今度は明るさの数字だけ減らしていきます。

明るさだけ「70」にすると、こういう感じの色になります。

f:id:arakan_no_boku:20200908231753p:plain

明るさをさらに落として「40」にすると、かなり暗くなります。

f:id:arakan_no_boku:20200908231909p:plain

明るさ「10」だと、もうほぼ黒ですね。

f:id:arakan_no_boku:20200908232022p:plain

 

透明度をMaxにすると何も描かれなくなる

 

明るさ、鮮やかさを「100」に戻して、透明度をあげていきます。

明るさと鮮やかさは100から0に向かって数字を減らしていきましたが、透明度は0から100に向けてあげていきます。

透明度「30」くらいだと、あまりわかりません。

f:id:arakan_no_boku:20200908232838p:plain

 

ちなみに、透明度が「70」だと。

f:id:arakan_no_boku:20200908232612p:plain

少し透明・・感がでてきました。

透明度「90」だと。

f:id:arakan_no_boku:20200908234237p:plain

 

です。

当たり前ですが、100になると、何も描かれません。

 

注意点をひとつ

 

今回のサンプルスクリプトで、毎回「ペンを上げる」「ペンを下す」をやってます。

実際のところ「ペンを上げる」を入れなくても、動くのですが、「ペンを下げる」だけしかしていない場合、ペンの色指定・・例えば「透明度」などを100に変更して描いても、以下のように色がついたままになってしまったりします。

f:id:arakan_no_boku:20200908233746p:plain

これは想定外の動作です。

想定外の動作は「バグ」とも呼ばれます。

プログラムを書く人間(プロ・アマ問わず)なら、だれもが嫌いなやつです。

バグを生まないために大切なのは、例えば「ペンを下げて、描き終わったらペンを上げる」・・みたいな、後始末を面倒くさがらず、きちんと書くことです。

実際。

Scratch以外のプログラム言語で書いたプログラムでも、トラブルがあって、いろいろ調べてみたら、そういう後始末をきちんとしていない(例えば、カウント変数を0に戻していない・・とか)ことが原因だったなんてことは、ものすごくたくさんあります。

何かを変更して、使い終わったら、面倒くさがらず初期状態に戻しておく。

その癖をつけておくと、大人になって、システムの仕事をしたときに、泣きながら徹夜でシステムのリカバリをする・・みたいな目にあう確率を少しでも減らせます(笑)ので、子どもさんには、ぜひ、口をすっぱく言ってほしいなと思いますm(__)m。

たぶん。

 

さて

 

今回もプロジェクトを公開しています。

リンクはこちらです。

https://scratch.mit.edu/projects/423599106

 

f:id:arakan_no_boku:20200921104535p:plain

ほんとに、カラーバーを描くだけです。

中を見るでスクリプトを表示して、いろいろ変更して試してください。

今回はこんなところで。

ではでは。