楽しく学ぶプログラミング （難易度★★☆）課題：お絵描きしてみよう#M5Stack#ArduinoIDE

ボク、ななな。このページを見てくれてありがとう！
ここでは、M5Stackというワンボードマイコンを使って、楽しくプログラミングを学習するための課題を出しているよ。課題に挑戦してプログラミングのスキルを磨いてね！

開発環境：Arduino IDE
開発機材：M5Stack core2
難易度：★★☆

課題の解き方は最後に書いているけど、まずは自分で考えてやってみてね！

必要なスキル

この課題を解くためには以下のスキルがあった方が良いよ。スキルが不足していると感じても一度挑戦して、分からないところはネットで調べたり、お父さん、お母さん、先生に聞いたりしながらやってみてね。まずは挑戦してみることが大事だよ。

• Arduino IDEの基本的な使用方法

• C++の基礎知識

• M5Stackの基本的な機能についての理解

学べるスキル

この課題をクリアすると以下のスキルを習得できるよ。

• M5Stackのタッチパネルを扱う方法

• M5Stackの画面に描画する方法

必要なもの

• M5Stack core2 ×1台

• Windows PC/Mac ×1台

• Arduino IDE

M5StackとArduino IDEを初めて使う場合は、こちらのページを参考にして最初の設定を完了してみてね。分からないことはTwitterで質問してね。

課題１　お絵描きしてみよう

M5Stackにはタッチ入力が可能な液晶ディスプレイが搭載されているよ。この液晶ディスプレイに指でお絵描きできるようなプログラムを作成してみてね。

課題を解くためのヒントをいくつか書いておくよ：

• 液晶ディスプレイの解像度（画面に表示できるピクセルの数）は320×240だよ。

• タッチされた点を知るための関数は M5.Touch.getPressPoint() だよ。 この関数は、タッチされた座標を TouchPoint_t型で返すよ。TouchPoint_t.xとTouchPoint_t.yにタッチされたX座標とY座標がそれぞれ入っているよ。

• 画面に黒い点を描く関数はM5.Lcd.drawPixel(x, y, BLACK);だよ。

課題に関係の無い基本のプログラムは以下に書いておくよ。このコードをArduinoのスケッチにコピーして課題を始めてね。

#include <M5Core2.h>

void setup() {
  M5.begin();
	M5.Lcd.fillScreen(WHITE);
}

void loop() {
	M5.update();
	//　ここにコードを追加するよ
}

課題が終わったら答え合わせに進んでね
↓↓↓

課題１　答え合わせ

以下に課題１のサンプルコードを記載しておくよ。このコードが唯一の正解ではなくて、色んな実現の方法があるから、全く同じじゃなくても問題無いよ。

このコードは、M5Stackの液晶ディスプレイを初期化し、タッチされた座標を取得して、取得した座標に点を描画しているよ。

#include <M5Core2.h>

void setup() {
  M5.begin();
  M5.Lcd.fillScreen(WHITE);
}

void loop() {
	M5.update();

  if(M5.Touch.ispressed()) {
    TouchPoint_t coordinate;
    coordinate = M5.Touch.getPressPoint();
    M5.Lcd.drawPixel(coordinate.x, coordinate.y, BLACK);
  }
}

少し詳しく解説するよ

以下のコードに書かれたsetup関数はプログラム実行前に1度だけ呼び出されるよ。ここでは、M5Stackを初期化し、液晶ディスプレイを白色で塗りつぶしているよ。

void setup() {
  M5.begin();
  M5.Lcd.fillScreen(WHITE);
}

次にloop関数の中身について説明するね。

loop()関数はM5Stackが起動している間は無限に繰り返されるループだよ。

isPressed()関数は、M5Stackのタッチパネルが押されているかどうかを判定する関数だよ。この関数がtrueを返した場合のみ画面にお絵描きしたいから、if文でisPressed()関数の戻り値がtrueなら、画面に点を描く処理を実行しているよ。

TouchPoint_t変数は、タッチされた座標を格納するための構造体だよ。getPressPoint()関数を呼ぶと、戻り値でTouchPoint_t型の値が返ってくるよ。TouchPoint_t型のxとyのメンバに、タッチされた座標のX座標とY座標がそれぞれ格納されているよ。

drawPixel()関数は、指定された座標に指定された色で点を描画する関数だよ。このコードでは、タッチされた座標に黒色で点を描画しているよ。

void loop() {
	M5.update();

  if(M5.Touch.ispressed()) {
    TouchPoint_t coordinate;
    coordinate = M5.Touch.getPressPoint();
    M5.Lcd.drawPixel(coordinate.x, coordinate.y, BLACK);
  }
}

１つ目の課題はどうだったかな？実際に動かしてみるとちょっともの足らないことがあるんじゃ無いかな？
例えば・・

• 指でなぞっても点点で描かれてペンで描いているように見えないよ

• 色が黒だけだと寂しいね

• 色んな色が選べるといいね

もし、もっとスキルを磨きたいと思ったら追加の課題をやってみてね。
有料部分では３つの追加課題と全ての課題のArduinoスケッチがダウンロードできるよ。