プチコンで遊ぼう! (はてなブログ版)

任天堂3DSのプチコンで遊ぼう! [twitter:@eida_s]

はてなダイアリーから移行しました。 はてなダイアリーのURLを開いても自動的にこちらにリダイレクトされますのでご了承ください。

入門その4 お絵描きツールの続きを作ってみる

このカテゴリの記事では、プチコンで動くBASICでグラフィックを描いたりしながら、プログラミングそのものに興味をいだいてもらうことを主眼に書いています。文法その他は二の次です。 当ブログは、皆さんのプログラミングライフを応援しています。

前回の続きから...

前回、お絵描きツールの基礎として作ったのは次のようなプログラムでした。

VISIBLE 1,1,1,1,1,1
CLS:GPAGE 1:GCLS
PNLTYPE "OFF"
PENC=15
TC=0

@LOOP
GOSUB @TCH
IF TC==0 GOTO @LOOP
GOSUB @CIRCLE
TC=0
GOTO @LOOP

@TCH
IF TCHST==0 THEN RETURN
X=TCHX:Y=TCHY
TC=1
RETURN

@PEN
GPSET X,Y,PENC
RETURN

@CIRCLE
GCIRCLE X,Y,10,PENC
RETURN


これまでは色が白一色だったので、塗っていると画面が白一面になってしまいます。
そこで色をランダムっぽく変更するようにしましょう。

@LOOP
GOSUB @TCH
IF TC==0 GOTO @LOOP
GOSUB @CIRCLE
TC=0
PENC=(PENC+1)%256
GOTO @LOOP

GOTO文の前の行を追加しました。
これで色がカラーパレットの0〜255番まで循環するようになります。

さて、前回の課題は線・四角・エアブラシの追加でしたが、まずは線・四角ついでにランダムな線、ランダムな四角を追加してみましょう。

@LINE
GLINE X,Y,X+10,Y+10,PENC
RETURN

@BOX
GBOX X,Y,X+10,Y+10,PENC
RETURN

@LINERND
GLINE X,Y,X+(RND(21)-10),Y+(RND(21)-10),PENC
RETURN

@BOXRND
GBOX X,Y,X+(RND(21)-10),Y+(RND(21)-10),PENC
RETURN

まだ切り替え方法を実装していませんので、都度@LOOPの中のGOSUBの呼び出し先を変えましょう。
GOSUB @CIRCLE となっているところを、まずは、 GOSUB @LINE と変えてみましょう。

まずは@LINEの場合です。

次は@BOXの場合です。

次は@LINERNDの場合です。

次は@BOXRNDの場合です。

いずれも結構面白い感じになりました。
こういうのを上手くやっていくと、なんとなくアーティスティックなものもできてしまいそうな気さえしてきます。

さて、今度はいよいよエアブラシの作成です。
これまでとは少し違った方法が必要になります。

@AIRB
R=8
VX=RND(R*2+1)-R:VY=RND(R*2+1)-R
IF VX*VX+VY*VY>R*R GOTO @AIRB
GPSET X+VX,Y+VY,PENC
RETURN

半径Rの円の中に、ランダムに点を落とすことでエアブラシを再現します。
「半径Rの円の中」という乱数の条件は簡単ではないので、
±Rの乱数を、XとYの2つ分生成しています。(VXとVY)
ただし、これだとVX、VYが示す範囲は、正方形の領域になってしまいます。
そこで半径Rの円内に入っていない場合にもう一度乱数の生成をやり直します。
それでダメならもう一度、と繰り返します。
IF文に円の中かどうかの条件が書かれています。
これは次のような円の方程式を思い出してください。
X2+Y2≦R2

さて、実行例は次の通りです。もちろん、@LOOP中のGOSUBで@AIRBを呼ぶようにしてください。

さて、ここまで、それぞれのペンの種類を変えるには、一度編集でプログラム自体を修正していましたが、ここでボタン操作でペン種類を変えられるようにしたいと思います。

ここまで作った各種のペンは、モードを切り替えることで使い分けることができるようにします。
ボタン操作をすることでモードが切り替わることとします。

まず、初期設定にペンのモードを記憶しておく変数を追加します。

PENT=0

PENTが0なら@PEN、1なら@CIRCLE、2なら@LINE、3なら@BOX、4なら@LINERND、5なら@BOXRND、6なら@AIRBを呼び出すようにします。
メインルーチンのGOSUB @AIRBとなっている箇所を以下のようにします。

ON PENT GOSUB @PEN,@CIRCLE,@LINE,@BOX,@LINERND,@BOXRND,@AIRB

これだけではPENTを変更することができないので、ボタン操作でPENTを変更するサブルーチンを追加します。

@BTN
B=BUTTON()
IF B AND 1 THEN PENT=0
IF B AND 2 THEN PENT=1
IF B AND 4 THEN PENT=2
IF B AND 8 THEN PENT=3
IF B AND 16 THEN PENT=4
IF B AND 32 THEN PENT=5
IF B AND 64 THEN PENT=6
RETURN

B=BUTTON()で変数Bにボタン入力を取得します。
ボタン入力ごとにPENTを設定します。
最後に@BTNをメインルーチンから呼び出すように修正します。
GOSUB @TCHの前に次の行を挿入します。

GOSUB @BTN

この修正をして実行すると、十字キーとA、B、Xボタンでペン種類を切り替えできるようになります。
こんな感じにペンを切り替えて使用できます。


全体のコードは以下のようになりました。

VISIBLE 1,1,1,1,1,1
CLS:GPAGE 1:GCLS
PNLTYPE "OFF"
PENC=15
TC=0
PENT=0

@LOOP
GOSUB @BTN
GOSUB @TCH
IF TC==0 GOTO @LOOP
ON PENT GOSUB @PEN,@CIRCLE,@LINE,@BOX,@LINERND,@BOXRND,@AIRB
TC=0
PENC=(PENC+1)%256
GOTO @LOOP

@TCH
IF TCHST==0 THEN RETURN
X=TCHX:Y=TCHY
TC=1
RETURN

@BTN
B=BUTTON()
IF B AND 1 THEN PENT=0
IF B AND 2 THEN PENT=1
IF B AND 4 THEN PENT=2
IF B AND 8 THEN PENT=3
IF B AND 16 THEN PENT=4
IF B AND 32 THEN PENT=5
IF B AND 64 THEN PENT=6
RETURN

@PEN
GPSET X,Y,PENC
RETURN

@CIRCLE
GCIRCLE X,Y,10,PENC
RETURN

@LINE
GLINE X,Y,X+10,Y+10,PENC
RETURN

@BOX
GBOX X,Y,X+10,Y+10,PENC
RETURN

@LINERND
GLINE X,Y,X+(RND(21)-10),Y+(RND(21)-10),PENC
RETURN

@BOXRND
GBOX X,Y,X+(RND(21)-10),Y+(RND(21)-10),PENC
RETURN

@AIRB
R=8
VX=RND(R*2+1)-R:VY=RND(R*2+1)-R
IF VX*VX+VY*VY>R*R GOTO @AIRB
GPSET X+VX,Y+VY,PENC
RETURN

さて、おおよそお絵描きツールはできました。
今は色を自分で自由に選べないので、あくまで遊び程度にしか使えません。色を選べるともうちょっとツールとして使えそうです。
円、線も固定的な大きさのものがタッチ位置に描かれるだけなので、これもタッチ位置に応じて描かれた方がよいでしょう。
これらの修正を考えてみてください。
ではまた次回まで!