In order to help me learn my front-end development better, I started a side project to parse written English. I knew it was an undertaking WAY over my abilities, but I was curious as to how far I could get. In order to make it both more enjoyable and more accessible it ended up branching into much smaller and more realistic projects. One was essentially creating a setup for dialogue trees (I was trying to avoid that but it ended up there anyway), and another was this. How varied and interesting can I get characters to be through "randomly" assembled features?

It doesn't do much yet, between still being fairly beginner at JavaScript and the grand undertaking that is crafting personalities my project is in its infancy. If you click through the image above you'll find what I consider my MVP (minimum viable product) hosted on Codepen. The first steps were:

  • At least a little visual appeal. Nobody likes seeing a designer not design stuff.

  • Having it work on both desktop and mobile.

  • "Rolling" a name for the user.

  • "Rolling" a name, appearance set, and phrases for characters upon request (button click).

  • The appearance of a rudimentary conversation with each character created.

I figured the best way to create as many possibilities as I could while leaning on my strengths would be to break the image into pieces while leaving open space to fill in with flat colors programmatically. With 9 head images, 9 body images, 16 face colors, and an ever-growing array of clothing colors, I was able to create...

Over 71,000 unique characters!

But since some colors will undoubtedly be too similar to be considered unique, then definitely over 81! Which is still pretty neat.

But since some colors will undoubtedly be too similar to be considered unique, then definitely over 81! Which is still pretty neat.


Now I've moved on to hopefully "roll" individual personality traits while possibly combining them with names and visual features, add the ability to speak to a character multiple times, and take the conversation beyond the introductory "hello," "my name is _," and "nice to meet you." If you're interested in seeing progress on that and won't be offended to run into code that's still breaking, visit the link below!