search

zengm-games / facesjs

A JavaScript library for generating vector-based cartoon faces
https://zengm.com/facesjs/
Apache License 2.0
1.28k stars 99 forks source link

Aging #3

Open dumbmatter opened 5 years ago

dumbmatter commented 5 years ago

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.

tomkennedy22 commented 4 years ago

Hey @dumbmatter , had some thoughts on this. At least for hair:

You could scale a players hair color with age, and even apply a linear gradient. So for instance, sure, a players hair might all slowly turn gray. But it could start at the ears and make it's wait up. Example and POC screenshots:

(I forgot to do facial hair)

Screen Shot 2020-05-21 at 9 52 43 AM Screen Shot 2020-05-21 at 9 52 50 AM Screen Shot 2020-05-21 at 10 15 16 AM

Just somewhere in the svg object: `

  <stop offset="100%" style="stop-color: #575451;stop-opacity:1;"></stop>
</linearGradient>`

The player hair (fill: url is the important part, with id matching the snippet above): <path d="M60 310H50s-10-10-10-30c-10-90 10-130 20-140s30-20 50-40c21.21-21.21 50-20 60-20s30 20 30 20 20-20 30-20 38.79-1.21 60 20c20 20 40 30 50 40s30 52.05 20 140c0 20-10 30-10 30h-10v-20c0-5-10-20-15-25s-15-55-25-65-54.5-10-54.5-10-25.5-30 14.5 20c-20 0-60-20-60-20s-40 20-60 20c40-50 14.5-20 14.5-20s-44.5 0-54.5 10-20 60-25 65-15 20-15 25v20z" fill="#272421" stroke="#000" stroke-width="4.11522633744856" style=" fill: url(#grad1) gray; ">

I do need to think about how the age parameters would work... we would want the grayness to come in for different players at different ages, but can't truly use a random function as we would want it to generate the same way for each player every time. And then maybe shift a little each year of the players career. Maybe as players have their face generated the very first time we could establish a few variables then, like AgeFirstGray and GraySpeed with example values of like (33, .05). So, not sure how it'll end up looking, but if you're cool with this type of gradient coloring I can keep thinking about it

dumbmatter commented 4 years ago

That's cool. I'm not sure if there is, but it'd be even cooler if there was a way to make it come in even more realistically, like "salt and pepper hair". But if not, a gradient like this is probably a good solution.

Also to consider - players going bald, and wrinkles appearing. These might require changes to face generation too, because maybe some hair styles and facial lines should not be used when generating a player, and should only be applied based on age.

Maybe as players have their face generated the very first time we could establish a few variables then, like AgeFirstGray and GraySpeed with example values of like (33, .05).

Yeah, that's a good idea.

gtabot commented 3 years ago

Check out this pull request for some aging related work: #18