Generative Tarot Deck

Get your Tarot reading here.

What I did

  1. Programming
  2. Design


4 weeks


  1. p5js
  2. JavaScript
  3. JSON file


A project Computer As Expressive Medium graduate course, students were challenged to create an interactive web-based generator that generates art, sound, or text using JavaScript and the library p5.js. In addition to the technical requirements, students were encouraged to “make with meaning” by employing critical making practices while designing and creating a generative art program that uses data as input.

Generative programming is about creating a “space of possibility” for what your system can create. Instead of creating one specific thing, it can create many things. But it can’t create anything. This ends up being an interesting design challenge because it is meta-design: designing a thing that designs things. So, when creating this project, think about what types of things you want this system to be able to create, and how you might shape that space.

Design Process

First Concept

Originally, I wanted to bring a critical lens to issues impacting social justice, such as prison reform, abolition, and climate change. However, learning more about APIs and data sources, I quickly learned that the data I wanted to creatively use did not exist in the capacity that I needed. This was helpful in two ways:

  1. It changed the nature of my project to focus on data sources that are easily accessible, then consider a critical lens to those datasets.
  2. It prompted me on a journey of what is data, who gets to create it, and how does it impact social reform. While this was not included in the scope of the project, it ignited a curiosity I didn’t know existed!

A New Direction

Letting go of my initial ideas was a bit tough, but the best option moving forward. Instead, I focused my attention on data that was available, still fit the criteria of the project, and was more personal. After speaking with my professor and expressing my interest in Tarot reading as a healing tool, she informed me of Mark McElroy’s, A Guide to Tarot Meanings, as a potential JSON file for my project.

With the data source in mind, I then worked on creating an interactive experience. I wanted to mimic traditional Tarot readings, where the spread is based on “Past,” “Present,” and “Future.” Considering the JSON file did not include images, I wanted to add three types of text from the data source: Name of Card, Fortune, and Meaning (Light or Dark). This way, the user would have a thorough understanding of what the card means and how it contributes to their overall reading.

Final Product

Below is a screenshot from an example reading.

1. At the top of the screen are three buttons that read “Past,” “Present,” and “Future.” These cards represent the traditional spread of a Tarot Deck.
2. Once the user clicks on those buttons, the Name of the Card and Meaning ext generate in the rectangle below the button, corresponding to that card’s meaning.
3. The very bottom rectangle is where the Tarot Spread is given meaning and applies to each individual.

The player can start over by clicking “backspace” or clicking on the top buttons countless times.

Get your Tarot reading here.