Skip to content

Commit

Permalink
Add polystar
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbasaglia
mbasaglia authored Apr 9, 2024
1 parent 5449e33 commit 9852a2e
Show file tree
Hide file tree
Showing 7 changed files with 375 additions and 2 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ SOURCE_DIR = $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
OUTPUT_DIR ?= $(CURDIR)/site

.SUFFIXES:
.PHONY: all install_dependencies docs docs_serve lottie.schema.json validate validate_links
.PHONY: all install_dependencies docs docs_serve lottie.schema.json validate validate_full


all: docs
Expand Down
30 changes: 30 additions & 0 deletions docs/specs/constants.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,33 @@
shape.d = Number(data["Shape Direction"]);
</script>
</lottie-playground>


<h2 id="star-type">Star Type</h2>

{schema_string:constants/star-type/description}

{schema_enum:star-type}

<lottie-playground example="star.json">
<title>Example</title>
<form>
<enum title="Star Type">star-type</enum>
</form>
<json>lottie.layers[0].shapes[0].it[0]</json>
<script>
var star = lottie.layers[0].shapes[0].it[0];
star.sy = Number(data["Star Type"]);
if ( data["Star Type"] == "1" )
{
star["ir"] = {"a": 0, "k": 100};
star["is"] = {"a": 0, "k": 0};
}
else
{
delete star["ir"];
delete star["is"];
}
lottie.layers[0].shapes[0].it[0] = star;
</script>
</lottie-playground>
96 changes: 95 additions & 1 deletion docs/specs/shapes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ from different groups, thus $Render()$ calls cannot always be issued based on si
knowledge.

2. Transforms can affect both shapes and styles (e.g. stroke width). For a given $(shape, style)$,
the shape and style transforms are not necessarily equal.
the shape and style transforms are not necessarily equal.

3. Shapes without an applicable style are not rendered.

Expand Down Expand Up @@ -269,6 +269,100 @@ $$
</script>
</lottie-playground>


<h3 id="polystar">PolyStar</h3>

{schema_string:shapes/polystar/description}

{schema_object:shapes/polystar}

<lottie-playground example="star.json">
<title>Example</title>
<form>
<input title="Position x" type="range" min="0" max="512" value="256"/>
<input title="Position y" type="range" min="0" max="512" value="256"/>
<input title="Points" type="range" min="3" max="10" value="5"/>
<input title="Rotation" type="range" min="0" max="360" value="0"/>
<input title="Outer Radius" type="range" min="0" max="300" value="200"/>
<input title="Inner Radius" type="range" min="0" max="300" value="100"/>
<input title="Outer Roundness" type="range" min="0" max="100" value="0"/>
<input title="Inner Roundness" type="range" min="0" max="100" value="0"/>
<enum title="Star Type">star-type</enum>
</form>
<json>lottie.layers[0].shapes[0].it[0]</json>
<script>
var star = {
"ty": "sr",
"nm": "PolyStar",
"sy": Number(data["Star Type"]),
"p": {
"a": 0,
"k": [data["Position x"], data["Position y"]]
},
"r": {
"a": 0,
"k": data["Rotation"]
},
"pt": {
"a": 0,
"k": data["Points"]
},
"or": {
"a": 0,
"k": data["Outer Radius"]
},
"os": {
"a": 0,
"k": data["Outer Roundness"]
},
};
if ( data["Star Type"] == "1" )
{
star = {
...star,
"ir": {
"a": 0,
"k": data["Inner Radius"]
},
"is": {
"a": 0,
"k": data["Inner Roundness"]
},
};
}
lottie.layers[0].shapes[0].it[0] = star;
</script>
</lottie-playground>


Definitions:

$$
\begin{align*}
points & = \lfloor pt \rceil \\
\theta & = \frac{\pi}{points} \\
\alpha & = \frac{\pi}{180} \cdot r \\
tan_{out} &= \frac{os}{100} \cdot \frac{or \cdot 2 \pi}{points \cdot 4} \\
tan_{in} &= \frac{is}{100} \cdot \frac{ir \cdot 2 \pi}{points \cdot 4} \\
\end{align*}
$$

