yemount / pose-animator Goto Github PK

1. yarn add paper
2. vi paper-full.js
3. search  /^(inline|both)$/.test(sourceMaps)

4. change 
if (/^(inline|both)$/.test(sourceMaps)) {
				code += "\n/*# source" + "MappingURL=data:application/json;base64,"
						+ self.btoa(unescape(encodeURIComponent(
							JSON.stringify(map))));
			}

https://github.com/webpack-contrib/style-loader/pull/132/files

I just stumbled across this repo and thought it was really cool. Great work! 👍

In chrome browser, the test demo cannot work.

Nice logic and implementation, but just want to know, can we do that without paper.js file.

What is the responsibility of paper js?
Is that completely change the svg file to new new points?

https://firebasestorage.googleapis.com/v0/b/pose-animator-demo.appspot.com/o/skeleton.svg?alt=media

It would probably be easier to host the skeleton.svg image as part of the Github repo

Is this possible to be used in streams as a overlay?
If I did a browser capture you see my face. How can I just have the animation? Will this become a software?
I love it! Ty for this awesome project.

[congrats]
Amazing work! Well done!! I especially appreciate how easy it is to create one's own SVG file, thanks for making it so simple!!
[/congrats]

It would be extremely useful to be able to record the SVG animation using eg SMIL. That would effectively turn this demo in an excellent tool for complex character animation!

Hello, it can not work properly in the environment of mine.
🚨 /Users/rw/ws/githubs/pose-animator/static_image.js:21:23 : Cannot resolve dependency 'paper'
Did I miss sth ?

I create a new svg like this:
create a new file, import skeleton.svg, draw a character on the skeleton, then save svg to illustration folder.

drop my svg to https://pose-animator-demo.firebaseapp.com/camera.html
the character didnot change to mine, when I drop your illustration to pose-animator-demo, it works normally.

my svg:

I run pose-animator on my headless server with command: yarn watch

Typing the Url below on my macbook (firefox & chrome) and my phone (tried on same browsers):
http://ip-address-of-server:33707/camera.html

I get the Error below:
this device type is not supported yet, or this browser does not support video capture: Error: Browser API navigator.mediaDevices.getUserMedia not available
Setting up camera..

Thanks for this great project! I've made a test illustration following the readme instructions, and saved the files as svg with a path system similar to the example svgs (using Adobe Illustrator). However, there are major glitches where hands and the head/face are not recognized (see below). Should the layers, groups or paths in the file be modified? It's hard to tell how it's different from the example.

When all of the elements are unique paths, the head is not visible but the path on the shirt is.
Set-up:

Result:

When the face is grouped, the head is visible but the face is not.
Setup:

Result:

Whole head grouped results in no head at all.
Setup:

Results:

Hands are missing in all three cases.

hi, yemount.
I just want to run the project locally. But it doesn't work. This is the error message.
MacPro 15.6

Documents/pose-animator/node_modules/paper/dist/paper-full.js:17211:12: Unterminated string constant (17211:12)

  17209 | 			}
  17210 | 			if (/^(inline|both)$/.test(sourceMaps)) {
> 17211 | 				code += "\n
        | 				       ^
  17212 | 						+ self.btoa(unescape(encodeURIComponent(
  17213 | 							JSON.stringify(map))));
  17214 | 			}

Thanks your help.

I was thinking for online live dance app and write this post:

SO i like to know how can export the live vectors to some others 3D Virtual Environment Engine like Unity ( which function give these vectors and does it fast enough for this usage)?

Thanks

Thank you for the code.
But why my Chrome reports that "this device type is not supported yet, or this browser does not support video capture: NotReadableError: Could not start video source."??
/(ㄒoㄒ)/~~

Animated model's eyes doesn't change in size when the size of the person changes.

Installing dependencies, node_modules with "yarn"
Then command "yarn watch" throws the error below:

-------- Error Output:
/home/uad/dev/pose-animator/static_image.js:21:23: Cannot resolve dependency 'paper'

Server running at http://localhost:1234
🚨 /home/uad/dev/pose-animator/static_image.js:21:23: Cannot resolve dependency 'paper'
19 | import * as facemesh_module from '@tensorflow-models/facemesh';
20 | import * as tf from '@tensorflow/tfjs';
-> 21 | import * as paper from 'paper';
| ^
22 | import "babel-polyfill";
23 |
24 | import dat from 'dat.gui';

