M5Stackでサンプルスケッチを試す

先日、M5Stackの環境構築を行いましたので、いくつか簡単なスケッチを作って、M5Stackならではの機能について動作確認をしてみたいと思います。

液晶画面に文字を書く

スケッチは以下のとおりです。

#include <M5Stack.h>
  
void setup() {
  M5.begin();
  for(int i=1 ; i<=7 ; i++){
    M5.Lcd.setCursor(0, i*i*4);
    M5.Lcd.setTextSize(i);
    M5.Lcd.print("size:");
    M5.Lcd.print(i);
  }
}

void loop() {
}

液晶画面に文字が表示されます。

液晶画面に図形を描く

スケッチは以下のとおりです。

#include <M5Stack.h>
  
void setup() {
  M5.begin();
  M5.Lcd.drawLine(60, 20, 260, 220, WHITE);
  M5.Lcd.drawLine(60, 220, 260, 20, WHITE);
  M5.Lcd.drawCircle(160, 120, 100, YELLOW);
  M5.Lcd.drawRect(60, 20, 200, 200, GREEN);
}

void loop() {
}

液晶画面に図形が表示されます。

液晶画面にJPEG画像を表示する

「pond.jpeg」という名前の画像ファイル(JPEG)を準備します。サイズは横320ピクセル、縦240ピクセルにしておきます。
microSDカードに「pond.jpeg」を書き込み、M5Stackのカードスロットに差し込みます。
スケッチは以下のとおりです。

#include <M5Stack.h>
  
void setup() {
  M5.begin();
  M5.Lcd.drawJpgFile(SD, "/pond.jpeg", 0, 0);
}

void loop() {
}

液晶画面に画像が表示されます。

ボタンを押したときに音を鳴らす

ボタンA、B、Cを押した時に、それぞれ異なる図形を液晶画面に表示させ、異なる音を鳴らします。
スケッチは以下のとおりです。

#include <M5Stack.h>
  
void setup() {
  M5.begin();
}

void loop() {
  M5.update();
  if(M5.BtnA.wasPressed()){
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.fillCircle(160, 120, 100, RED);
    M5.Speaker.tone(440, 200);
  }
  if(M5.BtnB.wasPressed()){
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.fillRect(60, 20, 200, 200, YELLOW);
    M5.Speaker.tone(220, 200);
  }
  if(M5.BtnC.wasPressed()){
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.fillTriangle(45, 220, 275, 220, 160, 20, GREEN);
    M5.Speaker.tone(880, 200);
  }
}

ボタンを押すと音が鳴り、液晶画面に図形が表示されます。

なお、私がM5Stack、M5StickCの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。


ごく基本的なところから、かなり複雑なスケッチや、ネットワーク接続など、比較的高度なものまで、つまづかずに読み進めていけるような構成になっており、大変わかりやすい本です。


このサイトで書いている、M5Stackシリーズ(M5Stack、M5StickCなど)に関するブログ記事を、「さとやまノート」という別のブログページに、あらためて整理してまとめました。

他のM5Stackシリーズの記事にも興味のある方は「さとやまノート」をご覧ください。