プログラミング講座(124) 桜

桜の花びらを3000輪描くプログラムを作成しました。プログラムID VFC190-0 で発行しました。

【図122 桜】

このプログラムにはグラデーションのサブルーチンを組み込み背景を塗りつぶしています。

東京の桜は満開を過ぎ散り始めていますが、まだ花見は可能です。来週の入学式に間に合うといいのですが。

プログラミング講座(123) グラデーション完成版

グラデーション表示プログラムが完成しました。プログラムID VFP128-1 で発行しました。

【図121 グラデーション完成版】

角度を指定できるようになりました。HTML5 （正確には CSS3 の background: linear-gradient()）では角度は反時計回りに指定しますが、このプログラムは Small Basic の座標系に合わせて時計回りに指定するようにしました。

プログラムでは背景すべてを塗りつぶしていますが、サブルーチン FillLinearGradientRectangle() は長方形を指定して、その中をグラデーションで塗りつぶすようになっています。

プログラミング講座(118) グラデーション

以前にも色の帯を表示するプログラムを紹介したことがありますが、今回は背景をグラデーションで塗りつぶすプログラムを作ってみました。HTML5 にグラデーションを指定する機能があるので、同じような指定方法ができるよう、サブルーチンを作りました。角度をつける部分はまだできていません。プログラムID VFP128 で発行しました。

【図116 グラデーション】

図では上から 0% がシアン、50% が白、100% が青を指定しています。飛行機から見た水平線をイメージしました。色の名前ではなく #00FF00 のように16進数値で指定することも可能です。

プログラミング講座(80) カラーパレット

図形エディタにカラーパレットの機能を追加しました。プログラムID XFZ657-5 で発行しました。

【図83 カラーパレット】

指定した色を最大16色までパレットに記憶できます。図形の色を合わせるときや、基準の色から他の色を作るときにも便利です。

昨日一旦カラーパレットの機能が動き始めたのですが、カラーパレットに色が入るとスライダーの動きが悪くなるのが気になり、直しているうちに大改造になりました。これまで図形を移動するときとスライダーを動かすときには別々のマウスの処理を行っていましたが、微妙に処理が違っていてデバッグしにくかったので、すべて同じルーチンを使うように変更しました。Mouse_SetHandler()、Mouse_OnDown()、Mouse_OnMove()、Mouse_OnUp() というサブルーチンで統一的に処理ができるようにしました。デバッグのためにマウス制御の状態を表示する機能も作りました。

今後のマウス処理はこのサブルーチンを利用して、比較的に簡単に実現できるようになると思います。

プログラミング講座(65) Small Basic でスライダーを作ってみた

最近、Small Basic Forum 向けに Small Basic のプログラムを結構書いています。Small Basic, Java, JavaScript, Ruby, C++ のプログラムを書き比べたりもしています。
久しぶりに『Small Basic で学ぶプログラミング』向けにプログラムを書いてみました。NVQ042 として発行しました。

【図68 Color Slider 0.1】

GraphicsWindow の描画と Shapes を使ってスライダーを作ってみました。そのスライダーを使って RGB または HSL を変更して色を作成するプログラムを書きました。以前作った RGB と HSL の変換サブルーチンを再利用しています。

マウスの処理にタイミングの問題があるらしく、たまにスライダーの表示が壊れます。バグが直ったらまた報告します。

それから、ひとつ Small Basic の気になる現象について書いておきます。上記のプログラムにおいて、

Sub Slider_DoNothing
EndSub

というサブルーチンが 363 行目にあるときは、

GraphicsWindow.MouseMove = Slider_DoNothing

という行（434 行目）で「変数 'Slider_DoNothing' は使われていますが、それに対する値は指定されていません。正しく値を指定したか確認してください。」というエラーになっていました。サブルーチンを 437 行目に移動したらエラーが解消されました。イベントに設定するサブルーチンが設定する行から遠いとエラーになるようです。

藍色

Small Basic や HTML で使われる Indigo という色のRGB値は #4B0082 ■ですが、この色は紫よりの色で、私が認識している藍色とは違うように思います。私の中ではむしろ緑よりのRGB値、たとえば #001188 ■のほうが（染物の）藍色らしく感じます。

