第2回 世界をマルで埋めつくせ - そら豆スクリプト入門

https://www.catch.jp:443/wiki/index.php?SoraMame.ps.js%2F%C6%FE%CC%E7%2Fpart.2

<< 1 2 3 4 5 6 7 8 >> 目次 用語集 演習回答


前回は、そら豆スクリプトで、どんなものが作れるのか
いくつか、ためしてもらった。

今回は、じっさいにプログラムを改造してみよう。
そして、プログラムを作るために必要な機能や考え方など、
プログラムを作る一番最初の感覚を味わえるはずだ。

改造といっても、ほんの1行だけなので
お気楽にチャレンジしてみてほしい。

プログラムを作る場所

次のデモページを呼び出してほしい。
これは、前回のマウスでマルを描くプログラムと同じものだ。

※FireFoxやGoogle Chromeの場合、リンクを右クリック-「別タブで開く」とすると、
別のタブでWebページをひらくことができるぞ。
これなら、この解説文とデモページを、
同時に開いておくことができて、とても便利。

さて、このデモページは、次のように、いくつかのエリアに分かれている。
ここで、プログラムを作っていくことができる。

demo_web.png
  • 実行エリア:そら豆スクリプトの実行結果を表示
  • コード編集エリア:そら豆スクリプトのコードを入力・変更
  • そうさボタン:
  • データ表示エリア:変換したプログラムなどを表示する

「そうさボタン」の「うごかす」ボタンで、プログラムを実行できるのだった。
「とまる」ボタンは、プログラムの停止だ。

そのほかのボタンについては、もうすこしあとで説明する。

データ表示エリアは、変換したプログラムなどを表示する場所だ。
そら豆スクリプトは、「Processing.js」という別のプログラミング言語に変換して実行されている。
そのための変換結果などが、ここに表示される。

これは、最初のうちは、まったく意識しなくていいだろう。

じっさいのプログラムをながめてみよう

では、じっさいのプログラムをながめてみよう。
プログラムの1行目は、次のようになっている。

//マウスの位置にマルを描く

行の先頭に、「/」(スラッシュ)が2個ならんでいると、
ここから行の最後まで、プログラムとしては無視される。
つまり、なにも実行されない。
こういう、プログラムから無視されるところを「コメント文」と呼ぶ。

じつこれ、人間用のメモなんだ。
プログラムは、コンピュータに対する動作の指示だけど
それを書いたり改造する人間にとっても、分かりやすいほうがいい。
そら豆スクリプトで書かれたプログラムは、日本語っぽくて分かりやすいけれど、
コメント文で説明を追加することで、もっと分かりやすくなる。

どんなふうにコメント文を書くかは、いくつか良い慣習がある。
たとえば、プログラムの先頭には、そのプログラムの名前・目的・作者名・利用条件などを書く。
このデモの1行目にも、これがどんなプログラムなのか書いてあるんだ。

※ちなみに、プログラムとして書かれた文章を「コード」(Code)と呼ぶ。
「コード編集エリア」は、コードを入力したり変更したりというように、
コードを「編集」する場所だ。

「コード」(Code)とは、
英語で暗号のことなんだけど、
プログラムがまるで暗号みたいに見えたので、
こんなふうに呼ばれたらしい。

改造して、シカクを描こう

じゃあ、いよいよプログラムを改造するぞ。
最初にいったように、今回改造するのは、ほんの1行だけ
なので、いくつかの行があるけれど、下から2番目の行に注目してほしい。
(ほかの行の役割などは、次回説明する)

で、この下から2番目の行だけど、
前回紹介したようにマルを描く指示だったね。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

そら豆スクリプトでは、基本的に、1行が、ひとつの指示になっている。
そして、行の一番右端にある言葉が、具体的に何をやるかの命令だ。
この場合は、一番最後に「マル」と書いてあるから、丸を描くんだ。

では、この「マル」を「シカク」に書きなおしてみよう。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

これで「うごかす」ボタンをクリックしてから、実行エリアにマウスをうごかすと、
ほらシカクを描くことができた。

sikaku_01.png

では、次のコードをためしてみてほしい。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}の四角

「シカク」の代わりに「四角」と書いてみた。
この場合、どうなったかな。

そう、なにもおこらない。

プログラムで使えるのは、登録されている命令だけなんだ。
そら豆スクリプトでは、「マル」と「シカク」は最初から登録してあるけれど
「四角」や「楕円」は、登録されていない。

それに、次のような書きまちがいをしても、なにもおこらない(シカク->シカケ)。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカケ

プログラミングでは、どんな命令が使えるか、
きちんと確認していく必要があるんだ。

もしも、プログラムが思いどおりに動かないことがあれば
書きまちがいがないか、しっかりとチェックしよう。

シカクのサイズを変える

そうしたら、もう一度シカクを描くように、プログラムを元にもどしてほしい。
右クリック-「元に戻す」とやるとラクチンかも。
もとに戻すと、こうなる。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

プログラムをうごかして、きちんと動くかどうかたしかめよう(これ重要)。
うまく動かなければ、書きまちがいがないかよく見てね。

どうしても、元にもどせない場合は、
Webブラウザの「再読み込み」ボタン(またはF5キー)を使おう。
それから、「マル」を「シカク」に書きなおす。

そうしたら、シカクを描く行を、もう一度よく見てほしい。
「{幅:50, 高さ:50}のシカク」と書いてあるよね。

この「{幅:50, 高さ:50}」が、シカクの大きさをあらわしている。
だから、次のようにこの行を書きかえると、シカクのサイズをかえることができる。

{x:@マウスX, y:@マウスY}に{幅:10, 高さ:10}のシカク
sikaku_02.png

