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
40
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
30
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
53
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
180
Unityの環境構築
engineercafe
0
29
git勉強会(ブランチを操作しよう)
engineercafe
0
210
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
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building Adaptive Systems
keathley
38
2.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The World Runs on Bad Software
bkeepers
PRO
65
11k
KATA
mclloyd
29
14k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
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