From 1bf418172893d27f836e5cd8421da7ab7e950449 Mon Sep 17 00:00:00 2001 From: Eric Zhang Date: Sun, 3 Jul 2022 19:57:19 -0500 Subject: [PATCH 1/2] Fix transformation order in pivot documentation Previously the transformation order was incorrect for explaining the behavior of the `(pivot)` function. --- docs/en/transform.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/en/transform.md b/docs/en/transform.md index fc5ad807..c6016baa 100644 --- a/docs/en/transform.md +++ b/docs/en/transform.md @@ -43,10 +43,10 @@ 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]))) ``` @@ -54,11 +54,11 @@ AfterEffects' anchor-point transformation can be defined as follows. `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. From 329dfeb566e1d927284d5a784b94a63ad9d3d08c Mon Sep 17 00:00:00 2001 From: Eric Zhang Date: Sun, 3 Jul 2022 20:01:55 -0500 Subject: [PATCH 2/2] Update transform.md for Japanese version --- docs/transform.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/transform.md b/docs/transform.md index d3bdec5f..80de5746 100644 --- a/docs/transform.md +++ b/docs/transform.md @@ -44,10 +44,10 @@ 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]))) ``` @@ -55,11 +55,11 @@ AfterEffects のアンカーポイントを用いたトランスフォームは `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 だけでそうした操作を表現することができます。