Concept
In my self-portrait, I wanted to take a different approach and portray myself as who I want to be rather than who I am in real life. Since young, I have read numerous comics and enjoyed watching animated movies: my favorite being “Zootopia”. Thus, I imagined myself being in the movie, and I call him : Mr. preachy cow! He gives motivation to those who may be having a bad day and tries to make everyone’s day better!
In order to do so, I needed to implement anthropomorphism and try to five Mr. preachy cow some human characteristics such as wearing a suit or being able to communicate in human languages.
I chose to use circles as my primary medium of drawing as it is the most friendly shapes out of all as there are no edges: representing Mr preachy cow’s inclusive personality. Also, I wanted to change colors of his facial features and the background to show his ability to embrace all cultures and diversity.
Demo
Code Highlight
function checkRepeat(arrayColor, colorCheck){
//checking whether colors are repeating by deleting already assigned color values from the array
for(let i=0;i<arrayColor.length;i++){
if(arrayColor[i]==(colorCheck)) {
arrayColor.splice(i,1);
}
}
}
function doubleClicked() { //double click function to open a new page
window.open('https://www.pinterest.com/hibluchic/inspirational-quotes/'); //opening a pinterest page full of inspirational quotes
}
function mouseClicked() { //mouse click function to generate random moticational words
colorRepeatCheck = '';
randomColorCheck = [];
//inserting all the color values to the array that would be used to generate random color values
for(let i=0;i<randomColor.length;i++){
append(randomColorCheck,randomColor[i]);
}
sentenceDisplay = random(motivationalWords); //generating random text value from the array to display when clicked
backgroundColor = random(randomColorCheck); //generating random color value from the array to change the background color when clicked
checkRepeat(randomColorCheck,backgroundColor); //deleting the color of the background from the array to prevent being repeated
faceColor = random(randomColorCheck); //generating random color value from the array to change the face color when clicked
checkRepeat(randomColorCheck,faceColor); //deleting the color of the face from the array to prevent being repeated
sclerColor = random(randomColorCheck); //generating random color value from the array to change the scler color when clicked
checkRepeat(randomColorCheck,sclerColor); //deleting the color of the scler from the array to prevent being repeated
irisColor = random(randomColorCheck); //generating random color value from the array to change the iris color when clicked
checkRepeat(randomColorCheck,irisColor); //deleting the color of the iris from the array to prevent being repeated
eyeBrowColor = random(randomColorCheck); //generating random color value from the array to change the eye brow color when clicked
checkRepeat(randomColorCheck,eyeBrowColor); //deleting the color of the eye brow from the array to prevent being repeated
mouthColor = random(randomColorCheck); //generating random color value from the array to change the mouth color when clicked
checkRepeat(randomColorCheck,mouthColor); //deleting the color of the mouth from the array to prevent being repeated
}
I am most proud of creating my own function to prevent the colors to repeat when changing. I purposefully made such function to avoid Mr. preachy cow to have the same colors for all his facial features : including his background. Even though the colors are generated randomly when mouse is clicked, there is still a possibility for the colors to be repeated; so I have implemented a function to prevent such event from happening.
Moreover, I made Mr. Preachy Cow to say motivational words when clicked and lead the visitor to a Pinterest page full of inspirational quotes as he is “Mr. Preachy Cow” after all!
Reflection and Possible Improvements
Even though it was fun making my own “Mr. Preachy Cow”, it took me a lot of time getting used to the x- and y-coordinates of the p5.js when drawing as I was not used to the coordinate system. Some of the shapes drawn on the self-portrait are not exactly symmetric and there are rough edges on his ears which could be better polished.
In addition, I think there could be more fun elements used when displaying the texts by making the texts move in certain ways so the user would have more fun with Mr. Preachy Cow.
Despite few regrets and possible improvements I have on my first assignment, I am happy to learn about basics of interactive media and looking forward to develop my learning to create more refined works in the future.