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
39
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
26
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
51
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
180
Unityの環境構築
engineercafe
0
27
git勉強会(ブランチを操作しよう)
engineercafe
0
210
GoogleツールでLINEBotを作ってみよう~GAS基礎編~
engineercafe
0
92
GoogleツールでLINEBotを作ってみよう~実践編~
engineercafe
0
130
アート×エンジニアMeeting(仮)#4 AI絵本 チーム1の絵本
engineercafe
0
46
アート×エンジニアMeeting(仮)#4 AI絵本 チーム2の絵本
engineercafe
0
43
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
How GitHub (no longer) Works
holman
311
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Making Projects Easy
brettharned
115
5.9k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Producing Creativity
orderedlist
PRO
341
39k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
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