Rubyで楽しむ図形描画！ステップバイステップの7つの手順

はじめに
●Rubyとは
●Rubyでの図形描画の基本
●Rubyでの図形描画の応用
- ○サンプルコード3：色をつける
- ○サンプルコード4：形を組み合わせる
●図形描画での注意点と対処法
●Rubyでの図形描画のカスタマイズ方法
- ○サンプルコード5：アニメーションを作る
- ○サンプルコード6：イベントに反応する
まとめ

はじめに

私たちは毎日、さまざまな図形を見て生活しています。

円、四角、三角といったシンプルな図形から、複雑なパターンまで、目にする図形は無数に存在します。

これらの図形をコンピュータ上で描くためのプログラミング言語としてRubyがあります。

この記事では、Rubyを使った図形描画の基本から応用まで、初心者でも理解できるようにステップバイステップで解説していきます。

●Rubyとは

Rubyは、まつもとゆきひろ氏によって開発されたオブジェクト指向のプログラミング言語です。

シンプルでありながらも、柔軟性とパワフルさを兼ね備えています。

Rubyは、コードが読みやすく、書きやすいという特徴があります。これにより初心者でも学びやすい言語となっています。

●Rubyでの図形描画の基本

Rubyで図形を描くためには、’ruby2d’というgemを使用します。

Ruby2Dは、2Dグラフィックスを扱うためのシンプルで直感的なAPIを提供しています。

○描画するための準備

まずは、ruby2d gemをインストールするところから始めましょう。

下記のコマンドをターミナルに入力します。

gem install ruby2d

Ruby2Dがインストールされたら、次にRubyスクリプトを作成し、Ruby2Dを使えるようにします。

Ruby2Dをrequireする最小のコードを表します。

require 'ruby2d'

○サンプルコード1：線を描く

最初に描く図形は、最もシンプルな線です。

下記のコードでは、x座標10、y座標20からx座標100、y座標200に線を描きます。

require 'ruby2d'

Line.new(
  x1: 10, y1: 20,
  x2: 100, y2: 200,
  color: 'red'
)

show

上記のコードは、左上を原点とする座標系上に赤い線を描画します。

最後のshowは、描画を画面に表示するためのメソッドです。

○サンプルコード2：円を描く

次に、円を描いてみましょう。

下記のコードは、中心座標がx座標200、y座標150で、半径が100の円を描きます。

require 'ruby2d'

Circle.new(
  x: 200, y: 150,
  radius: 100,
  color: 'blue'
)

show

このコードでは、指定した座標に青色の円を描画します。

●Rubyでの図形描画の応用

基本的な図形描画の方法をマスターしたら、次はそれを応用しましょう。

色を変えたり、複数の図形を組み合わせたりすることで、さまざまな表現が可能になります。

○サンプルコード3：色をつける

図形に色をつけることで、視覚的な強調や美的な効果を加えることができます。

下記のコードは、赤、緑、青の三つの円を描く例です。

require 'ruby2d'

Circle.new(
  x: 100, y: 100,
  radius: 50,
  color: 'red'
)

Circle.new(
  x: 200, y: 200,
  radius: 50,
  color: 'green'
)

Circle.new(
  x: 300, y: 300,
  radius: 50,
  color: 'blue'
)

show

このコードを実行すると、それぞれ異なる色の円が描かれます。colorパラメータに色の名前を文字列で指定することで、図形の色を制御できます。

○サンプルコード4：形を組み合わせる

複数の図形を組み合わせることで、より複雑な図形を描くことができます。

下記のコードでは、線と円を組み合わせて、顔を描いています。

require 'ruby2d'

Circle.new(
  x: 200, y: 200,
  radius: 100,
  color: 'yellow'
)

Circle.new(
  x: 170, y: 170,
  radius: 20,
  color: 'black'
)

Circle.new(
  x: 230, y: 170,
  radius: 20,
  color: 'black'
)

Line.new(
  x1: 170, y1: 250,
  x2: 230, y2: 250,
  color: 'black',
  width: 10
)

show

このコードでは、黄色の円で顔を描き、黒の円で目を描き、黒い線で口を描いています。

●図形描画での注意点と対処法

Rubyで図形を描く際の注意点として、座標の指定方法が挙げられます。

Ruby2Dでは、画面の左上を(0,0)とする座標系を採用しています。そのため、座標を指定する際はこの点を起点に考える必要があります。

また、図形描画の際には色指定も重要です。

Ruby2Dでは、色を文字列で指定することができますが、基本的な

色しか指定できません。より多くの色を使用する場合は、RGB形式で色を指定すると良いでしょう。

例えば、赤は(255,0,0)、緑は(0,255,0)、青は(0,0,255)となります。

Circle.new(
  x: 100, y: 100,
  radius: 50,
  color: [255, 0, 0] # RGB for red
)

このコードでは、RGB形式を使用して円の色を赤に指定しています。

●Rubyでの図形描画のカスタマイズ方法

Ruby2Dを使うと、図形描画だけでなく、アニメーションの作成やイベントの取扱いも可能です。

これにより、インタラクティブなプログラムを作成することができます。

○サンプルコード5：アニメーションを作る

次のコードは、円が画面上を移動するアニメーションを作成します。

require 'ruby2d'

circle = Circle.new(
  x: 320, y: 240,
  radius: 30,
  sectors: 32,
  color: 'fuchsia',
  z: 10
)

update do
  if circle.contains?(Window.mouse_x, Window.mouse_y)
    circle.color = 'lime'
  else
    circle.color = 'fuchsia'
  end
end

show

このコードでは、マウスが円の上にあるときには色が変わるアニメーションを作成しています。

円の色は、マウスの位置によって変化します。

○サンプルコード6：イベントに反応する

また、Ruby2Dでは、ユーザーからの入力（イベント）を取得して、それに応じた処理を行うことも可能です。

次のコードは、キーが押されたときに画面上のメッセージを更新する例です。

require 'ruby2d'

message = Text.new('Hello World!', color: 'green')

on :key_down do |event|
  message.text = 'Key is down'
end

on :key_up do |event|
  message.text = 'Key is up'
end

show

このコードは、キーが押されている間は’Key is down’と表示し、キーが離されたら’Key is up’と表示します。

これらの技術を組み合わせることで、Rubyを使った図形描画はさらに楽しくなります。

図形描画だけでなく、ゲーム作りなども可能になりますので、ぜひチャレンジしてみてください。