I wanted to do something silly and fun, and I love South Park, so I thought this would be a fun challenge. I also wanted to use p5.js as I feel more comfortable with that program. So I set out to do it.
Using p5.js, I created variables for DOM elements that would allow for the customization of a character. I created the shape of the character using some basic shapes like circles and rectangles, but I also used vertexes to create more complex forms, such as the torso. I set the fill colors to be the values chosen from the DOM selection elements, and set the expression/pupil size to also be chosen from the DOM elements.
The character is in a new class that uses the constructor. The character appears in the customization menu, and once it is customized and the user clicks "create" the character will be cloned and added to the environment, where I used noise to make it move around.
The environment is set to look similar to the bus stop that is featured in the show, and the base character (before customization) is made to look like the character Stan.
I am pretty happy with this overall. It was fun and challenging, and I'm glad it looks interesting. However, I am using an iframe to display it here, and the rest of the website lacks customization. If I can, I'd like to shift the drawing out of the iframe and just have it exist within the website. And I would like to add more customization/character to the website itself. Although, I do kind of prefer the bare minimum simplistic look.
Please email jce6813@nyu.edu and I'll get back to you!