« JavaScript (39) MathJax について | トップページ | プログラムを学んでみるには »

2015/11/18

プログラミング講座(169) プログラムで絵を描く

コンピュータ上の絵としては、ソフトウェア(ペイント)などを使って自分で描くのも、それはそれで味がありますが、プログラミングを知っている方なら、プログラムに描かせてみるのも面白いのではないでしょうか。

今回はプログラムで絵を描くことについて、いろいろな例を Small Basic で示してみたいと思います。

繰り返しを使う
絵を描いていて同じようなものを繰り返し描くのが面倒に感じたことはありませんか?プログラムを使うと簡単に繰り返しが行えます。模様をプログラムを使って描いた例を示します。プログラムIDはJTH842です。この例ではX方向への繰り返しの中で2つの模様を交互に描いています。それをY方向へも繰り返しています。

図160 模様
【図160 模様】

繰り返しをさらに複雑にしたのが以下の万華鏡です。プログラムIDはGTB559-4です。 このプログラムでは Shapes を利用し、元の図形の反転図形を作り、さらに回転図形を作りそれを繰り返しコピーしています。

図161 万華鏡
【図161 万華鏡】

乱数を使う
星や花が乱れているような絵を描くには乱数を使うとよいでしょう。以下のプログラムID XKB601 では、乱数を使って X, Y 座標を決め 1000 個の星を背景に描いています。

図162 星(I AM YOUR FATHER)
【図162 星】

プログラムID VFC190-0 では同様に乱数を使って X, Y 座標を決め、Shapes で 3000 個のサクラの花びらを描いています。

図163 サクラ
【図163 サクラ】

数列や関数を使う
プログラム WRG641 では MoveArc というサブルーチンの中で円弧(ゾウの鼻としっぽ)を描いています。円弧は Shapes の円を扇状に並べていて、その座標は三角関数を使って計算しています。Small Basic には円弧を描くオペレーションはありませんが、三角関数を使えば描くことができます。

図164 ゾウ
【図164 ゾウ】

プログラム KFJ748-2 は木目を描くプログラムですが、基本的には木目の中心点からの距離を計算して木目の色を決めています。木目の色は年輪間の径の距離に対して負(凸)の2次曲線になるように計算しました。そうすることで濃い部分を細くできました。

図165 木目
【図165 木目】

プログラム KCG090-0 はヒマワリの花を描いています。サクラ同様、花の位置には乱数を使っています。種の部分の小さな四角の角度には黄金比を使い、位置には三角関数を用いました。黄金比の詳細についてはこちらのサイト(英語)に書かれています。

図166 ヒマワリ
【図166 ヒマワリ】

描いた絵を変換する
コンピュータで描かれた絵はデータとしてさらに加工することが可能です。

以下のアイコンエディターというプログラムではラスター(点)の絵をPPMというファイル形式へ変換し保存できます。PPMはフリーソフトのGIMPで読み込むことができます。GIMPでBMP形式やアイコン(ICO形式)に変換することもできます。

図167 アイコンエディター
【図167 アイコンエディター】

図168 GIMPに読み込んだPPMファイル
【図168 GIMPに読み込んだPPMファイル】

また、図形エディター(Shapes)で作成したベクター(線)の絵をSVG形式に変換できます。SVGはテキストベースのファイル形式なので、Small Basic で SVG を出力するプログラムを作ることができます。プログラム XMZ657-1 は碁盤の SVG を含む HTML を出力します。

図169 碁盤 SVG ジェネレーター
【図169 碁盤 SVG ジェネレーター】

図170 作成された碁盤のHTML
【図170 作成された碁盤のHTML】

SVG は HTML5 に直接記述できるようになったことが最大の特徴だと思いますが、GIMP, Inkscape といったフリーソフトの他、Illustrator でも扱えるのでいろいろ応用できそうです。Inkscape では Windows メタファイルや拡張メタファイルに出力できるので、PowerPoint などの Office 製品からクリップアートとして利用することもできます。

以上、Small Basic を使ったさまざまな絵の描き方を紹介してきましたが、これはほんの基本です。現在コンピューターグラフィックス (CG) の世界は大きな進歩を遂げ、映画やアニメも本当に高品質になってきました。

Small Basic でできることは限られますが、いろいろ工夫して楽しいアニメ作成ツールを作っていきたいと思います。

|

« JavaScript (39) MathJax について | トップページ | プログラムを学んでみるには »

イラスト」カテゴリの記事

Small Basic」カテゴリの記事

HTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: プログラミング講座(169) プログラムで絵を描く:

« JavaScript (39) MathJax について | トップページ | プログラムを学んでみるには »