if (/^(inline|both)$/.test(sourceMaps)) {

17211 | code += "\n
| ^
17212 | + self.btoa(unescape(encodeURIComponent(
17213 | JSON.stringify(map))));

When I run 'yarn watch', I get this error:
C:\Users\Administrator\Desktop\pose-animator\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js: ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\pose-animator\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js'
what is wrong with it?

I get this error

pose-animator/static_image.js:21:23: Cannot resolve dependency 'paper'

when starting the server:

Server running at http://localhost:1234 
🚨  /Users/loretoparisi/Documents/MyProjects/pose-animator/static_image.js:21:23: Cannot resolve dependency 'paper'
  19 | import * as facemesh_module from '@tensorflow-models/facemesh';
  20 | import * as tf from '@tensorflow/tfjs';
> 21 | import * as paper from 'paper';
     |                       ^
  22 | import "babel-polyfill";
  23 | 
  24 | import dat from 'dat.gui';

I have installed with yarn:

yarn install v1.15.2
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "@tensorflow/tfjs > @tensorflow/[email protected]" has unmet peer dependency "seedrandom@~2.4.3".
[5/5] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.15.2".
info To upgrade, run the following command:
$ brew upgrade yarn

First install yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

then replace the whole content of package.json with:

{
  "name": "tfjs-models",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "license": "Apache-2.0",
  "private": true,
  "engines": {
    "node": ">=8.9.0"
  },
  "dependencies": {
    "@tensorflow-models/facemesh": "^0.0.1",
    "@tensorflow-models/posenet": "^2.2.1",
    "@tensorflow/tfjs": "^1.7.0",
    "@tensorflow/tfjs-converter": "^1.7.0",
    "@tensorflow/tfjs-core": "^1.7.0",
    "face-api.js": "^0.22.1",
    "paper": "^0.12.1",    
    "stats.js": "^0.17.0"
  },
  "scripts": {
    "watch": "cross-env NODE_ENV=development parcel index.html --no-source-maps --no-hmr --open ",
    "build": "cross-env NODE_ENV=production parcel build index.html --no-source-maps --public-url ./",
    "build-camera": "cross-env NODE_ENV=production parcel build camera.html --public-url ./",
    "lint": "eslint .",
    "link-local": "yalc link"
  },
  "browser": {
    "crypto": false
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "~6.23.0",
    "babel-polyfill": "~6.26.0",
    "babel-preset-env": "~1.6.1",
    "babel-preset-es2017": "^6.24.1",
    "clang-format": "~1.2.2",
    "cross-env": "^5.2.0",
    "dat.gui": "^0.7.2",
    "eslint": "^4.19.1",
    "eslint-config-google": "^0.9.1",
    "parcel-bundler": "~1.12.4",
    "yalc": "~1.0.0-pre.27"
  },
  "eslintConfig": {
    "extends": "google",
    "rules": {
      "require-jsdoc": 0,
      "valid-jsdoc": 0
    },
    "env": {
      "es6": true
    },
    "parserOptions": {
      "ecmaVersion": 8,
      "sourceType": "module"
    }
  },
  "eslintIgnore": [
    "dist/"
  ]
}

then:

yarn

it will download and install some stuff.
when finished type:

yarn watch

your browser should pop-up and pose-animator is running.

After modifying package.json according to answers and able to run the yarn watch.
But when building the project using yarn build, then running the by clicking index.html and going to camera.html its show : Invalid regular expression: range out of order in character class in camera.js

The illustration-canvas is big & overflow
I want to fit it on screen size.
How to solve it ?
I need help, thank you.

Hi Shan,

Could you please do a YouTube video to show how to make a new design steps. Could I call you to ask? My mobile number or WhatsApp number is +61430830322 Charlie.

Better explain in Mandarin. Thanks!

Best regards,

Charlie

static_img.html
camera.html
both stoped at Loading FaceMesh model...

At this speed it is really unusable, can it be GPU is not being used? Is this working with CUDA?

It's running perfectly when yarn watch is used but when deployed on firebase the posenet is stuck and nothing can be done. Can this project really be hosted and run online ?
By the way, the queries described were all useful and resolved issues.

I was trying to run it on my mac and getting this error. "Could not load existing sourcemap of "node_modules/paper/dist/paper-full.js"."

What version of nodejs was it?

some post-processing can be done to improve pose recognition and rendered stability, love to help.

It's really funny!

Hi,

This is more a question. But how could I achieve a second animation next to the 1st and behave based on the second person on the camera?

an error("cannot resolve the dependency 'paper' ") occured when I try to use the command "yarn watch". I make sure that I use the 'npm install paper' command to install it. Maybe it was a redundant step, but I have no choice to do this. Could someone help me with this?

I have made a model of teddy bear in the affinity designer, but it seems that it cant be run i have followed the method you mentioned still I cant run the model. Please help

pose-animator/static_image.js:21:23: Cannot resolve dependency 'paper'

19 | import * as facemesh_module from '@tensorflow-models/facemesh';
20 | import * as tf from '@tensorflow/tfjs';

21 | import * as paper from 'paper';
| ^
22 | import "babel-polyfill";
23 |
24 | import dat from 'dat.gui';

Thanks for your code!
After the project starts, the "Loading PoseNet model..." step takes very very long time. It's supposed to download the model files. How can I manually download these models beforehand, and run the project without downloading the models at runtime? Thanks.

Is it possible to save and export an animation to Adobe animate?

First, amazing job getting this together, very creative! I noticed that even when you're not moving on camera, the pose/face detection seems to create movement where there's none. Is that an issue with the models themselves or in the data that's fed to them?

How to bind the skin to the bone? I can't understand the method from codes. Like the method, "bindPathToBones(path, selectedBones)" in "illustration.js"?

why svg animator cannot blink？what can i do to blink the svg

When editing the SVG file in Inkscape, objects like wrists, elbows, etc are not linked/attached to polylines. So I need to move around both types of objects. Question: do I need to reposition also que polylines? or polylines are just as visual helper?

Firstly, I'm a newbie in computer science.
Although I don't know why "paper.js" is moved to "third_party", it lost its "dist" folder, which blocks building progress.
If replace "dist/" with "/dist/" in ".gitignore" and repair the folder, command "yarn" can finish successfully.

Sorry for my poor English.

Why do I install paper in my own project and print paper, However, there is no default value under the paper object, but there is a default value in the paper object of GitHub project. Why? help me, Thanks

Hi,
First of all, congrats for this project that is quite fun!

I tried to customize the SVG but could not get a file that renders anything.
My plan was to start from a photo, use Inkscape to convert it to SVG paths, build the custom SVG, and use it.

I tried several ways, including using a text editor to replace within the girl.svg the group <g id="illustration_1_"> with my customized <path...> directly, but none are rendering anything.

The <path> that I get from Inkscape looks like:

<path style="fill:#0a0bfc;" d="M375.911 588.777 L375.911 85.2 625.923 85.2 875.935 85.2 875.935 588.777 875.935 1092.354 859.324 1092.354 842.713 1092.354 842.906 1091.354 843.099 1090.355 842.657 1091.354 842.214 1092.354 805.786 1092.354 769.358 1092.354 769.358 1091.27 C769.358 1090.673 769.195 1090.084 768.994 1089.961 768.794 1089.837 768.717 1090.325 768.823 1091.045 L769.015 1092.354 572.463 1092.354 375.911 1092.354 Z M577.506 1090.355 C577.506 1090.111 577.312 1090.211 577.075 1090.577 576.839 1090.944 576.645 1091.443 576.645 1091.688 576.645 1091.932 576.839 1091.832 577.075 1091.465 577.312 1091.099 577.506 1090.599 577.506 1090.355 Z M845.144 1085.395 C845.044 1085.294 844.615 1086.069 844.191 1087.117 842.963 1090.156 842.964 1090.558 844.196 1087.966 844.82 1086.653 845.247 1085.495 845.147 1085.395 Z M768.32 1087.358 C768.197 1087.052 768.096 1087.302 768.096 1087.913 768.096 1088.523 768.197 1088.773 768.32 1088.468 768.443 1088.163 768.443 1087.663 768.32 1087.358 Z M580.24 1086.248 C580.793 1085.543 580.777 1085.528 580.073 1086.08 579.645 1086.415 579.296 1086.765 579.296 1086.857 579.296 1087.223 579.66 1086.987 580.24 1086.248 Z M766.967 1084.071 C766.351 1082.887 765.838 1082.063 765.826 1082.239 765.794 1082.74 767.729 1086.582 767.918 1086.392 768.011 1086.299 767.583 1085.255 766.967 1084.071 Z M809.279 1085.573 C808.449 1085.018 807.421 1083.869 806.994 1083.019 806.491 1082.018 806.217 1081.766 806.217 1082.303 806.216 1083.233 809.354 1086.581 810.226 1086.581 810.535 1086.581 810.109 1086.127 809.279 1085.573 Z M816.319 1086.275 C815.891 1086.163 815.192 1086.163 814.764 1086.275 814.337 1086.386 814.687 1086.478 815.542 1086.478 816.396 1086.478 816.746 1086.386 816.319 1086.275 Z  ...
M777.104 972.052 C777.241 971.83 776.953 971.754 776.464 971.881 775.427 972.153 775.296 972.454 776.215 972.454 776.567 972.454 776.967 972.273 777.104 972.052 Z M729.101 256.814 
C728.956 256.437 728.743 256.224 728.626 256.341 728.51 256.457 728.546 256.766 728.707 257.026 729.145 257.734 729.401 257.597 729.101 256.814 Z" />

I only have <path> elements, but still nothing renders :(

What am I doing wrong?

pose-animator-master\node_modules\paper: Command failed.
Exit code: 1
Command: [[ $npm_config_heading == 'npm' ]] && npx npm-force-resolutions || true
Arguments:

How to solve? Please tell me anybody, I'm new at this.Thx！