p5.jsを使ったパターン作成（創算部 第5回 資料）

創算部 第5回（https://engineercafe.jp/ja/event/7493）で使用したp5.jsをつかったパターン作成についての資料です。
ぜひご活用ください！

Transcript

1. 創算部 #5 『パターンで遊ぶ』 後藤 汰誓
2. Todayʼs naiyo. 今⽇の内容
3. パターンとは 視覚的要素をあるものの表⾯上に配置したもの リピートパターン 視覚的要素の繰り返しで作成されるパターン ↑ ⼀般的に⾔われるパターンはこれ パターンで遊ぶ 3 これはリピートパターンか？→
4. リピートパターンは… 4つの操作の組み合わせ でほぼできる！ リピートパターンの作り⽅ 4
5. 4つの操作 5 回転 並進 映進 鏡映
6. 回転対称とは、 中⼼点の周りを図形が回転することによって ⽣まれる複製のことである。 回転対称の定義 6
7. 原点の位置を決める translate() と 原点中⼼にキャンバスを回転させる rotate() の組み合わせで実装 回転をp5.jsでやってみる 7
8. 違う『エレメント』でやってみると… 8 回転させられるモノのことを『エレメント』と呼ぶ
9. エレメントはなんでもいい 9
10. 次数を変える 10
11. 並進対称とは、 定められた距離及び定められた⽅向へ、図形が動くことである。 図形間の距離と⾓度は⼀定であり、図形は回転も鏡映もしない。 並進対称の定義 11
12. カウントアップの要領で実装 並進をp5.jsでやってみる 12
13. エレメントを変えてみる 13
14. エレメントとして⽂字を使ってみた text()を使⽤（テキストは左下基準） エレメントを変えてみる2 14
15. 鏡映対称とは、 図形の半分が残りの半分の鏡像 であることである。 鏡映対称の定義 15
16. キャンバスのスケールを変更する scale() を使ってなんとかする 鏡映をp5.jsでやってみる 16
17. 変数 distance を追加 距離を変更する 17
18. 並進してみたりする 18
19. セル：エレメントが⼊っている仮想的な箱 p5.jsでは createGraphics() を使って実装することができる セルを作って鏡映 19 Cell
20. セルを作って鏡映して並進 20
21. セルを作って鏡映して並進2 21
22. 映進対象とは、 2つの対象操作を組み合わせたものである。 まず並進対称操作が⾏われ、 続いて並進した先で鏡映対称操作が⾏われる。 映進対称の定義 22
23. 2重 translate() と scale() で対応 映進をp5.jsでやってみる 23
24. 映進を並進する 24