長方形、文字列、画像の描き方

　Shapes環境で描くことのできるグラフィックの種類は、これまでに描いてきた円や直線以外に、長方形、文字列、画像があります。このうち文字列と画像については、今回は基本的な描き方だけを示し、実例は示しません。これらは「図形」としては異質であり、それほどバリエーションもないからです。

　まず文字列ですが、これはTextクラスのオブジェクトとして描きます。さすがにデフォルトの文字列というものは用意されていないので、最小限、描きたい文字列を指定します。文字列だけを指定するバージョンと、文字列、フォントサイズ、フォント名、色を指定して描くものがあります。基本的な形は以下のようになっています。

　次に画像ですが、これはImageクラスのオブジェクトとして描きます。その際には、大きくふたとおりの方法があります。1つは画像のローカルなファイル名を指定する方法、もう1つはネット上のURLを指定する方法です。そしてそれぞれに、画像だけを指定するバージョンと、画像のほか、モノクロ画像の色合いを指定するティントと、画像の拡大／縮小方法を決めるコンテントモードを指定できるバージョンがあります。2×2で合計4種類となります。

　ここでtintラベルに対するパラメータの型がColor?となっていて、?マークが付いていることが気になるかもしれません。これは「オプションタイプ」と呼ばれるもので、無のオブジェクトを表すnilを指定してもいいことを示しています。ここではこれ以上説明しませんが、興味のある人は、「swift optional type」などで検索して調べてみてください。

　contentModeは、画像の枠の大きさに対して、中身の画像を拡大／縮小する際に、元の画像のアスペクト比（縦横比）を維持するかどうかを指定します。この値としては、アスペクト比を維持しない「scaleToFill」と、維持する「scaleAspectFit」のいずれかが指定できます。

　文字列と画像の描き方については、Shapesテンプレートから作成するプレイグラウンドの2ページめのCreateに例があるので、そちらも参考にしてください。その画像を描く例では、Swiftのシンボルマークの鳥のモノクロの画像に対してティントを指定して緑の色合いを表現しています。

Shapesに含まれているSwiftマークの画像はモノクロですが、Image()のパラメータとしてティント（tint）を指定することで、単色の色合いを加えることができます

　さて今回の主役の長方形ですが、Rectangleクラスを使って描きます。最初に描く際に指定できるのは、幅と高さ、それに角の丸みの半径だけです。つまり、位置や色などは指定できません。それらはあとから属性を変更することで設定する必要があります。パラメータの指定方法には、幅と高さだけを指定するバージョンと、それらに加えて角の半径を指定できるバージョンの2種類があります。

　長方形のオブジェクトに対して設定可能な属性を表にすると以下のようになります。

　今回は、この中のcenterとcolorをプログラムによって変更してみることにします。なお長方形は、何もパラメータを指定しないでデフォルトの設定で描くことができます。その際には、幅と高さはともに10.0（つまり正方形）、色はこれまで見た円や直線同様、薄い青で、画面の中央に描かれます。

色の指定方法のいろいろ

　今回のプログラムのカギを握るのが、色の指定方法です。前回に登場した座標を表すPointと同じように、色はColorというクラスで表されています。Colorを数値で指定して作成する方法には大別して2種類があります。これらはいわゆる「色空間」の違いによるもので、簡単に言えば、赤、緑、青の光の強さで指定するRGBと、色相、彩度、明度で指定するHSBのふたとおりです。それぞれにアルファ値（透明度）を指定するものとしないものがあり、基本的には2×2で、以下の4とおりとなります。

　ただし、色の要素を変数を使わずに直接数値で指定する際に都合がいいように、Double型ではなくFloat型のRGBで指定できるものも用意されています。

　さらに、モノクロ（白の強さ）で指定するものもアルファの有無で2種類あります。

　一方、色の要素の数値ではなく、色の名前で指定できるものも、black、blue、clear、gray、green、orange、purple、red、white、yellowが用意されています。これらは、例えば、

　のようにして指定できます。

　面白いのは、ランダムな色を簡単に生成する方法が用意されていることです。これは色の名前ではなく、一種のファンクション（正確には「メソッド」）なので、

　のように()を付けて指定します。今回のように、実験的なプログラムを書く場合には便利に使えるはずです。

ランダムな色で長方形を描く

　ここまで材料が揃えば、あとは何か描いてみるだけです。まずは、長方形の大きさと色を変えて、同じ場所（画面の中央）に描くものを示します。8ビット時代のグラフィックのサンプルのようなレトロな雰囲気になりました。

ほぼ画面いっぱいの大きさから、徐々に小さくなる長方形を、全部で10個、ランダムな色で描いています。小さいものを上に重ねているため、同じ位置に描いても隠れません

　グラフィックの最初の回に調べた画面の大きさを利用して、最初の長方形はほぼ画面いっぱいに描き、そこから幅は毎回5.0ずつ、高さは毎回7.5ずつ小さくしながら描いています。色は毎回Color.random()で設定しています。ここでは10個の長方形を描いていますが、それらはrectsという配列に記録しています。

　次にもう少しひねりを加えて、描いた長方形の位置をランダムに配置してみました。

全部で30個のランダムな色の長方形を、中心が画面内に収まるようなランダムな位置に配置しています。長方形の大きさは幅18.0、高さ12.0で固定しています

　長方形の中心の座標を指定するための乱数を発生させるために、arc4random_uniform()というファンクションを利用しています。これは、整数で指定した範囲の乱数を発生させるものです。例えばx座標では、0〜51の範囲の乱数を発生させ、そこから25.5を引くことで、-25.0〜25.5のランダムな座標値を得ています。このファンクションを利用できるようにするために、1行目で「Foundation」というフレームワークをインポートしています。これについては、また回を改めて説明します。

次回の予定

　最近になって、Swift Playgrounds公式の「Featured」に、「Spirals」というブックが追加されたことにはお気づきでしょうか。これはひと口で言うと、複数の歯車を組み合わせて幾何学的な曲線を描くスピログラフをSwift Playgrounds上にソフトウェアで再現したようなものです。なかなか興味深い動きが楽しめます。ぜひ試してみてください。それとは直接関係ありませんが、次回はいよいよアニメーションに挑戦しようと考えています。

2016年の12月13日にリリースされた「Spirals」というブックの1画面です。スピログラフのように幾何学的な曲線を描くアニメーションを永遠に描き続けます。ブック自体はいくつかのパラメータが変更できるだけの初心者向けですが、プログラムの内容はなかなか高度なものです