【Hacker News搬运】Faces.js，一个用于生成基于矢量的卡通人脸的JavaScript库

hackernews

Title: Faces.js, a JavaScript library for generating vector-based cartoon faces

Faces.js，一个用于生成基于矢量的卡通人脸的JavaScript库

Text:

Url: https://zengm.com/facesjs/

这是一个名为faces.js的JavaScript库，用于生成基于矢量的卡通人脸。要加载新的随机人脸，请点击此处或按键盘上的“r”键。faces.js是一个生成并显示卡通人脸的JavaScript库，有点像任天堂Wii生成随机Mii的方式。人脸是以可缩放矢量图形（SVG）的形式绘制的。每个脸也可以用一个小的JavaScript对象来表示，这允许你存储这个对象，然后稍后再次绘制相同的人脸。

显然，每个面部特征（眼睛、鼻子、嘴巴等）的选项数量相当有限，并且当前的一些选项相当粗糙。所以在GitHub上fork它并添加一些新选项！

使用方法：
1. 从npm安装：
$ npm install --save facesjs
或
$ yarn add facesjs
2. 显示一个随机生成的脸（#my-div-id div的大小决定了显示的脸的大小）：
import { display, generate } from "facesjs";
// 生成一个随机脸
const face = generate();
// 在id为"my-div-id"的div中显示
display("my-div-id", face);

更多信息，请查看GitHub上的README文件。

Post by: starkparker

Comments:

krebby: This would be fun to use with Chernoff Faces <a href="https://en.m.wikipedia.org/wiki/Chernoff_face" rel="nofollow">https://en.m.wikipedia.org/wiki/Chernoff_face</a>

krebby: 这与Chernoff Faces一起使用会很有趣<a href=“https://；&#x2F；en.m.wikipedia.org/&#x2F：wiki&#x2F！Chernoff_face”rel=“nofollow”>https://&#x2F；en.m.wikipedia.org&#x2F；wiki&#x2F；Chernoff_face</a>

rented_mule: Someone I know has done some work to parameterize facial expressions: <a href="https://www.redblobgames.com/x/1845-face-generator/" rel="nofollow">https://www.redblobgames.com/x/1845-face-generator/</a><p>He has a bunch of other interesting things like this, too: <a href="https://www.redblobgames.com/" rel="nofollow">https://www.redblobgames.com/</a>

rented_mule: 我认识的人已经做了一些工作来参数化面部表情：<a href=“https://；&#x2F；www.redblobgames.com&#x2F，x&#x2F！1845人脸生成器&#x2F”rel=“nofollow”>https://&#x2F；www.redblobgames.com；x；1845面生成器</a> <p>他还有很多其他有趣的事情：<a href=“https://；&#x2F；www.redblobgames.com&#x2F”rel=“nofollow”>https://&#x2F；www.redblobgames.com</一

throwaway35777: <p><pre><code> import { display, generate } from "facesjs";

&#x2F;&#x2F; Generate a random face
const face = generate();

&#x2F;&#x2F; Display in a div with id &quot;my-div-id&quot;
display(&quot;my-div-id&quot;, face);

</code></pre>
Beautiful API.

throwaway35777: <p>＜pre＞＜code＞导入｛display，generate｝from&quot；facesjs”；；&#x2F&#x2F；生成随机面const face=generate（）；&#x2F&#x2F；显示在id为“”的div中；我的div id&quot；display（“my div id”，face）；</code></pre>美丽的API。

cmgriffing: Really cool. I would love to see an api for just passing a numeric seed value. Then users of an app can click a "refresh" button to get one they like that could persist across page loads and devices without having to store the entire face object in the db.

cmgriffing: 真的很酷。我很想看到一个只传递数字种子值的api。然后应用程序的用户可以点击“；刷新”；按钮来获得一个他们喜欢的，可以在页面加载和设备之间持久存在，而不必将整个face对象存储在数据库中。

gkoberger: Very cool. Here's another style! <a href="https://getavataaars.com/" rel="nofollow">https://getavataaars.com/</a>

gkoberger: 很酷。这里；这是另一种风格<a href=“https://；&#x2F；getavataars.com&#x2F”rel=“nofollow”>https://&#x2F；getavatAars.com&#x2F</一