Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
p5.jsを使ったパターン作成(創算部 第5回 資料)
Search
EngineerCafe
September 23, 2023
0
42
p5.jsを使ったパターン作成(創算部 第5回 資料)
創算部 第5回(
https://engineercafe.jp/ja/event/7493)で使用したp5.jsをつかったパターン作成についての資料です
。
ぜひご活用ください!
EngineerCafe
September 23, 2023
Tweet
Share
More Decks by EngineerCafe
See All by EngineerCafe
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
33
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
60
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
180
Unityの環境構築
engineercafe
0
29
git勉強会(ブランチを操作しよう)
engineercafe
0
220
GoogleツールでLINEBotを作ってみよう~GAS基礎編~
engineercafe
0
94
GoogleツールでLINEBotを作ってみよう~実践編~
engineercafe
0
140
アート×エンジニアMeeting(仮)#4 AI絵本 チーム1の絵本
engineercafe
0
46
アート×エンジニアMeeting(仮)#4 AI絵本 チーム2の絵本
engineercafe
0
44
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
1
220
Facilitating Awesome Meetings
lara
50
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Navigating Team Friction
lara
183
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
How to Ace a Technical Interview
jacobian
276
23k
Side Projects
sachag
452
42k
Embracing the Ebb and Flow
colly
84
4.5k
How GitHub (no longer) Works
holman
310
140k
Gamification - CAS2011
davidbonilla
80
5k
Designing for Performance
lara
604
68k
GitHub's CSS Performance
jonrohan
1030
460k
Transcript
創算部 #5 『パターンで遊ぶ』 後藤 汰誓
Todayʼs naiyo. 今⽇の内容
パターンとは 視覚的要素をあるものの表⾯上に配置したもの リピートパターン 視覚的要素の繰り返しで作成されるパターン ↑ ⼀般的に⾔われるパターンはこれ パターンで遊ぶ 3 これはリピートパターンか?→
リピートパターンは… 4つの操作の組み合わせ でほぼできる! リピートパターンの作り⽅ 4
4つの操作 5 回転 並進 映進 鏡映
回転対称とは、 中⼼点の周りを図形が回転することによって ⽣まれる複製のことである。 回転対称の定義 6
原点の位置を決める translate() と 原点中⼼にキャンバスを回転させる rotate() の組み合わせで実装 回転をp5.jsでやってみる 7
違う『エレメント』でやってみると… 8 回転させられるモノのことを『エレメント』と呼ぶ
エレメントはなんでもいい 9
次数を変える 10
並進対称とは、 定められた距離及び定められた⽅向へ、図形が動くことである。 図形間の距離と⾓度は⼀定であり、図形は回転も鏡映もしない。 並進対称の定義 11
カウントアップの要領で実装 並進をp5.jsでやってみる 12
エレメントを変えてみる 13
エレメントとして⽂字を使ってみた text()を使⽤(テキストは左下基準) エレメントを変えてみる2 14
鏡映対称とは、 図形の半分が残りの半分の鏡像 であることである。 鏡映対称の定義 15
キャンバスのスケールを変更する scale() を使ってなんとかする 鏡映をp5.jsでやってみる 16
変数 distance を追加 距離を変更する 17
並進してみたりする 18
セル:エレメントが⼊っている仮想的な箱 p5.jsでは createGraphics() を使って実装することができる セルを作って鏡映 19 Cell
セルを作って鏡映して並進 20
セルを作って鏡映して並進2 21
映進対象とは、 2つの対象操作を組み合わせたものである。 まず並進対称操作が⾏われ、 続いて並進した先で鏡映対称操作が⾏われる。 映進対称の定義 22
2重 translate() と scale() で対応 映進をp5.jsでやってみる 23
映進を並進する 24