p5.js入門記-その３#つぶやきProcessingをやってみる-

# 前回まで
+ その１：[雪を降らせる](https://qiita.com/choco_py3/items/02200022d9b6e73544f8)
+ その２：[Flaskにp5.jsの画像を載せる](https://qiita.com/choco_py3/items/5676b5bf8eb9bad1bb1d)

# はじめに
Twitterでのハッシュタグ、 #つぶやきProcessingをご存知でしょうか？
今回はこれをやってみようというだけの記事です。

※ #つぶやきProcessingって何？そもそもProcessingとは？という方は下記の記事を最初に読むと分かりやすいと思います！
[#つぶやきProcessing Playerの紹介](https://qiita.com/nariakiiwatani/items/ded9801a3b6b692757f0)

# つぶやきProcessing Editorを使ってみる

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ぼくの作った p5.js 用つぶやきP5エディタ、minify も GIF 出力もできて最高なのでみなさんもぜひ使ってみてください <a href="https://t.co/lTaj3E5atD">https://t.co/lTaj3E5atD</a> <a href="https://t.co/sTjtx7cjC1">pic.twitter.com/sTjtx7cjC1</a></p>&mdash; Naoto HIÉDA (@naoto_hieda) <a href="https://twitter.com/naoto_hieda/status/1233319607987056641?ref_src=twsrc%5Etfw">February 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

+ [つぶやきProcessing Editor](https://tsubuyaki-p5-editor.glitch.me/) を使ってみます。
+ 説明不要なぐらいシンプルで分かりやすいのですが、まずはデフォルトで表示されているサンプルコードを動かしてみることにします。
![スクリーンショット 2021-01-13 13.29.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289055/803dbc7b-7dd8-63c9-912f-a8eddaa81a15.png)

+ "↓minify&run"でコードが圧縮され、下の方にプレビュー画面が表示されます。
![スクリーンショット 2021-01-13 13.31.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289055/5bbbc407-b130-b27f-56fe-fb2aa84d5e99.png)

+ "generate gif"で、プレビュー画面を適当に動作させると、プレビュー画面の下にGIFファイルが作成されます。
![スクリーンショット 2021-01-13 13.35.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289055/48561aa6-058f-7853-23e4-94d8d693e121.png)

+ あとは圧縮されたコード（画面真ん中）に #p5js や #つぶやきProcessingなどのハッシュタグを追加し、GIF画像（※静止画でなければ）を追加してツイートするだけ！とっても簡単ですね！


# 実際に試してみた
+ 今回は私が公開している[この作品](https://flaskandheroku.herokuapp.com/p5js2)をつぶやいてみようと思います。
（※[公式](https://p5js.org/)のサンプルを参考に作りました。）

```sample.js
function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(235);
  fill(255,0,0,100);
  ellipse(mouseX, height/2,mouseY/2+10);
  fill(255,255,255,100);
  var inverseX = width-mouseX;
  var inverseY = height-mouseY;
  ellipse(inverseX, height/2,(inverseY/2)+10);
}
```


+ 実際にやってみるとこんな感じ。（※キャンバスサイズは元のサンプルコードと同じサイズに合わせました。 ）
![スクリーンショット 2021-01-13 13.55.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289055/0212591b-f399-e3b1-ffa9-d5cd8db9912d.png)



# 出来たツイート

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">setup=()=&gt;{createCanvas(192,157),noStroke()},draw=()=&gt;{background(235),fill(255,0,0,100),ellipse(mouseX,height/2,mouseY/2+10),fill(255,255,255,100);var e=width-mouseX,i=height-mouseY;ellipse(e,height/2,i/2+10)};//<a href="https://twitter.com/hashtag/tinycode?src=hash&amp;ref_src=twsrc%5Etfw">#tinycode</a> <a href="https://twitter.com/CCodeMadrid?ref_src=twsrc%5Etfw">@CCodeMadrid</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProcessing?src=hash&amp;ref_src=twsrc%5Etfw">#つぶやきProcessing</a> <a href="https://t.co/VuWYWbIwts">pic.twitter.com/VuWYWbIwts</a></p>&mdash; choco_py3 (@choco_py3) <a href="https://twitter.com/choco_py3/status/1347712001175244800?ref_src=twsrc%5Etfw">January 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>