M5Stack-core2でグラデーションの表現をする

M5Stack core2でM5stack系を始めて使用したため、色の表現方法を確認するためにグラデーションのデモを書いてみました。

動いている様子

グラデーションテスト#M5core2 pic.twitter.com/X5Bf0FLnIi

— 𝘄𝗮𝗸-𝘁𝗲𝗰h💡電子工作 (@wak_tech) September 22, 2020

サンプルコード（コピペで動く）

#include <M5Core2.h>
#include <Fonts/EVA_20px.h>


//rgbを色に変換して指定座標に描画
void setRGB(int r, int g, int b, int posx, int posy){
  uint16_t color = M5.Lcd.color565(r,g,b);
  M5.Lcd.drawPixel(posx,posy,color);
}

void setGradation(int r, int g, int b, int changecolor){
  int red = r;
  int green = r;
  int blue = r;
  for(int y = 0; y < 240; y++){
    for(int x = 0; x < 320; x++){
        if(changecolor == 1){
          red = x/320.0 * r;
          green = (1.0 - y/240.0)*g;
          blue = (1.0 - y/240.0)*b;
        }else if (changecolor == 2){
          green = x/320.0 * g;
          red = (1.0 - y/240.0)*r;
          blue = (1.0 - y/240.0)*b;          
        }else if (changecolor == 3){
          blue = x/320.0 * b;
          green = (1.0 - y/240.0)*g;
          red = (1.0 - y/240.0)*r;
        }
        setRGB(red,green,blue,x,y);
    }
  }
}
void placeString(short int X, short int Y, char *string){
  M5.Lcd.setCursor(X, Y);
  M5.Lcd.printf(string);
}
void setup() {
  M5.begin(true, true, true, true);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextColor(BLACK);
  M5.Lcd.setTextSize(2);
  delay(1000);
}

void loop() {
  setGradation(255,0,0,1);
  delay(1000);
  setGradation(255,100,100,1);
  delay(1000);    
  setGradation(255,255,255,1);
  delay(1000);    
  setGradation(0,255,0,2);
  delay(1000);    
  setGradation(100,255,100,2);
  delay(1000);    
  setGradation(255,255,255,2);
  delay(1000);    
  setGradation(0,0,255,3);
  delay(1000);    
  setGradation(100,100,255,3);
  delay(1000);    
  setGradation(255,255,255,3);
  delay(1000);    

}

プチ解説

setGradation(r,g,b,mode);

で色を画面に表現できるようにしました。modeは1,2,3がそれぞれr,g,bの色を弱くしていくグラデーションに対応しています。

描画の更新自体が遅いため、関数を呼び出しても0.5秒ほど待たないと画面全体が切り替わりません。