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
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
23
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
26
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
57
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
77
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
210
Unityの環境構築
engineercafe
0
46
git勉強会(ブランチを操作しよう)
engineercafe
0
250
GoogleツールでLINEBotを作ってみよう~GAS基礎編~
engineercafe
0
110
GoogleツールでLINEBotを作ってみよう~実践編~
engineercafe
0
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Statistics for Hackers
jakevdp
797
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Scaling GitHub
holman
459
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
For a Future-Friendly Web
brad_frost
176
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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