手元にある『色の手帖』（小学館）では、インジゴ(indigo)の三属性値が2.5PB 2.5/5、CMYK値が100, 70, 10, 72（％）で、藍色の三属性値が2PB 3/5、CMYK値が100, 70, 20, 43となっています。

これらのCMYK値を後述の変換式[*]によってRGB値に変換してみると、インジゴのRGB値が #001540 ■、藍色のRGB値が #002B74 ■になります。変換式は理想的なCMYKのインクを想定しているので、実際の変換式とは違いますが、傾向は掴んでいると思います。つまり、藍色はやはり赤(紫)よりではなく、緑よりの色であるということです。

ただ、『色の手帖』のインジゴの説明文に「ニュートンがプリズムを使って引き出した基本七色（赤・橙・黄・緑・青・藍・紫のスペクトル）の一つ藍色をインジゴと言った」とあり、このことで紫よりの Indigo が定義されたのかもしれません。

[*] CMYK値からRGB値への変換式
CMYK（シアン、マゼンタ、黄、黒）、RGB（赤、緑、青）のそれぞれの値を％で表すとすれば、式
R = (100 - C) * (100 - K)
G = (100 - M) * (100 - K)
B = (100 - Y) * (100 - K)
によって変換できる。実際のRGB値(0～255)を求めるにはこれに255を掛ければよい。

色についての研究報告９ - 見やすい配色

配色を考える上でもうひとつ気をつけておきたいこととして、見やすさがあります。背景色と文字色の組み合わせが読みやすいかどうかチェックするツールとして、富士通から無償でColorSelectorが公開されています。このツールは画面上の任意の色をスポイトで取り出せるので、その機能だけでも役に立つと思います。
Windows版とMacintosh版があり、Java環境で動作します。

以上で色についての研究報告を終わります。

色についての研究報告８ - ミッフィーの色

ミッフィーの作者ディック・ブルーナさんの描く色について、PCCSカラーで分析してみたいと思います。よく使われる５色：
赤 ■ b5 (255,124,56) #FF7C38
青 ■ dp16 (0,71,119) #004777
黄 ■ v7 (255,210,0) #FFD200
白 ■ W (255,255,255) #FFFFFF
緑 ■ dkg10 (75,96,53) #4B6035
を見てみると、赤と青は色相としては補色で、トーンとしては明度が対照的です。黄色と緑は色相が類似でトーンは彩度が対照的で明度も差があります。
結構対照的な色使いなのですが、黄色以外の彩度を抑えているせいか、落ち着いた色使いに見えます。

色についての研究報告７ - 角度配色法

PCCSの色相とトーンの考え方を使って２色の配色を考えてみましょう。ここでは色相に注目して配色を考えます。
PCCSの色相は24種類あり色相番号が振られています。
２色を選ぶときに近い番号を選ぶかどうかで雰囲気が変わってきます。

色相を輪にして並べたものを色相環といいます。色相環の隣同士は360°÷24色＝15°の関係になります。この角度が次のように分類されています。

同一色相：0°
隣接色相：15°
類似色相：30°45°
中差色相：60°75°90°105°
対照色相：120°135°150°
補色色相：165°180°

私の好みでは90°くらいまでの関係がいいように思います。

色についての研究報告６ - PCCSトーン

これまでHTMLカラー(#rrggbb)やWindowsの色合い・鮮やかさ・明るさ(ESL)の色の表現について学んできました。他にもさまざまな色の表し方 - 表色系といいます - があります。

今回紹介したいのはPCCSという表色系です。PCCS(Practical Color Co-ordinate System)は日本名を「日本色研配色体系」といい、(財)日本色彩研究所で開発された表色系です。

紹介したかった理由はPCCSが色相とトーン(彩度・明度)で色を表しており、トーンに名前、記号、修飾語が用意されている点です。

色見本 トーン記号 トーン名 (トーンの修飾語)
■ sf ソフト (柔らかい)
■ ltg ライトグレイッシュ (明るい灰みの)
■ p ペール (薄い)
■ lt ライト (浅い)
■ b ブライト (明るい)
■ v ビビッド (さえた)
■ dp ディープ (濃い)
■ dk ダーク (暗い)
■ dkg ダークグレイッシュ (暗い灰みの)
■ g グレイッシュ (灰みの)
■ d ダル (鈍い)
■ s ストロング (強い)