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
47
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
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
22
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
50
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
72
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
200
Unityの環境構築
engineercafe
0
42
git勉強会(ブランチを操作しよう)
engineercafe
0
250
GoogleツールでLINEBotを作ってみよう~GAS基礎編~
engineercafe
0
110
GoogleツールでLINEBotを作ってみよう~実践編~
engineercafe
0
150
アート×エンジニアMeeting(仮)#4 AI絵本 チーム1の絵本
engineercafe
0
48
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building Applications with DynamoDB
mza
93
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
390
Practical Orchestrator
shlominoach
186
10k
Rails Girls Zürich Keynote
gr2m
94
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Thoughts on Productivity
jonyablonski
69
4.4k
Producing Creativity
orderedlist
PRO
343
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.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