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
85
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
Hacktivation2025_イントロダクション_ブロックチェーンことはじめ
engineercafe
0
87
エンジニアカフェ台湾ツアー2025
engineercafe
0
7
台湾視察報告レポート_2024
engineercafe
1
99
インド・バンガロール視察報告会
engineercafe
0
98
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
91
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
75
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
130
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
150
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
260
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
A better future with KSS
kneath
239
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Navigating Team Friction
lara
190
15k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Why Our Code Smells
bkeepers
PRO
340
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building Applications with DynamoDB
mza
96
6.7k
Building an army of robots
kneath
306
46k
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