This was a bit of a doozy.
I started out by planning the maker: figuring out how many customizable features I could make, and how many selections for each. Then I got to drawing — I made all layers in the same document using Adobe Fresco, so I could check how they fit together. I then opened those into Photoshop to export each individual layer more easily. There are 155 layers in total (10 for background, 10 for skin, 5 for mouth, 5 for nose, 20 for eyes, 35 for clothes, and 70 for hair — hair combos requires 1-3 layers depending on the style).
The next part was figuring out how the interface would look. Since these were PNGs, I needed every option to be clickable — I couldn’t just show each hair style once and then have the color options below, because I didn’t know how the code would “remember” which hair style you selected once you changed the color. If I’d taken the time to code each shape instead of using PNGs, I think that would be more doable — but holy cow, what an effort that would be.
I drew the interface on Illustrator, which then helped me copy the coordinates onto p5js. My whole code has two classes: Interface and Change. Interface creates the base of what the user sees, and Change creates the hitboxes where the user can click, and the actions that take place once they click. Change gets called into the mouse and key functions to change or clear your selections.
I liked the simplicity of the structure, but it did involve a lot of typing. I used this text replacement website to help me on the long stretches of text. I also did initially separate each category into its own class (like InterfaceText, InterfaceSkin, etc) but found it to be a similar amount of lines, just copying and pasting constructors instead of x and y coordinates. I might be totally off base about that, since I did decide to consolidate early on.
My biggest issue was getting the layers to show up properly. Initially, I had the draw function end without looping — that was the only way I got the background colors to stay static, instead of disappearing as soon as you unclicked. But at that point I was also doing the background colors by writing over a new rect(), which I later switched to a PNG like the rest, so I think it was a mistake to begin with the background anyway. I got to a point where the selections stayed on, but only one layer at a time — so you’d have a disembodied nose, or a featureless body, and so on. Not great. I tried starting and stopping the loop at various different points, in basically any combination I could think of, until I decided to wait for office hours and ask. Scott managed to show me how to make it work — in the Change class, he created empty placeholder images, which are then populated by my PNGs once you click on a category. That way they stay static when the draw loop is going, and also don’t write over each other.
Some tweaks I would like to make with more time:
- At one point I had some small interactions where the bubbles got bigger when you clicked on them. I tried to do it again once the code was all set, but it didn’t work. I didn’t have a lot of time to investigate, but I think that would be a neat feature.
- A couple of people who tested this for me had some confusion about the hair/eye/clothing color bubbles, since they look the same as the background/skin ones but aren’t clickable. Maybe the small interaction should also exist on hover, to give you some subtle feedback of where you can and can’t click. Maybe the colors that aren’t clickable should be squares instead of circles.
- Very small and silly thing — I should switch the mouth and nose Y coordinates on the interface. Having them inverted breaks the logical flow of facial features. No one commented on it, but now that I noticed, it’s really bugging me.
- There are a couple of minor mistakes with the drawings depending on what you select. I won’t point them out, but they’re there. If they keep bothering me I’ll just have to go back into Photoshop and fix the files. 😛