このように、そら豆スクリプトでは、
命令の前に書く「{幅:10, 高さ:10}の」といった言葉で、こまかな指示を出す。
命令を呼び出すとき、この値(あたい)がいっしょに渡される。

プログラミングの用語では、
このように命令にあたえる値を「引数」(ひきすう)と呼ぶ。

シカクを描く位置を変える

今度は、マウスが描くシカクを、よく見てほしい。
シカクのどの位置に、マウスがあるかな?

sikaku_corner.png

そう。マウスは、シカクの左上の角にある。
このプログラムは、マウスの位置が左上になるようにシカクを描くんだ。

プログラムをよく読むと、「{x:@マウスX, y:@マウスY}に」と書いてあるよね。
これは、

  • シカクの左上の横の位置xを、マウスの横の位置に合わせる
  • シカクの左上の縦の位置yを、マウスの縦の位置に合わせる

ということ。
xとyは、縦横の位置をx-y座標をあらわしていて
数学的な慣習で、こういう記号の使い方をするんだ。

それから、

  • 「@マウスX」が、現在のマウスの横の位置
  • 「@マウスY」が、現在のマウスの縦の位置

をあらわしている。
これは、そら豆スクリプトの約束だ。

だから、次のように

{x:@マウスX, y:@マウスY}に{幅:10, 高さ:10}のシカク

と書いてあると、左上の角がマウスの位置があたるように
シカクを描くことになるんだ。

わかったかな。

練習問題

じゃあ、次のように書いたら、どのようなシカクが描かれるだろうか。

{x:0, y:0}に{幅:@マウスX, 高さ:@マウスY}のシカク

つまり、シカクの左上の位置が(0, 0)で、
シカクのサイズが、マウスの位置になって・・・
これは、ぜひ自分なりにたしかめてほしい。
(答えは、このページの最後で!)

プログラムを保存する

どうだろう。うまく改造できたかな。

せっかく改造したプログラムなので、これを保存しておこう。

このデモページでは、次の手順でプログラムを保存できる。
Windows7でFirefoxを使った場合について説明しよう。

  1. 「ほぞん」リンクをクリック
  2. ファイル保存の確認ダイアログが表示されたら、「ファイルを保存する」を選択
  3. 「OK」ボタンをクリック

これで、プログラムがファイルとして保存された。

「ダウンロードマネージャ」に、保存されたファイル名が表示されているので
右クリック-「保存したフォルダを開く」とすると、
そのプログラムのファイルを確認できる。

保存したプログラムをひらく

保存したプログラムのファイルを再度読みこむには、次のようにする。

  1. 「参照」ボタンをクリック
  2. 読み込みたいプログラムファイルを選択する
  3. 「開く」ボタンをクリック

これで、ファイルが読み込まれる。

GoogleChromeでは、「ファイルを選択」ボタンを使おう。

※もしも、うまく動かない場合には、メモ帳コピペとかしてほしい。

位置を指定する座標について

さて、プログラムでイラストなどを描くとき、
その位置をどうやって指定すればいいだろうか

フツウは「座標」という2つの値で指定する。
たとえば、シカクを描く場合、
左上の角の位置は、{x:10,y:20}という2つの値になる。

中学校あたりの数学に登場するグラフは、
X軸とY軸の直交座標上に描いていた(覚えているかな?)。
横軸をX軸、縦軸をY軸と呼び、
この二つの軸が直角に交わっている(次図)。

x-y_dimension.png

X軸とY軸の直交するところ(0,0)は、原点と呼ばれる。

直交座標上の、とある点の座標は、
原点からX軸上(横方向)の距離aと、
原点からY軸上の距離bという、
二つの値(a,b)で指定できる。

そら豆スクリプトの場合も、これとほぼ同じなんだ。
実行エリアは、左上の角が原点(0,0)になる

ただし、X軸が右に行くほど値が大きくなるのに対して、
Y軸は下にいくほど値が大きくなるところが違っている。

演習

では、いくつか自分なりに考えて、プログラムを改造してみよう。

練習問題のこたえ

さて、先ほど出した問題だが、こたえ合わせをしてみよう。
次のように書いたら、どのようなシカクが描かれるだろうか。
と、いう問題だった。

{x:0, y:0}に{幅:@マウスX, 高さ:@マウスY}のシカク

つまり、シカクの左上の位置が、実行エリアの左上(0, 0)で、
シカクのサイズが、マウスの位置になって、
その結果、左上の角からマウスの位置までが
ちょうど対角線になったシカクが描かれることになる。

どうだろう。
同じような結果になったかな?

演習問題

次のようなプログラムを作ってみよう。
ここまでの例題と同じように、
マル/シカクの行を修正すれば
できるはずだ。

これらも、自分の予想どおりになるか
じっさいに手を動かして
ためしてみよう。

1.次のようにして、幅と高さを同じにしないでマルを描く

幅:20、高さ:30

マルの位置は、マウスの位置にする

2.マルの横の位置を固定して、縦の位置はマウスに合わせて、マルを描いてみる

3.マウスの位置に合わせて、マルのサイズを指定する
マルの位置は、

x:100, y:100

にする

4.マウスの位置をシカクの位置に指定する
ただし、@マウスxと@マウスyを入れ替えてみる

5.マルを描く行のあと、次の行でシカクを描いてみる。
どんな結果が得られるだろうか


<< 1 2 3 4 5 6 7 8 >> 目次 用語集 演習回答


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: filex-y_dimension.png 1077件 [詳細] filesikaku_corner.png 978件 [詳細] filesikaku_02.png 957件 [詳細] filesikaku_01.png 1033件 [詳細] filedemo_web.png 1076件 [詳細]
Last-modified: 2012-10-30 (火) 23:20:44 (2844d)