https://github.com/yemount/pose-animator/ Skip to content * Why GitHub? Features - + Code review + Project management + Integrations + Actions + Packages + Security + Team management + Hosting + Customer stories - + Security - * Team * Enterprise * Explore + Explore GitHub - Learn & contribute + Topics + Collections + Trending + Learning Lab + Open source guides Connect with others + Events + Community forum + GitHub Education * Marketplace * Pricing Plans - + Compare plans + Contact Sales + Nonprofit - + Education - [ ] [search-key] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up yemount / pose-animator * Watch 36 * Star 960 * Fork 54 * Code * Issues 4 * Pull requests 0 * Actions * Projects 0 * Security * Insights Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up No description, website, or topics provided. * 15 commits * 1 branch * 0 packages * 0 releases * 0 contributors * Apache-2.0 JavaScript HTML 1. JavaScript 92.1% 2. HTML 7.9% Branch: master New pull request Find file Clone or download Clone with HTTPS Use Git or checkout with SVN using the web URL. [https://github.com/y] Open in Desktop Download ZIP Downloading Want to be notified of new releases in yemount/pose-animator? Sign in Sign up Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching Xcode If nothing happens, download Xcode and try again. Go back Launching Visual Studio If nothing happens, download the GitHub extension for Visual Studio and try again. Go back Latest commit Shan Huang Shan Huang Add sample skeleton SVG file. Latest commit b51a167 May 10, 2020 Files Permalink Type Name Latest commit message Commit time Failed to load latest commit information. # illustrationGen Switch loading order... May 8, 2020 # resources Add sample skeleton SVG file. May 9, 2020 # third_party/paper Prepare repo for opensourcing Apr 27, 2020 # utils WIP May 8, 2020 # .gitignore Update package structure and include Apr 13, image source files statically 2020 # CONTRIBUTING.md Prepare repo for opensourcing Apr 27, 2020 # LICENSE Prepare repo for opensourcing Apr 27, 2020 # README.md Add sample skeleton SVG file. May 9, 2020 # camera.html Support mobile May 8, 2020 # camera.js More SVGs May 8, 2020 # firebase.json Update package structure and include Apr 13, image source files statically 2020 # index.html Update package structure and include Apr 13, image source files statically 2020 # package-lock.json Prepare repo for opensourcing Apr 27, 2020 # package.json Prepare repo for opensourcing Apr 27, 2020 # static_image.html Support mobile May 8, 2020 # static_image.js More SVGs May 8, 2020 # yarn.lock More SVGs May 8, 2020 README.md Pose Animator Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters. This is not an officially supported Google product. cameraDemo cameraDemo In skeletal animation a character is represented in two parts: 1. a surface used to draw the character, and 2. a hierarchical set of interconnected bones used to animate the surface. 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. [6874747073] cameraDemo // TODO: Add blog post link. For more details on its technical design please check out this blog post. Demo 1: Camera feed The camera demo animates a 2D avatar in real-time from a webcam video stream. Demo 2: Static image The static image demo shows the avatar positioned from a single image. Build And Run Install dependencies and prepare the build directory: yarn To watch files for changes, and launch a dev server: yarn watch Platform support Demos are supported on Desktop Chrome and iOS Safari. It should also run on Chrome on Android and potentially more Android mobile browsers though support has not been tested yet. Animate your own design 1. Download the sample skeleton SVG here. 2. Create a new file in your vector graphics editor of choice. Copy the group named 'skeleton' from the above file into your working file. Note: + Do not add, remove or rename the joints (circles) in this group. Pose Animator relies on these named paths to read the skeleton's initial position. Missing joints will cause errors. + However you can move the joints around to embed them into your illustration. See step 4. 3. Create a new group and name it 'illustration', next to the 'skeleton' group. This is the group where you can put all the paths for your illustration. + Flatten all subgroups so that 'illustration' only contains path elements. + Composite paths are not supported at the moment. + The working file structure should look like this: [Layer 1] |---- skeleton |---- illustration |---- path 1 |---- path 2 |---- path 3 4. Embed the sample skeleton in 'skeleton' group into your illustration by moving the joints around. 5. Export the file as an SVG file. 6. 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 * (c) 2020 GitHub, Inc. * Terms * Privacy * Security * Status * Help * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.