Skip to content

Commit 90032a7

Browse files
author
Shan Huang
committed
More formatting for README.md
1 parent cf97eda commit 90032a7

File tree

1 file changed

+7
-4
lines changed

1 file changed

+7
-4
lines changed

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,21 @@ Pose Animator takes a 2D vector illustration and animates its containing curves
44

55
*This is not an officially supported Google product.*
66

7-
<img src="/resources/gifs/avatar-new-1.gif?raw=true" alt="cameraDemo" style="width: 400px;"/>
7+
<img src="/resources/gifs/avatar-new-1.gif?raw=true" alt="cameraDemo" style="width: 250px;"/>
88

9-
<img src="/resources/gifs/avatar-new-full-body.gif?raw=true" alt="cameraDemo" style="width: 400px;"/>
9+
<img src="/resources/gifs/avatar-new-full-body.gif?raw=true" alt="cameraDemo" style="width: 250px;"/>
1010

1111
In skeletal animation a character is represented in two parts:
1212
1. a surface used to draw the character, and
1313
1. a hierarchical set of interconnected bones used to animate the surface.
1414

1515
In Pose Animator, the surface is defined by the 2D vector paths in the input SVG files. For the bone structure, Pose Animator provides a predefined rig (bone hierarchy) representation, designed based on the keypoints from PoseNet and FaceMesh. This bone structure’s initial pose is specified in the input SVG file, along with the character illustration, while the real time bone positions are updated by the recognition result from ML models.
1616

17-
<img src="https://firebasestorage.googleapis.com/v0/b/pose-animator-demo.appspot.com/o/ml-keypoints.png?alt=media" style="width:400px;"/>
17+
<img src="https://firebasestorage.googleapis.com/v0/b/pose-animator-demo.appspot.com/o/ml-keypoints.png?alt=media" style="width:250px;"/>
1818

19-
<img src="/resources/gifs/avatar-new-bezier-1.gif?raw=true" alt="cameraDemo" style="width: 400px;"/>
19+
<img src="/resources/gifs/avatar-new-bezier-1.gif?raw=true" alt="cameraDemo" style="width: 250px;"/>
2020

21+
// TODO: Add blog post link.
2122
For more details on its technical design please check out this blog post.
2223

2324
### Demo 1: [Camera feed](https://pose-animator-demo.firebaseapp.com/camera.html)
@@ -53,12 +54,14 @@ yarn watch
5354
* Flatten all subgroups so that ‘illustration’ only contains path elements.
5455
* Composite paths are not supported at the moment.
5556
* The working file structure should look like this:
57+
```
5658
[Layer 1]
5759
|---- skeleton
5860
|---- illustration
5961
|---- path 1
6062
|---- path 2
6163
|---- path 3
64+
```
6265
1. Embed the sample skeleton in ‘skeleton’ group into your illustration by moving the joints around.
6366
1. Export the file as an SVG file.
6467
1. Open Pose Animator camera demo. Once everything loads, drop your SVG file into the browser tab. You should be able to see it come to life :D

0 commit comments

Comments
 (0)