1. For $i$ in $[0, points)$
1. Let $\beta = -\frac{\pi}{2} + \alpha + i \cdot 2 \dot \theta$
1. Let $V_{out} = (or \cdot \cos(\beta), or \cdot \sin(\beta))$
1. Add vertex $p + V_{out}$
1. If $or \neq 0$, we need to add bezier tangent
1. Let $T_{out} = (V_{out} \cdot \frac{tan_{out}}{or})$
1. Set in tangent $V_{out}$
1. Set out tangent $-V_{out}$
1. If $sy = 1$, we need to add a vertex towards the inner radius to make a star
1. Let $V_{in} = (ir \cdot \cos(\beta + \theta), or \cdot \sin(\beta + \theta))$
1. Add vertex $p + V_{in}$
1. If $ir \neq 0$, we need to add bezier tangent
1. Let $T_{in} = (V_{in} \cdot \frac{tan_{in}}{or})$
1. Set in tangent $V_{in}$
1. Set out tangent $-V_{in}$

<h2 id="grouping">Grouping</h2>

<h3 id="group">Group</h3>
Expand Down
159 changes: 159 additions & 0 deletions docs/static/examples/star.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
{
"v": "5.7.1",
"ip": 0,
"op": 180,
"nm": "Animation",
"mn": "{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}",
"fr": 60,
"w": 512,
"h": 512,

"layers": [
{
"ty": 4,
"ddd": 0,
"nm": "Layer",
"mn": "{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}",
"ip": 0,
"op": 180,
"ind": 0,
"st": 0,
"sr": 1,
"ks": {
"a": {
"a": 0,
"k": [
256,
256
]
},
"p": {
"a": 0,
"k": [
256,
256
]
},
"s": {
"a": 0,
"k": [
100,
100
]
},
"r": {
"a": 0,
"k": 0
},
"o": {
"a": 0,
"k": 100
}
},
"shapes": [
{
"ty": "gr",
"nm": "PolyStar",
"mn": "{9199543e-3552-4e51-a802-623f2a4a2ca1}",
"it": [
{
"ty": "sr",
"nm": "PolyStar",
"p": {
"a": 0,
"k": [
256,
256
]
},
"or": {
"a": 0,
"k": 200
},
"ir": {
"a": 0,
"k": 100
},
"r": {
"a": 0,
"k": 0
},
"pt": {
"a": 0,
"k": 5
},
"sy": 1,
"os": {
"a": 0,
"k": 0
},
"is": {
"a": 0,
"k": 0
}
},
{
"ty": "st",
"nm": "Stroke",
"mn": "{0930ce27-c8f9-4371-b0cf-111a859abfaf}",
"o": {
"a": 0,
"k": 100
},
"c": {
"a": 0,
"k": [
1,
0.979995422293431,
0.28000305180437934
]
},
"lc": 2,
"lj": 2,
"ml": 0,
"w": {
"a": 0,
"k": 30
}
},
{
"ty": "tr",
"a": {
"a": 0,
"k": [
0,
0
]
},
"p": {
"a": 0,
"k": [
0,
0
]
},
"s": {
"a": 0,
"k": [
100,
100
]
},
"r": {
"a": 0,
"k": 0
},
"o": {
"a": 0,
"k": 100
}
}
]
}
]
}
],
"meta": {
"g": "Glaxnimate 0.4.6-32-gb62899be"
}
}
16 changes: 16 additions & 0 deletions schema/constants/star-type.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "integer",
"title": "Star Type",
"description": "Whether a PolyStar is a star or a polygon",
"oneOf": [
{
"title": "Star",
"const": 1
},
{
"title": "Polygon",
"const": 2
}
]
}
1 change: 1 addition & 0 deletions schema/shapes/all-graphic-elements.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
{"$ref": "#/$defs/shapes/fill"},
{"$ref": "#/$defs/shapes/group"},
{"$ref": "#/$defs/shapes/path"},
{"$ref": "#/$defs/shapes/polystar"},
{"$ref": "#/$defs/shapes/rectangle"},
{"$ref": "#/$defs/shapes/transform"},
{"$ref": "#/$defs/shapes/trim-path"}
Expand Down
Loading

0 comments on commit 9852a2e

Please sign in to comment.