Creative Technology – Design Challenge #1
Use p5.js to make an interactive portrait of your partner
My partner for this project was Corey Kothenbeutel. I decided that I wanted my portrait to be based on an actual picture of Corey, so I used his picture from the ATLAS website as a starting point.
In order for this picture to more accurately portray who Corey is, I learned a little bit about him. His favorite books, his hobbies, and anything else that would tell me more about his personality. My first step in making this portrait of him was to find background images that represented some of his interests.
Finally, I wanted to include all that I had learned about Corey into his portrait. The saying goes "A picture is worth a thousand words." I thought, how many words would a picture made out of words be worth? I wrote a brief blurb about all of Corey's interests I had learned. I then wrote some code that would parse that text and compare where each character would be when written to the display. Those X, Y coordinates are compared to the starting image of Corey, and the RGB value of each coordinate is determined and the color of the text is changed to match.
To complete the project, and make the portrait interactive, I gave the user the ability to turn on and off this text functionality, as well as rotate through the possible backgrounds, resulting in the possible portraits shown in the gallery below.
The code used to complete this project, and the web editor to run it, can be found here: https://editor.p5js.org/jppoulter/sketches/425i8Wj9g
