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

Slide 1

Slide 1 text

創算部 #5 『パターンで遊ぶ』後藤汰誓

Slide 2

Slide 2 text

Todayʼs naiyo. 今⽇の内容

Slide 3

Slide 3 text

パターンとは視覚的要素をあるものの表⾯上に配置したものリピートパターン視覚的要素の繰り返しで作成されるパターン ↑ ⼀般的に⾔われるパターンはこれパターンで遊ぶ 3 これはリピートパターンか？→

Slide 4

Slide 4 text

リピートパターンは… 4つの操作の組み合わせでほぼできる！リピートパターンの作り⽅ 4

Slide 5

Slide 5 text

4つの操作 5 回転並進映進鏡映

Slide 6

Slide 6 text

回転対称とは、中⼼点の周りを図形が回転することによって⽣まれる複製のことである。回転対称の定義 6

Slide 7

Slide 7 text

原点の位置を決める translate() と原点中⼼にキャンバスを回転させる rotate() の組み合わせで実装回転をp5.jsでやってみる 7

Slide 8

Slide 8 text

違う『エレメント』でやってみると… 8 回転させられるモノのことを『エレメント』と呼ぶ

Slide 9

Slide 9 text

エレメントはなんでもいい 9

Slide 10

Slide 10 text

次数を変える 10

Slide 11

Slide 11 text

並進対称とは、定められた距離及び定められた⽅向へ、図形が動くことである。図形間の距離と⾓度は⼀定であり、図形は回転も鏡映もしない。並進対称の定義 11

Slide 12

Slide 12 text

カウントアップの要領で実装並進をp5.jsでやってみる 12

Slide 13

Slide 13 text

エレメントを変えてみる 13

Slide 14

Slide 14 text

エレメントとして⽂字を使ってみた text()を使⽤（テキストは左下基準）エレメントを変えてみる2 14

Slide 15

Slide 15 text

鏡映対称とは、図形の半分が残りの半分の鏡像であることである。鏡映対称の定義 15

Slide 16

Slide 16 text

キャンバスのスケールを変更する scale() を使ってなんとかする鏡映をp5.jsでやってみる 16

Slide 17

Slide 17 text

変数 distance を追加距離を変更する 17

Slide 18

Slide 18 text

並進してみたりする 18

Slide 19

Slide 19 text

セル：エレメントが⼊っている仮想的な箱 p5.jsでは createGraphics() を使って実装することができるセルを作って鏡映 19 Cell

Slide 20

Slide 20 text

セルを作って鏡映して並進 20

Slide 21

Slide 21 text

セルを作って鏡映して並進2 21

Slide 22

Slide 22 text

映進対象とは、 2つの対象操作を組み合わせたものである。まず並進対称操作が⾏われ、続いて並進した先で鏡映対称操作が⾏われる。映進対称の定義 22