Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix transformation order in pivot documentation #71

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix transformation order in pivot documentation #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bf4181
Fix transformation order in pivot documentation
ekzhang Jul 4, 2022
329dfeb
Update transform.md for Japanese version
ekzhang Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/en/transform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,22 +43,22 @@ AfterEffects' anchor-point transformation can be defined as follows.
;; with respect to the pivot (20, 20),
;; the center of the square
(transform
(mat2d/* (pivot [20 20]
(translate [0 0])
(rotate (deg 60))
(scale [1 1.5])))
(pivot [20 20]
(translate [0 0])
(rotate (deg 60))
(scale [1 1.5]))
(style (fill "crimson")
(rect [0 0 40 40])))
```

`pivot` function can be replaced by two translate functions:

```clojure
(mat2d/* (translate [-20 -20]) ;; move the anchor point to the origin
(mat2d/* (translate [20 20]) ;; revert
(mat2d/* (translate [0 0])
(rotate (deg 60))
(scale [1 1.5]))
(translate [20 20])) ;; revert
(translate [-20 -20])) ;; move the anchor point to the origin
```

While editing motion graphics, empty objects have to be nested in a hierarchy for a sophisticated motion that cannot be expressed by a single-layer transformation, for example, to move a shape, then to rotate and to move again. Nevertheless, Glisp allows you to achieve such an operation within a single transform UI without a redundant hierarchical structure.
Expand Down
12 changes: 6 additions & 6 deletions docs/transform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,22 @@ AfterEffects のアンカーポイントを用いたトランスフォームは
;; 四角形の中心(20, 20)を軸に
;; 回転、スケールが適用される
(transform
(mat2d/* (pivot [20 20]
(translate [0 0])
(rotate (deg 60))
(scale [1 1.5])))
(pivot [20 20]
(translate [0 0])
(rotate (deg 60))
(scale [1 1.5]))
(style (fill "crimson")
(rect [0 0 40 40])))
```

`pivot`という関数が登場していますが、上記のコードの`pivot`部分は以下と同じことです。

```clojure
(mat2d/* (translate [-20 -20]) ;; アンカーポイントを原点へ
(mat2d/* (translate [20 20]) ;; 元に戻す
(mat2d/* (translate [0 0])
(rotate (deg 60))
(scale [1 1.5]))
(translate [20 20])) ;; 元に戻す
(translate [-20 -20])) ;; アンカーポイントを原点へ
```

モーショングラフィックスの制作では、一つの図形を動かして回転させてさらにそこから動かして…といった、そのレイヤーのトランスフォームだけでは表現しきれない動かし方をするためにいくつものヌルを入れ子にすることがあります。しかしこの方法だと余計な親子関係を作らずとも、一つのトランスフォーム UI だけでそうした操作を表現することができます。
Expand Down