zengm-games / facesjs Goto Github PK
View Code? Open in Web Editor NEWA JavaScript library for generating vector-based cartoon faces
Home Page: https://zengm.com/facesjs/
License: Apache License 2.0
A JavaScript library for generating vector-based cartoon faces
Home Page: https://zengm.com/facesjs/
License: Apache License 2.0
It'd be cool to put an age
property on the root of the face object, and use that to control aging-related features, like facial lines, balding, and graying hair.
Hi,
I played facesjs library on the project,
That project build from nextjs 14 but I got the issue when use the faceToSvgString
function. the error is global is not define
.
I have tried several but it still error.
How can I use it on nextjs.
Thanks
Interesting idea by a ZenGM Discorder below
Ultimately I really like the set of mouths right now so I wouldn't fully vouch for this change, but it's interesting
Could correlate with how the player feels about re-signing with the team in BBGM or similar
https://discord.com/channels/290013534023057409/331882115119448065/1234550634280386591
From Reddit:
Beautiful new face editor- wonderful job as always. But where is my beloved ‘shave’ option??? any time i wanted to give a player more personality, age them up, or just make them a sexier hunk of a man, i would give em a lil 5’ o clock shadow. i’ve fallen into a deep depression😫 what have you done with my most coveted facial customization parameter sir
Indeed it is missing in the new editor!
In the old editor it was a text field containing something like:
rgba(0,0,0,0.25)
So a transparent black color. Randomizing it just makes the alpha value change somewhere between 0 and 0.5. But you could actually put any color in there.
Ideal UI for shave in the new editor:
@tomkennedy22 are you interested in doing this? If so, please do! If not, just let me know and then I'll do it.
Looking at https://zengm.com/facesjs/beta/ , selecting the randomize button for Mouth Size sets the value to 0. Selecting it again retains the 0 value and does not randomize the value as expected.
It should somehow be possible to say "make a face that looks like a relative of another face" - basically constrain the randomness so that the output is similar to an existing face.
In BBGM/FBGM this could be used to create someone who is a relative of an existing player.
Hello, I love the project but the github icon seems broken. I would love to fix it if you are open to it
When I build a custom face, sometimes I have trouble remembering what all the hair, mouth, eye options are. I thought that maybe a gallery of sorts, where you take you existing face, and then look at all X options (hair, accessory, etc), and choose which you like the most
I have a very very very rough draft below, but option for any thoughts on:
I've played around with the concept of adding in team names to jerseys, if a team has that feature enabled. It would require some changes for the display function to (A) determine if this team displays team name, and (B) actually pull the team name in. But the text can be added as a simple SVG element.
No worries if you're not interested, but I have some of the code to display working now, and could finish it up if the feature is appealing.
It'd be cool if generate
took an optional parameter to specify a race. I'm not sure how granular the races should be. But it'd be a little more immersive if players in Basketball GM roughly matched their country of origin.
Decent idea for more customization -
https://discord.com/channels/290013534023057409/331882115119448065/1087874167958945822
"Terrifying glitch" from reddit sub
How to trigger this glitch:
The reason is that if the window is small, then it doesn't show the faces of those players. But it does draw them, it just doesn't show them. The problem is that if a face is drawn while it's not displayed, then some of the facial features get messed up, because some of them are positioned relatively to others but that only works if it's actually shown.
After writing that, idk if that will makes sense to anyone :) but the fix would be to delay drawing the face until it's actually displayed.
Would the lazy loading functionality from Face component solve this?
Hi,
I just found ur work that is exactly what i was looking for.
Actually im working for a huge project that's on Discord and would use some character generator as you presented.
I just look at your documentation but i don't think that can be use on Discord right ?
I wanted to know if there's any way to generate an image (or a link) that i can use to display the image, because on Discord i can't precise an HTML element.
Thank you so much.
Have a great day
Hello, i don't know if you know who i am, but my name on reddit is u/sscZERO and Goose #3235 on discord. I have been talking to dumbmatter about the possible future of adding in females to bbgm. And i asked who i could talk to about the faces, and he directed me here. Please lmk what you can do, and if you have a discord, please do dm me on there, as i am not very active on github.
Whether there's a fit in BBGM or not, wondering if there's any interest in a ref outfit. First pass was done kinda lazily, would probably fix colors/size/bar width if thumbs up
Sample SVG code:
<svg width="100%" height="100%" viewBox="0 0 400 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<g id="suit">
<path id="Shirt" d="M10,600C10,600 10,550 70,530C77.392,527.536 84.025,524.92 89.977,522.218C89.977,522.218 112.174,510.76 117.574,507.199C118.492,512.863 111.076,508.897 125.931,521.518C137.439,531.295 167.631,551 200,551C243.448,551 276.369,527.279 275.782,510.725C275.426,500.695 299.25,518.504 310.023,522.218L310.583,522.471C316.39,525.083 322.839,527.613 330,530C390,550 390,600 390,600L10,600Z" style="fill:white;fill-rule:nonzero;stroke:black;stroke-width:6px;"/>
<path d="M18.096,600L18.096,571.334C22.402,563.083 28.998,554.165 39.102,546.204L39.102,600L18.096,600ZM52.243,600L52.243,537.612C57.485,534.781 63.377,532.208 70,530C71.1,529.633 72.183,529.263 73.249,528.89L73.249,600L52.243,600ZM86.39,600L86.39,523.8C87.613,523.276 88.808,522.749 89.977,522.218C89.977,522.218 99.35,517.379 107.397,513.014L107.397,600L86.39,600ZM120.538,600L120.538,516.769C121.881,518.022 123.642,519.573 125.931,521.518C129.501,524.551 134.87,528.54 141.544,532.6L141.544,600L120.538,600ZM154.685,600L154.685,539.708C161.123,542.774 168.209,545.549 175.691,547.581L175.691,600L154.685,600ZM188.832,600L188.832,550.249C192.508,550.734 196.239,551 200,551C203.345,551 206.628,550.859 209.839,550.592L209.839,600L188.832,600ZM222.98,600L222.98,548.742C230.615,547.215 237.676,544.989 243.986,542.302L243.986,600L222.98,600ZM257.127,600L257.127,535.393C269.064,527.695 276.055,518.433 275.782,510.725C275.711,508.736 276.592,507.841 278.133,507.715L278.133,600L257.127,600ZM291.274,600L291.274,512.637C297.928,516.168 305.254,520.574 310.023,522.218L310.583,522.471C311.143,522.723 311.709,522.974 312.28,523.224L312.28,600L291.274,600ZM325.421,600L325.421,528.421C326.914,528.953 328.44,529.48 330,530C336.069,532.023 341.524,534.353 346.428,536.907L346.428,600L325.421,600ZM359.569,600L359.569,545.178C369.411,552.624 376.07,560.988 380.575,568.897L380.575,600L359.569,600Z" style="fill:rgb(34,34,34);"/>
<path id="Shirt1" serif:id="Shirt" d="M10,600C10,600 10,550 70,530C77.392,527.536 84.025,524.92 89.977,522.218C89.977,522.218 112.174,510.76 117.574,507.199C118.492,512.863 111.076,508.897 125.931,521.518C137.439,531.295 167.631,551 200,551C243.448,551 276.369,527.279 275.782,510.725C275.426,500.695 299.25,518.504 310.023,522.218L310.583,522.471C316.39,525.083 322.839,527.613 330,530C390,550 390,600 390,600L10,600Z" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:6px;"/>
<g id="Collar">
<g transform="matrix(1,0,0,1,0.457375,0)">
<path d="M277.919,505.94C276.215,506.632 200,550 200,550L232.485,581.939C232.485,581.939 267.391,549.65 282.175,527.05C292.087,511.898 279.624,505.248 277.919,505.94Z" style="fill:rgb(33,33,33);fill-rule:nonzero;stroke:black;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"/>
</g>
<g transform="matrix(-1,0,0,1,400,0)">
<path d="M279.339,504.354C277.635,505.046 200,550 200,550L232.485,581.939C232.485,581.939 267.391,549.65 282.175,527.05C292.087,511.898 281.044,503.662 279.339,504.354Z" style="fill:rgb(33,33,33);fill-rule:nonzero;stroke:black;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"/>
</g>
</g>
</g>
</svg>
Hello,
I'm loving the potential of this library, but I'm finding it difficult to use only on the client side. Do you have plans to release a server side version?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.