webで簡単にスマホ連携のメディアアート作品を作る

# 概要
プログラミングを始めたばかり人の向けに
簡単にスマホ連携したメディアアートが作れる環境を作ります。

# 事前に用意するもの
- chrome
- メールアドレス
- スマートフォン

# 環境設定
まずはオンラインエディターの[p5 editor](https://editor.p5js.org/)をChromeで開きましょう
<img width="502" alt="Screen Shot 2019-09-26 at 12.13.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/6d087585-d1e5-288a-91f9-5693c773a34c.png">
今回使うP5.jsというのはJavascriptという言語を使って、簡単に図形やグラフィカルな描画ができるツールです。
Javascriptはwebで動かせるので、難しい環境設定がないのがいいところです。
なのでがっつりプログラミングをやっているって方でなくてもとっつきやすいと思います。

そしてp5 editorはその簡単な環境設定すらいらない最強のツールです。
一番最初にプログラミングやるならほんとにこれをお勧めします。
ディズニーのプログラミング教材[テクノロジア魔法学校](https://www.technologia-schoolofmagic.jp/)もこちらを一部使っています。

# 手順
## 1 動くか試す

<img width="1680" alt="Screen Shot 2019-09-26 at 12.20.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/cadc0353-9d49-e62b-9c25-47793a9550a1.png">
[リンク](https://editor.p5js.org/)を開くとこのような画面が出てきます。
まずは左上のYoutubeみたいな実行ボタンを押してみましょう
<img width="1680" alt="Screen Shot 2019-09-26 at 12.24.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/467c21fd-d4c7-553e-c191-efef9dafc3b5.png">
右側に灰色の四角が出てきたら成功です。
## 2 スマホ連携設定
続いてスマホで色々試せるようにurl発行できるアカウントを作っていきます。
<img width="1680" alt="Screen Shot 2019-09-26 at 12.36.12 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/2f4e9df5-1560-a7eb-7cb2-2b2021c48770.png">
右上のsign upを押してみましょう
<img width="1680" alt="Screen Shot 2019-09-26 at 12.38.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/561d287b-8b2b-0cc2-f711-78bf857e7c03.png">
いつものように名前・メール・パスワードを入れてアカウント登録します
<img width="1680" alt="Screen Shot 2019-09-26 at 12.40.28 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/852bbfff-7ad9-9bae-ab92-c785a91991bb.png">
登録が完了したら右上にアカウント名が出てきます。
この状態で保存すると自分のアカウントに紐づいてurlが発行されるようになります。
Macは ⌘ + S windowsは Ctrl + Sで保存してみてください
<img width="383" alt="Screen Shot 2019-09-26 at 12.43.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/fea82886-23cc-19a2-a02d-a2b174df9a8a.png">
urlのバーに保存したコードのリンクが生成されます。
chromeのurlシェアの機能を使って、パソコンのurlを簡単にスマホに共有します。
![Sep-26-2019 12-47-37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/69f8eec6-6bcf-6a9e-0e5f-a052c63538d1.gif)
urlバーの右側にマウスをホバーするとパソコンとスマホのマークがあわられます。
<img width="314" alt="Screen Shot 2019-09-26 at 12.49.16 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f1026fb8-ede8-5b2f-11d5-dfa3b310f722.png">
クリックしてみると同じアカウントでchromeにログインしているデバイスが表示されると思うのでスマホを選択してみてください
<img width="349" alt="Screen Shot 2019-09-26 at 12.52.20 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/b4130cda-e28a-4895-4149-5247a066bbe1.png">
パソコンにはこんな通知が出て![IMG_1960.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/7d2a3abb-4f68-6943-6de5-89ef6b6a6fbf.jpeg)
スマホにはこんなのが出るのでopenを押すとスマホでも同じ画面が出てきます。

## 3　編集
基本的にコードを書くのはパソコンの方が早いので、
パソコンで編集してできたものをスマホで見ていくことにします。
[p5.jsの例](https://p5js.org/reference/#/p5/deviceShaken)にもある簡単なコードを書いていきましょう

```
let value = 0;

function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function deviceShaken() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}
```

このコードを上書きして書いていきましょう！
今は内容を理解していなくても大丈夫です！

ざっくり解説すると
valueという変数が色を変える数値です。最初は0(黒)なんですが、
deviceShakenという関数がスマホが揺れることによって呼び出されてvalueの値を更新しているので
振ったら色がだんだん変わっていきます。
**保存するのを忘れずに！**

![IMG_1960.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/b3216e5e-3d30-2b6f-e04c-faae3ca313c6.jpeg)
スマホの右下にある点３つのボタンを押して、
![IMG_1961.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/745965f1-1456-8716-c30c-380babf5595c.jpeg)
一番上のReloadを押してコードを更新しましょう。

スマホを振ると、色が変わっていくと思います。

## 4 発展
P5.jsの仕組みを知っていくとどんどんできることが増えていきます。
P5.js公式の[例](https://p5js.org/examples/)を見てみると色んな作品があって、楽しそうですね。
初めてp5を始める方は先に述べた[テクノロジア魔法学校](https://www.technologia-schoolofmagic.jp/)をやってみると楽しく学べるかもしれません。
プログラミングを学んで、素敵なメディアアート作品を作っていきましょう！

# 備考
safariでurlにアクセスする時は
settings→safari→motion & orientation Access を有効にすると振るのを認識してくれます！
基本はchromeがいいと思います！