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
84
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
25
エンジニアカフェ台湾ツアー2025
engineercafe
0
4
台湾視察報告レポート_2024
engineercafe
1
90
インド・バンガロール視察報告会
engineercafe
0
95
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
83
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
70
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
120
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
140
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
260
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Orchestrator
shlominoach
190
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Side Projects
sachag
455
43k
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