Wear OS の時計画面をProcessingで作ってみる

# 背景
先日，自分が所属している研究室でスマートウォッチを買いました。
何か面白いこと出来ないかなーと触っているところで，色々と記事などをあさっています。
スマートウォッチって自分の中では2，3年前が結構盛り上がっていた記憶があったので，今更ながら触ってみるかって思いでしたが，調べてみると色々と発見がありました。今回はその時のメモと，ProcessingでWatchFace（時計画面）を作ってみたので，開発の流れを書いてみました。

# TicWatch Pro
今回買ったスマートウォッチは[TicWatch Pro](https://www.amazon.co.jp/Ticwatch-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81-%E9%95%B7%E3%81%84%E5%BE%85%E6%A9%9F%E6%99%82%E9%96%93-Google-Android%E5%AF%BE%E5%BF%9C/dp/B07DNX7CY3)という中国Mobvoi(モブボイ)社が販売している最新のスマートウォッチを買いました(29000円くらい)。この他にも[TicWatch E](https://www.amazon.co.jp/dp/B079RCK64S/ref=sspa_dk_detail_1?psc=1&pd_rd_i=B079RCK64S&pd_rd_w=QTcQx&pf_rd_p=6f76bf7b-14cf-4ddf-acee-6d90d5cf8e2e&pd_rd_wg=qhBJk&pf_rd_r=FKQR7PAWDM2D5D0AP7WK&pd_rd_r=5868aa5d-4ad3-11e9-a483-a76aae300e5a)とか，[TicWatch E2](https://www.amazon.co.jp/%E3%80%90%E5%88%9D%E7%99%BA%E5%A3%B2%E3%80%91TicWatch-%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%83%8D%E3%82%B9-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81-Google-Android%E5%AF%BE%E5%BF%9C/dp/B07KPDRVX1/ref=pd_sbs_0_2/357-1471527-8886263?_encoding=UTF8&pd_rd_i=B07KPDRVX1&pd_rd_r=66bb5b0f-4ad3-11e9-a839-e31a414e14aa&pd_rd_w=lraPL&pd_rd_wg=WkWZX&pf_rd_p=ad2ea29d-ea11-483c-9db2-6b5875bb9b73&pf_rd_r=PGNHWQK92RYANWV14KYH&psc=1&refRID=PGNHWQK92RYANWV14KYH)，[TitWatch C2](https://www.amazon.co.jp/TicWatch-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81-Google-IP68%E9%98%B2%E6%B1%97-Android%E5%AF%BE%E5%BF%9C/dp/B07HVNW7PQ/ref=pd_sbs_0_4/357-1471527-8886263?_encoding=UTF8&pd_rd_i=B07HVNW7PQ&pd_rd_r=66bb5b0f-4ad3-11e9-a839-e31a414e14aa&pd_rd_w=lraPL&pd_rd_wg=WkWZX&pf_rd_p=ad2ea29d-ea11-483c-9db2-6b5875bb9b73&pf_rd_r=PGNHWQK92RYANWV14KYH&psc=1&refRID=PGNHWQK92RYANWV14KYH)みたいなのもあるらしいですね。TicWatch Proは，バッテリーの持ちが良いらしく頑張れば3，4日は持つらしいです。![IMG_2587.JPG](https://qiita-image-store.s3.amazonaws.com/0/191122/1f8eb451-cb6e-df7b-0e19-d613b7dcb314.jpeg)
結構レビューしているサイトがあるので[最後にいくつか載せておきます。](#参考)

# Wear OS by Google
OSの名称が，Android Wearから[Wear OS by Google](https://wearos.google.com/intl/ja_jp/#hands-free-help)に変更されていたんですね。
一番ネックであったバッテリー管理も改善されているそうです。
最新バージョンは2.6でした(2019/3/20)

# Processing での開発
Javaベースの[Processing](https://processing.org/)には，Android端末への書き出しができる，Androidモードが備えられています。Androidモードでは，Androidアプリの他に，Androidの壁紙Wallpaper，スマートウォッチの画面WatchFace，VRの2眼画面の書き出しが出来ます。
![スクリーンショット 2019-03-20 17.10.06.png](https://qiita-image-store.s3.amazonaws.com/0/191122/673b8c55-04be-aacb-d1e4-ecf46c0ac1ea.png)
![スクリーンショット 2019-03-20 17.12.29.png](https://qiita-image-store.s3.amazonaws.com/0/191122/1877e0d8-e717-0804-8da8-832504a2d631.png)

Androidモードがない場合は，右端のモード選択ボタンの[Add Mode..]からインストールすることが出来ます。

### 前準備
開発をする前にやっておかないといけないことがあります。Android端末で開発をやったことがある人はわかると思いますが，まず最初に開発者オプションを有効にします。
スマートウォッチの設定メニューから
設定 -> システム -> 端末情報 -> ビルド番号を7回連打します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/191122/ac58502c-d138-fc50-a11f-2be1f9a38d37.jpeg" width="400">
すると開発者向けオプションが設定メニューに現れます。

### Processingコード
画面サイズはTicWatchProの場合，横400，縦400です。
このコードは昔にどこかのサイトを参考にして作ったものをスマートウォッチ用にしました。
Processing時計とかでググると出てくるかも(笑)

```Java
int MARGIN = 20;

void setup() {
  size(400,400);
  stroke(255);
  smooth();
  frameRate(30);
}

void draw() {
  background(0);
  float s = second();
  float m = minute() + (s/60.0);
  float h = hour()%12 + (m/60.0);
  translate(width/2, height/2);
  rotate(radians(180));
  
  //なんとなくの文字
  pushMatrix();
  rotate(radians(180));
  translate(0,70);
  fill(255,0,0);
  textSize(30);
  textAlign(CENTER);
  text("WatchFace", 0,0);
  text("for", 0,30);
  text("Processing", 0,60);
  popMatrix();

  // 文字盤の表示
  pushMatrix();
  fill(128);
  noStroke();
  for(int i=0; i<60; i++){
    rotate(radians(6));
    ellipse(width/2-MARGIN,0,3,3);
  }
  for(int i=0; i<12; i++){
    rotate(radians(30));
    ellipse(width/2-MARGIN,0,10,10);
  }
  popMatrix();
  
  noFill();
  stroke(255);
  // 秒針
  pushMatrix();
  rotate(radians(s*(360/60)));
  strokeWeight(1);
  line(0,0,0,width/2-MARGIN);
  popMatrix();

  // 分針
  pushMatrix();
  rotate(radians(m*(360/60)));
  strokeWeight(2);
  line(0,0,0,width/2-MARGIN);
  popMatrix();

  // 時針
  pushMatrix();
  rotate(radians(h*(360/12)));
  strokeWeight(4);
  line(0,0,0,width/3-MARGIN);
  popMatrix();
}
```
エラーがですに書き出しが成功したら，スマートウォッチのWatchFace選択画面にProcessingのアプリケーションが追加されているはずです。


![スクリーンショット 2019-03-20 20.20.59.png](https://qiita-image-store.s3.amazonaws.com/0/191122/f73c7488-fd65-1725-c3c2-bd80c018238d.png)





# 参考
TicWatch Proレビューサイト
・[物欲ガジェット](https://butsuyoku-gadget.com/ticwatch-pro-review/)
・[リブウェル！](https://livewell-m.com/entry/ticwatch-pro/)