❤️ ️Art of Attraction ❤️
Cogapp recently teamed up with the National Gallery of Art in Washington D.C. to create games from their collection. The NGA were interested in how games could be used to help people experience their collection and learn more about art in general, and Cogapp were more than happy to oblige and partner up with them for our 25th hack day. The NGA already have a fun and engaging game called Artle, where the user is given up to four guesses to correctly name an artist from seeing four of their artworks, and the success of this had inspired them to develop more games. If you haven’t played Artle yet, I encourage you to give it a go.
At a Cogapp social a few weeks before the hack day, we had the bright idea of basing our games on British gameshows from the 80’s and 90’s, this seemed quite appropriate for a collaboration with an American art gallery. After some lively discussion, I came up with the idea of basing a game on a particular dating show which used to air on Saturday nights in the UK. My lips are sealed, but see if you can guess which show inspired me when you hear more about the game 😉
Due to the loose dating theme, I decided to call my game “Art of Attraction”. I planned to have three artworks that are hidden from the user, and give the user the opportunity to ask three questions which would be answered by each of the three artworks, as though they were a person. Once the user had read the answers from each of the three artworks, they could then choose their favourite artwork based on their witty replies alone – at this point they still wouldn’t have actually seen any of the artworks. Once the user had locked in their decision, it would be time for the big reveal. The chosen, favourite artwork would be revealed first, followed by the other two rejected artworks, and it may be that the user feels they made a terrible mistake and are hit with an overwhelming sense of regret!
I thought this would be a fun way of being matched with an artwork that you may genuinely like, and it could be played multiple times to build up an idea of the types of artworks you like, and maybe get an idea of which artworks you’d like to go and see in real life in the National Gallery of Art.
My plan for building the game was to use Next.js to build the UI (user interface), and to use OpenAI’s API to send questions to ChatGPT to generate the “artworks” answers to the series of questions. I had a stretch goal of pulling in three random artworks from the NGA’s collection, but for the first iteration of the game I would hard code the three artworks.
The first step was to create a UI inspired by the set of the aforementioned dating show, so I made everything various shades of pink. 💕 The UI features three pink boxes which act as placeholders for the three hidden artworks, and a form with three sample questions and a text input so the user can get creative and come up with their own questions if they choose. Once one of the sample questions has been asked, it’s replaced with a new question so the user is never short on options. To give you an idea, the initial sample questions are:
- I love spending time looking at beautiful scenery, do you think I’ll enjoy looking at you?
- My home is filled with interesting objects that each have a unique story, do you think you’d fit in there?
- I’m drawn to thought-provoking and emotionally charged art. Can you evoke strong feelings or reflections in me?
When the user submits the form with their chosen question, the OpenAI’s API is used to send three separate API calls to ChatGPT to generate responses from each of the three artworks. I used the following prompt, where [Title], [Artwork] and [Question] are placeholders for the true values:
“Please answer the following question based on the themes of the painting “[Title]” by “[Artist]”. Your answer should be in first person, as though it’s the painting itself that is answering. Don’t include any mention of the artwork title, the artists name, or describe anything specific about the painting itself. Simply use the painting as the inspiration for your answers. Please keep your answer short and succinct, and ideally a bit cheeky. Use simple language and don’t address the interviewer with pet names.
Question: [Question]”
The prompt developed to include “don’t address the interviewer with pet names” because when I asked for the answers to be a bit cheeky in an attempt to make the answers more humorous, they became filled with “Of course honey”, “Let me tell you baby” etc, and nobody wants to be on the receiving end of a stranger addressing you with a term of endearment.
While the game did lead to some amusing outcomes, in general ChatGPT isn’t very good at being funny – maybe that will change with time. Instead, the answers were somewhat humorous because of how dry and soulless they were. Here are some examples:
Question: “I love spending time looking at beautiful scenery, do you think I’ll enjoy looking at you?”
Answer: “Absolutely! I may not be rolling hills or snow-capped peaks, but I’ve got my own kind of beauty. Feast your eyes on the luscious fruits, the shimmering oysters, and the inviting glass of wine. I may not have breathtaking vistas, but I can certainly make your taste buds tingle and your mouth water. So if you appreciate the finer things in life, I guarantee you’ll find me quite the visual treat.”
Question: “My home is filled with interesting objects that each have a unique story, do you think you’d fit in there?”
Answer: “Of course! I would be the perfect addition to your home. With my captivating presence and cozy cushion, I’ll bring a touch of winter charm and feline grace to your collection. Plus, I have plenty of stories to share, from snowy adventures to lazy days by the fireplace. So, make some space and let me purr-fectly fit into your fascinating world!”
Question: “Do you like piña coladas?”
Answer: “As a painting, I am devoid of taste buds, so piña coladas are lost on me.”
Once the user assesses the responses and chooses their favourite artwork, it’s time for the big reveal. The pink placeholder is then updated to display a thumbnail of the chosen artwork, and the image acts as a link to the artwork on the National Gallery of Art’s website so the users can learn more about it if they wish. For instance, if the chosen artwork was “Winter: Cat on a Cushion (L’hiver: Chat sur un coussin)” by Théophile Alexandre Steinlen it would display as below, with a link to the artwork on the NGA’s website.
Sadly I didn’t reach my stretch goal of randomising the artworks, but I laid the groundwork for this to be implemented in the future. The NGA use the following data schema for each of their artworks, so although I only needed the Title and Attribution information I hardcoded the three artworks using the entire object so that the they could easily be swapped out for other, randomised artworks in the future. I also thought it would be useful to keep all of the data for other possible enhancements. For instance, rather than displaying a thumbnail of each of the artworks at the end of the game, the IIIF manifest (“iiifurl”) could be used to show a super high resolution image using a IIIF viewer like OpenSeadragon instead.
{
"accessioned": "1",
"accessionnum": "1986.4.1",
"locationid": "",
"title": "Winter: Cat on a Cushion (L'hiver: Chat sur un coussin)",
"displaydate": "",
"beginyear": "1859",
"endyear": "1923",
"visualbrowsertimespan": "1851 to 1875",
"medium": "color lithograph",
"dimensions": "sheet: 45 x 57.7 cm (17 11/16 x 22 11/16 in.)",
"inscription": "upper right in plate artist's monogram; lower right /in graphite: Steinlen",
"markings": "",
"attributioninverted": "Steinlen, Théophile Alexandre",
"attribution": "Théophile Alexandre Steinlen",
"provenancetext": "",
"creditline": "Gift of Lesley Hughes",
"classification": "Print",
"subclassification": "",
"visualbrowserclassification": "print",
"parentid": "",
"isvirtual": "0",
"departmentabbr": "CG-E",
"portfolio": "",
"series": "",
"volume": "",
"watermarks": "",
"lastdetectedmodification": "2023-05-10 13:28:58.583-04",
"wikidataid": "Q74071217",
"customprinturl": "",
"images": [
{
"uuid": "16943d3f-1589-4d52-b613-80856cec6ba2",
"iiifurl": "https://api.nga.gov/iiif/16943d3f-1589-4d52-b613-80856cec6ba2",
"iiifthumburl": "https://api.nga.gov/iiif/16943d3f-1589-4d52-b613-80856cec6ba2/full/!200,200/0/default.jpg",
"viewtype": "primary",
"sequence": "0",
"width": "4736",
"height": "3711",
"maxpixels": "",
"created": "2010-09-01 11:39:07-04",
"modified": "2023-07-27 15:46:52-04",
"depictstmsobjectid": "66755",
"assistivetext": ""
}
],
"primaryImage": "https://api.nga.gov/iiif/16943d3f-1589-4d52-b613-80856cec6ba2/full/!200,200/0/default.jpg",
"primaryImageHeight": "3711",
"primaryImageWidth": "4736",
"Technique": [
"lithograph"
],
"Keyword": [
"Cat"
],
"Theme": [
"mammal"
],
"School": [
"French"
],
"objectID": "66755"
}If you’d like to give the game a go and see if you find your perfect match, you can do so here. As the artworks are still hard coded you can only enjoy the big reveal once. My advice is to savour it!
Hannah is a Developer at Cogapp, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about our work.
If you’re interested in joining us for a hack day, there’s more information on our website.
We’re on Twitter or you can contact us via our website.
