9 ms·
Faces.js, a JavaScript library for generating vector-based cartoon faces
- thatha7777 3y agoi love this
- deleted 3y ago[deleted]
- gkoberger 3y agoVery cool. Here's another style! https://getavataaars.com/ https://getavataaars.com/
- nicechianti 3y ago[dead]
- throwaway35777 3y agoimport { display, generate } from "facesjs"; // Generate a random face const face = generate(); // Display in a div with id "my-div-id" display("my-div-id", face); Beautiful API.
- xg15 3y agoAs beautiful as the faces.
- throwaway35777 3y agoThe faces are amazing! I hope if he finds an artist they don't get changed too much. I absolutely am looking for an excuse to use faces.js somewhere.
- rkagerer 3y agoIt would be neat as a forum icon, if you got to pick one and tailor it.
- streptomycin 3y ago(faces.js dev here) What you see now is already after another contributor came through and redid all my artwork. You don't want to know what it looked like back before then lol
- exodust 3y agoAgree with throwaway, the faces look great. Thanks for this library, the amount of face detail options is really cool.
- nox101 3y agoNo, that's poor API. If it wants to generate HTML it should return it's root element. Let's say I want to add a random face to every div with class "face". With this API have to generate ids. With an API that returns a root element it's trivial and it's not duplicating work (inserting elements into the DOM) that already exists. Taking a selector would not be much better because it would again be duplicating work and make it harder to customize usage. Taking a parent element for it to insert into would also be a poor API because it makes it harder to insert next to a sibling. A good API would be one of const face = generate() someElem.appendChild(face); or const face = generate() someElem.appendChild(face.domElement); or const face = generate() someElem.appendChild(face.html()); // assumes it can render to something else too
- pc86 3y ago> Taking a parent element for it to insert into would also be a poor API because it makes it harder to insert next to a sibling. To extend the documentation example, wouldn't you just have "my-div-id-sibling" already and call display("my-div-id", face); display('my-div-id-sibling", someOtherFace); Like almost all discussions that use language like "good API" or "bad API" this seems to me entirely personal preference. Personally I find anything where I end up having to call appendChild() myself a bad API.
- nox101 3y agoNo, that would not be better. Consider document.querySelectorAll('classIWantFacesIn').forEach(elem => { const face = generate(); elem.id = `face-${crypto.randomUUID()}`; // this line should not be needed display(elem.id, face); }); With the current API I'm required to make ids and make sure they don't collide with other elements. Vs document.querySelectorAll('classIWantFacesIn').forEach(elem => { const face = generate(); elem.appendChild(face.domElement); }); Now, no id is needed. It's objectively a better API to not need the id.
- streptomycin 3y ago(faces.js dev here) A nice thing about the current API is the face objects can be trivially serialized to JSON, which I need do in the application I originally wrote the library for. Also the `display` function works with a DOM element as the first argument too, in which case you don't need to make up an ID. That's how I use it. That being said, the API might not be perfect, but you should at least appreciate that it's been stable since v1 in 2015!
- xg15 3y agoHas a bit of a South Park and/or Futurama vibe to it, but why not?
- rasso 3y agoExactly, why not! Love it.
- krebby 3y agoThis would be fun to use with Chernoff Faces https://en.m.wikipedia.org/wiki/Chernoff_face https://en.m.wikipedia.org/wiki/Chernoff_face
- winwang 3y agoThank you for evangelizing -- this is amazing and kinda hilarious. Does it count as biohacking? lol.
- pavel_lishin 3y agoOoh, ooh, I get to be the one to make the Peter Watts reference today! Chernoff Faces make an appearance in Blindsight, where the ship captain Sarasti uses them. The specific details would be a spoiler, though.
- 082349872349872 3y agoIn this particular case, I think there are at least two nose shapes close enough to π/2 that Sarasti would find them disturbing.
- defrost 3y agoNever saw such a nose in my life 'Tis a nose of parchment It is six times as big but 'tis a nose like my nose https://www.youtube.com/watch?v=bNQKYolhZkg https://www.youtube.com/watch?v=bNQKYolhZkg https://en.wikipedia.org/wiki/The_Kiss_and_Other_Movements https://en.wikipedia.org/wiki/The_Kiss_and_Other_Movements
- maicro 3y agoAlways love a good Peter Watts reference, though this one makes me want to go back and read Blindsight again as I can't remember the reference... As his website says though, my "will to live [has been] getting too strong" lately, so...
- supportengineer 3y agoImagine these on SRE dashboards to determine system state
- af3d 3y agoWell, I didn't find the art very appealing. But I do love the idea behind it. Neat project!
- ramijames 3y agoThis is adorable.
- cmgriffing 3y agoReally 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.
- cypressious 3y agoYou could serialize the JS representation to Base64 or Base10 if you want it to be numeric.
- wongarsu 3y agoBut that's a lot more data than just storing which of the ~2^50 possible faces was generated. You could serialize the entire face including the colors and scaling factors into a much smaller string, or just take one number that is used as a seed for a random number generator that sets the other parameters
- pests 3y agoThe seed version with random parameters doesn't allow you to or your users to design their own. Just random selection until you get one you like, no editing of details.
- two_handfuls 3y agoThe face object is small (it’s the parameters). You can save that.
- itronitron 3y agoI did the first part of this (not the API part) a while back to generate avatar faces for minecraft with a random sequence of numbers (one per pixel, gray scale, and the faces were symmetric). I got some fun results as a wide range of anatomical facial morphologies were produced.
- hacker_88 3y agoBack in the day out used to be called NFT
- deleted 3y ago[deleted]
- toisanji 3y agovery cool. Are there libraries like these that do whole characters with bodies? Would love to play with those!
- rented_mule 3y agoSomeone I know has done some work to parameterize facial expressions: https://www.redblobgames.com/x/1845-face-generator/ https://www.redblobgames.com/x/1845-face-generator/ He has a bunch of other interesting things like this, too: https://www.redblobgames.com/ https://www.redblobgames.com/
- jlturner 3y agoThis is pretty common in 3D work. Blender has a feature called “blend shapes” that implements a similar interface, and is commonly used for complex facial animation and general model parameterization.
- Tijdreiziger 3y agoDuolingo did a talk at their Duocon conference about how they use parametrization to animate the characters in their app. https://www.youtube.com/watch?v=fgOqvyPif3g https://www.youtube.com/watch?v=fgOqvyPif3g (no affiliation)
- sabellito 3y agoTheir post on Polygonal Map Generation for Games [1], from 2010, got me into procedural generation in general. [1] http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/ http://www-cs-students.stanford.edu/~amitp/game-programming/...
- nmstoker 3y agoThat's cool - I had been thinking with the OP site that quite a number looked like they were scowling/angry so a way to vary that is interesting to explore.
- outime 3y agoI liked it a lot, including the README. The author seems to be an indie dev who creates sport management sim games [1], all of which run entirely in the browser like the linked library (which is used in the games). [1] https://zengm.com/ https://zengm.com/
- criley2 3y agoNo wonder I instantly recognized these faces as Basketball GM's art! Dumbmatter has made some very cool things.
- streptomycin 3y agoThanks for plugging my main project, I came too late to this thread to do it!
- Joel_Mckay 3y agoVery fun little project. Nice =)
- SiempreViernes 3y agoAww, it's not making Chernoff faces :( (https://en.wikipedia.org/wiki/Chernoff_face https://en.wikipedia.org/wiki/Chernoff_face)
- DyslexicAtheist 3y agothey should have called it "4 non blondes" because there are no blonds
- Minor49er 3y agoUsing the "faces.js editor" link at the bottom of the page, it shows that you can use any color you want for the hair. Also, if it didn't allow blonds, it would probably just be called "no blonds" since there are more than 4 possible variants
- DyslexicAtheist 3y agosounds like you didn't get the joke. oh well.
- Mashimo 3y ago* 4 can also be "for" * There is a band called "4 non blondes"
- 090rf 3y ago[flagged]
- jszymborski 3y agoWhen are the Faces.js NFTs going for sale? /s
- daltonlp 3y agoIf you like that, you may also like: https://pixelfaces.io/ https://pixelfaces.io/
- ezequiel-garzon 3y agoApologies for such a basic question. I have node installed on my machine, but clearly no idea how a JS library is included anymore (among other things...). I created an HTML file, included a div ``a div with id "my-div-id"`` as instructed, and even added type="module" in the script tag, but I get in Chrome ``Uncaught TypeError: Failed to resolve module specifier "facesjs". Relative references must start with either "/", "./", or "../".`` Any pointers on all the steps to running this? Should I expect node to create a js file that could be served together with the HTML file? Or would my hosting server need to have node, and run it every time there is a request? Thanks in advance, I'm sorry for the confusion.
- tylerchilds 3y agonot a basic question at all— front end has jumped the shark. you can bypass node, npm install, etc for a prototype entirely in an html file leveraging an import map. this is the importmap i load for all my pages: https://github.com/tylerchilds/plan98/blob/6120e6a80a3d4843801dfce77b6743b4a09315cd/client/public/index.html#L88 https://github.com/tylerchilds/plan98/blob/6120e6a80a3d48438... to support faces, i’d add an entry: “facesjs”: “https://esm.sh/facesjs@4.0.0” https://esm.sh/facesjs@4.0.0” which should get rid of the import path issue, and to support legacy browsers that still might have that error: https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
- nilslice 3y agoObviously this also needs to be a library in Zig, Rust, Go, Elixir, Haskell, Java, C#, F#, OCaml, PHP, Python, Ruby, Perl, C, C++ & Lean So, it now lives as an Extism[0] wasm plugin you can call from those languages: https://modsurfer.dylibso.com/module?hash=2050e7f7a129a48df08a231411135711dc87a33c81367493836ca68834c02907 https://modsurfer.dylibso.com/module?hash=2050e7f7a129a48df0... [0]: https://github.com/extism/extism https://github.com/extism/extism
- mnahkies 3y agoInteresting, I hadn't come across extism before. How hard would it be to package https://github.com/biojppm/rapidyaml https://github.com/biojppm/rapidyaml in this way? (And do you have a extism for dummies guide?)
- nilslice 3y agoExtism can be really useful for packaging up and running cross-language libraries! The most clear information about it is at: https://extism.org https://extism.org, but its a bit focused on the primary use case for Extism, being a universal plugin system. There is a C PDK (https://github.com/extism/c-pdk https://github.com/extism/c-pdk) which you'd probably want to use in a new wrapper around your library in C++, and compile it to wasm32 freestanding or WASI, but without emscripten. Extism doesn't currently have an interop layer to emscripten.
- richardfey 3y ago> Don't worry about what some plug-in code might do to your program. Extism is built with security as a core principle, and fully sandboxes the execution of all plug-in code. I find the wording a bit off here. Responsible security involves transparency along the supply chain and minimum trust, certainly not talking about worries and giving them up with ease.
- nilslice 3y agoWould you suggest something more appropriate?
- b0bb0 3y ago[dead]
- tvink 3y agoI thought "ah maybe they're saying scarce digital assets, because they don't wanna be conflated with NFT pyramid schemes".. clicked link, and found fullblown ponzinomics with "assets" paying out tokens. And people wonder why most of us are tired of this stuff.
- b0bb0 3y agoI don't know why you see it as any sort of ponzi.. it's just an experiment with digital assets, role-playing and world building. Involving money is a pyramid scheme? Perhaps not the thread to discuss. Guessing the reaction is because crypto is mainly grifters + money grabs.. and the cringey apes were the worst representatives.
- DonHopkins 3y ago>Perhaps not the thread to discuss. So you can't deny it's a Ponzi scheme, but you just don't want to discuss it here? But YOU brought it up! This thread is a FINE place to discuss it, since YOU started the top level thread by shilling your Ponzi scheme here all by yourself, before suddenly trying to cut off the discussion when it didn't go the way you planned, so let's discuss it anyway: Yes it's a Ponzi scheme on its face (or rather on Fernando Botero's faces ;), and worse yet, it's based on misappropriation of an artist's work, plus you also blatantly infringe on and dilute many trademarks at the same time, for money. You're not the victim here, so don't try to act hurt that "many around here don't love scarce digital assets" and surprised that "I don't know why you see it as any sort of ponzi". Yes you do know, because it obviously is, and you even tried to make a dishonest weasley disclaimer "I know ... but ..." when you first shilled it here, as if it's wrong and unfair to you that people hate Ponzi schemes and stealing art and infringing and diluting trademarks and shilling on Hacker News. Dan Olson (Folding Ideas): Line Goes Up – The Problem With NFTs https://www.youtube.com/watch?v=YQ_xWvX1n9g https://www.youtube.com/watch?v=YQ_xWvX1n9g >If someone pitches you on a "great" Web3 project, ask them if it requires buying or selling crypto to do what they say it does. Chris Natsuume (Ninesquirrels): Let me explain Blockchain gaming and Play-to-Earn. https://www.youtube.com/watch?v=UKzup7XDyq8 https://www.youtube.com/watch?v=UKzup7XDyq8 >NFTs are a pure scam. Blockchain gaming is a pyramid scheme. Play-to-Earn is not only a scam, it's deeply immoral. Chris Natsuume (Ninesquirrels): Using NFTs to own ingame objects: Also pretty much a scam. https://www.youtube.com/watch?v=8IYjsWBbmKI https://www.youtube.com/watch?v=8IYjsWBbmKI >In this video, I'd like to clarify and further explain: Using NFTs to own ingame objects is an unnecessarily inefficient byproduct of a larger scam.
- jonwinstanley 3y agoAre there any licensing restrictions to using this library and the images it creates?
- streptomycin 3y ago(faces.js dev here) Code is Apache license, and you can do whatever you want with the output. If you want to be nice, lmk if you use it somewhere, I like seeing it in the wild!
- bitwize 3y agoSpinnaker's Face Maker (https://www.youtube.com/watch?v=5K4ovkVLp8Y https://www.youtube.com/watch?v=5K4ovkVLp8Y) for the modern era!
- monooso 3y agoI built something similar a few months back [1][2]. Among other things, it accepts an arbitrary key, and will always generate the same avatar for the same key. Very handy for apps which need to generate user-specific avatars. [1]: https://github.com/monooso/avataraas https://github.com/monooso/avataraas [2]: https://github.com/monooso/avatar https://github.com/monooso/avatar
- snissn 3y agoHere's a demo of my project shape faces https://shapefaces.com/ https://shapefaces.com/
- red1reaper 3y agoAren't those like 2d version of nintendo's MIIs? I mean, the eyes noses and mouths are very much like those of MIIs