My first draft of the bodypaint generator was a bit hacky, so I went back and cleaned it up a bit.
I created “drawers” (things that draw, not parts of a dresser) that would draw different things: stars, letters, squares, etc. I could add more than one “drawer” to a placer and fill the canvas with, say, half circles and half heart emojis. But because I mis-used Javascript’s inheritance, I couldn’t create multiple copies of the same “drawer.” So half hearts and half smiley faces wouldn’t work, nor would half red stars with few points & half green stars with many points. As the image below proves, I’ve removed that constraint. Now I can instantiate as many “drawers” as I like, of any type, and give them all different parameters.
The placing feature was mixed in with the top-level generator object. I split it out to its own class, so I could make sub-classes and switch out or combine placers on one canvas just like I could use any combination of “drawers” with one placer. To demonstrate the new placer’s extensibility, I implemented a grid placer in addition to the random placer I made earlier.
Finally I made some quality-of-life improvements to make testing easier for myself.
- A “regenerate” button so I can re-run the generator without re-loading the page.
- A “save to PNG” button so I don’t have to Print-Screen, paste into an image editor, and crop each time I want to add an image to my blog. (If you look carefully at previous entries about this program, the images are off by a few pixels.)