Sunaba講座 #4 四角の描画、２重ループの活用

はじめに

sunabaの導入については「Sunaba講座 #0 導入編」をご覧ください。各講座へのリンクも貼ってあります

課題03　四角を描く

画面左上端に 横幅２０ドット × 高さ５ドットの長方形を描く（色は塗潰し）
今回も画面メモリ番号直打ちの１００行プログラムを書いてみましょう。前回同様、コピペを活用してください。

• 研修では．．．

  早見表.pdfを見ながら試行錯誤してみたい人はそうしましょう。作業を終えたら戻ってきてください

---

課題03の解説（Ver.1）

以下のヒントを順に読み進めて、頭の中に何かがひらめいたらコードを書き始めてみましょう。

1. 100行プログラムを見て規則性を探る
2. 課題02 のwhileプログラムを使って解決できないか考える
3. 画面のどの位置からスタートして横線を描いたか？に注目する
4. 課題02は60000番から100ドット長の横線を引いた。今回の横方向の長さは？
5. 四角を横線の集合だと考える
6. ２０ドット長の横線を５本、縦に並べるプログラムを書いてみましょう
7. コピペを活用しよう
   疑似コード

   
    60000番スタートかつ20ドット長の横線を描くプログラム
    6□□□□番スタートかつ20ドット長の横線を描くプログラム
    6□□□□番スタートかつ20ドット長の横線を描くプログラム
    6□□□□番スタートかつ20ドット長の横線を描くプログラム
    6□□□□番スタートかつ20ドット長の横線を描くプログラム
    

---

課題03の解説（Ver.2）

上記 Ver.1のままでは、四角の縦の長さに比例してプログラムが長くなるのが大問題です。
前回の課題02で100行プログラムを繰り返しプログラムに変更したときのプロセスを再確認して、今回の解決につなげたいと思います。

• Ver.1のプログラムの規則性を考える

  • どこが変化している？ ： 横線スタートの画面メモリ番号
  • 変化の規則性は？ ： ＊＊＊＊＊＊＊＊＊＊（各自考えてほしい！）
  • 式にするには？ ： 上記の規則性を含んだ式を作る（ヒントになってませんね・・・。）

• 全体像
  文章だけで全体像を把握してもらおうと考えたのですが、予想外に難しいので諦めます。。
  疑似コード ＆ コメントで示すことにします。コメントの量が多めですが、あくまでもこの場での解説用です。普段はこんな書き方はしません。

  疑似コード

  memory[1] -> 0  # 縦長さカウンタ
  while memory[1] < ________
      # 横線プログラム 開始
      memory[0] -> 0    # 横線長さカウンタ 
      while memory[0] < ________
          点描画       # 横線長さカウンタと縦長さカウンタで構成した式
          横線長さカウンタのカウントアップ
      # 横線プログラム 終わり
      縦長さカウンタのカウントアップ
  

• 演算処理の優先順位

  • 擬似コード内の 『 点描画　# 横線長さカウンタと縦長さカウンタで構成した式 』は作れましたか？

  • 答えを言うことになりますが、60000 + 縦カウンタ × 100 + 横カウンタ　という式で、点描画させたい画面メモリ番号を指示できます。しかし、Sunaba特有の問題があります。試しに、縦カウンタが３、横カウンタが５の時、つまり左上端からわずか右下の所に点描画しようとするプログラムを書いてみます

    問題ありサンプル

    memory[0] -> 5
    memory[1] -> 3
    memory[60000 + memory[1] * 100 + memory[0]] -> 990099
    

  • 実行するとメモリ番号が大きすぎてエラーになります。これはSunabaには演算子の優先順位がない、という仕様によるものです。算数でいう+-よりも×÷を優先する、あのルールです（前回の式の解説でも触れています）

  • Sunabaの式の計算は左から右に処理していきます。つまり3行目は 60000 + memory[1]が最初に計算されてしまいます。その後、＊100 が実行されて大きな値になってしまったわけですね。

  • 優先順位をコントロールしたい場合は **カッコ（）**を使います。

  • 60000 + (memory[1] * 100) + memory[0] とすればOKです。修正して実行してみましょう

• 今回も課題のお手本コードの掲載はありません。疑似コードをヒントに長方形が描けていれば大丈夫です。

---

次は、Sunaba講座 #5　点を動かす ＆ 画面更新 についてです。