Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
p5.jsを使ったパターン作成(創算部 第5回 資料)
Search
EngineerCafe
September 23, 2023
0
23
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
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
21
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
150
Unityの環境構築
engineercafe
0
11
git勉強会(ブランチを操作しよう)
engineercafe
0
170
GoogleツールでLINEBotを作ってみよう~GAS基礎編~
engineercafe
0
86
GoogleツールでLINEBotを作ってみよう~実践編~
engineercafe
0
100
アート×エンジニアMeeting(仮)#4 AI絵本 チーム1の絵本
engineercafe
0
33
アート×エンジニアMeeting(仮)#4 AI絵本 チーム2の絵本
engineercafe
0
22
アート×エンジニアMeeting(仮)#4 AI絵本 チーム3の絵本
engineercafe
0
21
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
In The Pink: A Labor of Love
frogandcode
138
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Embracing the Ebb and Flow
colly
80
4.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Faster Mobile Websites
deanohume
300
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Raft: Consensus for Rubyists
vanstee
133
6.3k
YesSQL, Process and Tooling at Scale
rocio
165
13k
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