REALbasicでBasicプログラミング

REALbasic かってに連載します（第2回）

　REALbasicでプログラムを書き込んでいくとき、ときどきまだ打ち込んでいない文字が薄く出てくることがあります。これはREALbasicが入力を補助する機能を持っているためで、薄く出てきた文字を入力したいときは、「tab」キーを押せばそのまま入力されます。
　　第2回　- Canvasを使ってみよう -

　前回のリサージュ図形はいかがでしたか。グラフィック関係の命令は、みな試してみたことだと思います。今回は、canvasにグラフを描いてみることにします。canvasに描くメリットは、グラフを描くプログラムを書いた後からそのグラフ全体の位置を、ウィンドウ内で簡単に変更できることです。
　
　　-　準備　（前回を参考に）-
　

REALbasicのアイコンをダブルクリックすると、初期画面が出ます。　まずEditメニューのEditor Settingsを選びます。ここでDefault Control FontのFontを「System」に変更しておきます。これで表示に日本語が使えるようになります。
　Untitledのウィンドウをアクティブにして、作業をはじめます。まずTitleの欄にはUntitleと表示されています。この「Untitle」を「リサージュ0.2」に変更して下さい。
HasBackColorにチェックを入れて、BackColorのプロパティをダブルクリックして好きな色を選んで下さい。

ツールボックスからボタンをドラッグして「リサージュ0.2」のウィンドウに持ってきます。このボタンに、終了のプログラムを書き込んで下さい。ボタンをダブルクリックして「quit」でしたね。
　-　２つめのボタンに総てを詰め込む　-

　２つめのボタンを「リサージュ」のウィンドウに持ってきます。Captionの欄には「スタート」とでもしておきます。
　REALbasicでは、グラフはCanvasという画面に描くのが普通です。Canvasはツールボックスにある夕日の絵（朝日かな？）の付いたアイコンです。これを「リサージュ0.2」のウィンドウに持ってきます。PropertiesのウィンドウにはNameの欄にCanvas1と表示されているはずです。Canvas1のプロパティには、このCanvas1という画面自身の位置を表す、Left（左の座標）,Top（上の座標）,Width（幅）,Height（高さ）やPICT形式の画像を張り付けるBackdropなどがあります。マウスを使ってアクティブなCanvas1のハンドルをドラッグすると、これらの位置のプロパティが変化します。ここではPropertiesのウィンドウ内で、これらの値を、Leftは10　,Topは10　,Widthは200　,Heightは200に変更します。先ほどの２つのボタンはこれにかからない位置に配置し直して下さい。これでグラフを描く準備ができました。
「リサージュ0.2」のウィンドウ内の「スタート」と表示されたPushButton2をダブルクリックする。
プログラムのコードを書き込むウィンドウが開きます。
Sub Action()
 |
End Sub
と表示されていますので、ここにプログラムを書いていきます。
　座標軸を描くコードは以下のようになります。
Sub Action()
　canvas1.graphics.drawline 10,50,190,50
　canvas1.graphics.drawline 50,10,50,190
　canvas1.graphics.drawstring "y",50,10
　canvas1.graphics.drawstring "x",90,50
End Sub
「canvas1.graphics.drawline 10,50,190,50」は、座標点（10,50）と（190,50）を結ぶ直線をcanvas1に描く命令で、REALbasicでは、「canvasコントロールにgraphicsオブジェクトの直線描画のメソッド」という言い方をします。前回との違いは、「canvas1.」がはじめについて、どの画面に描画するのかをはっきり指定していることです。
　「リサージュ0.2」のウィンドウ内に直接描画する場合は、本来であればこのウィンドウのNameである「Window1」を頭に付けて「window1.graphics.drawline 10,50,190,50」とすべきところですが、「Window1」の中に含まれたボタンに、Window1への描画プログラムを書く場合は、「Window1」は頭に付けません。ですから前回の場合は「graphics.drawline 10,50,90,50」と表現したわけです。
メニューのDebugからRunを選択して、確認してみて下さい。そのあと忘れずに、保存して置いて下さい。REALbasicは、まだ不安定なところがありますので、いつ止まっても大丈夫なように注意を払っておきます。
前回は以下のコードを書き込みました。
Sub Action()
　dim n as integer
　dim x,y as double
　for n=0 to 100
　　y=40*sin(n*6.28/100)
　　x=40*sin(2*n*6.28/100)
　　graphics.drawoval x+50,-y+50,2,2
　next
End Sub
「dim n as integer」や「dim x,y as double」などの変数の定義は必ずプログラムコードの先頭でする決まりになっています。ですから、これらを先頭に持ってきて
Sub Action()
　dim n as integer
　dim x,y as double
　canvas1.graphics.drawline 10,50,190,50
　canvas1.graphics.drawline 50,10,50,190
　canvas1.graphics.drawstring "y",50,10
　canvas1.graphics.drawstring "x",90,50
　for n=0 to 100
　　y=40*sin(n*6.28/100)
　　x=40*sin(2*n*6.28/100)
　　canvas1.graphics.drawoval x+50,-y+50,2,2
　next
End Sub
となります。
せっかくですから、リサージュを作るもとになる関数も並べてグラフにしましょう。
Sub Action()
dim n as integer
dim x,y as double
canvas1.graphics.drawline 10,50,190,50
canvas1.graphics.drawline 50,10,50,190
canvas1.graphics.drawstring "y",50,10
canvas1.graphics.drawstring "x",90,50
for n=0 to 100
y=40*sin(n*6.28/100)
x=40*sin(2*n*6.28/100)
canvas1.graphics.drawoval x+50,y+50,2,2
canvas1.graphics.drawoval x+50,n+100,2,2
canvas1.graphics.drawoval n+100,-y+50,2,2
next
End Sub
以上のようになります。
　-　今回はここまで　-

　前回のリサージュを材料にして、Canvasコントロールの実際の使い方について説明しました。　ここまでくればしめたものです。次回はさらに他のコントロールをつけ加えてみましょう。

　リサージュの位相を変えるための変数 th を加えた「リサージュ0.2」をサンプルとしてダウンロードできるようにしておきます。
Sub Action()
dim n as integer
dim x,y ,th as double
th=1.2
canvas1.graphics.drawline 10,50,190,50
canvas1.graphics.drawline 50,10,50,190
canvas1.graphics.drawstring "y",50,10
canvas1.graphics.drawstring "x",90,50
for n=0 to 100
y=40*sin(n*6.28/100+th)
x=40*sin(2*n*6.28/100)
canvas1.graphics.forecolor=rgb(150,0,0)
canvas1.graphics.drawoval x+50,y+50,2,2
canvas1.graphics.forecolor=rgb(0,150,0)
canvas1.graphics.drawoval x+50,n+100,2,2
canvas1.graphics.forecolor=rgb(0,0,150)
canvas1.graphics.drawoval n+100,-y+50,2,2
next
End Sub
「canvas1.graphics.foreColor=rgb(150,0,0)」はグラフィックの色指定の命令です。色と数字の関係は、覚え書きのページに具体例があります。まさにこのために作ったサンプルです。
　「th=1.2」の部分の数字を変更して RUN させてみて下さい。
　今回の「リサージュ0.2」のソースプログラムです
　　
　　プロジェクトファイルのみです。REALbasicの最新バージョンが必要です。30 kバイト　

　　ソースコードについての質問やご意見がありましたら以下のアドレスまでご連絡下さい。
　　　　　　　　　 koko-@mx2.tiki.ne.jp

このホームページのホストはです。無料ホームページをどうぞ！