IIIFind

For Cogapp’s most recent hack day, the brief was to make something fun with IIIF, or if that was too much of a challenge something mildly entertaining.

I wracked my brains for the funnest experiences I’d ever had and soon decided to make a IIIF version of a family favourite card game where you have to find the common object on two cards as quickly as possible (I know how to have a good time)!

Once I had the idea it was straight to work planning. I decided to use artworks as the images so that people could enjoy and discover new artworks whilst playing, plus Cogapp has many art galleries in our client network so I knew I’d have a wealth of resources to choose from.

I decided to use artworks from the Art Institute of Chicago’s collection. Having working with their collection before I knew they had a great selection of public domain artworks and I was already familiar with their API so it was a win-win.

I started off by looking through the AIC’s collection to come up with a list of predefined objects for people to hunt for and I settled on the following:

Now that I had my list of objects I set about finding 7 – 9 artworks for each of them. It was sometimes challenging to source artworks that had enough detail in them to make it even a little bit challenging to find the object. For instance, one of the artworks for ‘Elephant’ didn’t contain much other than an elephant, making it quite obvious what the answer would be for that round:

This issue was exacerbated by needing to use public domain artworks as it restricted my options, plus I only had a limited time to search through the collection for suitable images. While chatting to my colleague Luke about this problem, he suggested also using some AI generated images containing the objects so that there could be more variety without having to spend hours trawling through existing artworks. Using this approach, we could also generate images that could be used in multiple object categories by making sure there was only ever one object crossover in each of the images. In other words, we could create the following images:

Image 1: Monkey, Dog, Boat

Image 2: Dog, Umbrella, Fruit

Image 3: Boat, Clock, Snake

Image 4: Umbrella, Snake, Elephant

Image 5: Fruit, Clock, Elephant

Image 6: Monkey, Clock, Elephant

Image 7: Monkey, Fruit, Snake

Image 8: Dog, Snake, Elephant

However, as some of the AIC artworks I’d selected also had more than one of the objects in then, I still needed to make sure each artwork would only be paired with another artwork if there was only one matching object, as I only wanted there to be one correct answer. For instance, the following two artworks both contain a Monkey and Fruit, so I’d have to put in a check to make sure these two images were never displayed together.

Once I had my artworks (both AI and human-made) I was ready to start building the game. I built a UI (user interface) with two OpenSeadragon viewers so that the user could zoom in and move around the image to see it in more detail and hunt for the relevant objects. To generate the viewers I first hardcoded an array containing the relevant image IDs for each of the objects and randomly selected an object and two image IDs from that array:

Once I had my two image IDs I could then construct the IIIF image URL. This was done differently depending on whether the artwork was one of AIC’s or one of the newly created AI generated images. The AI generated image IDs all contained letters, so I used this as a check to determine how to construct the IIIF URL. This wasn’t the most robust or future proof approach but I was pressed for time so I went with it:

I then triggered this with a ‘Start’ button and created buttons for each of the objects, which when clicked would check whether the button value corresponded to the correct answer.

I also added in a score tracking component so players could see how many correct and incorrect answers they gave and I added a one minute count down timer as I wanted to introduce a speed element to the game to make it more fun when playing solo.

As the original card game is a two player game the final goal I had was to make my game two player as well. I wasn’t sure how to approach this given the time constraints and my colleague Luke came to the rescue again. He suggested using a keyboard with a number pad and assign the main numbers to Player 1 and the number pad to Player 2. That way two people could play against each other so long as they were in the same room and had an appropriate physical keyboard plugged in. It wasn’t perfect as it meant that people wouldn’t be able to play together virtual and they would need specific equipment, but it was the best option I had given the time constraints.

I quickly integrated this featured just in time for the 4.30pm demo so that two of my colleagues could go head to head in a game of IIIFind. It was pretty tense but in the end Tristan was crowned as the Cogapp IIIFind champion.

If you’d like to have a go at playing, either solo or with a friend, you can do so here.

You can also take a look at the code on GitHub.