Jul 16, 2019
How I designed playing cards using a data visualization design approach
The creation of a generative art system that gives you an infinite number of playing card designs
This article is originally posted on my website. Here’s the link to the live system if you want to skip the article and go straight to the system.
You can also jump directly to different parts of this article:
Introduction: A Playing Card Generator?
The Playing Card Generator is a generative art system that creates playing card designs. It visualizes playing card data (e.g., spade-ace, heart-7, diamond-12(queen)) into graphical elements.
Currently, it has one set of algorithms that creates infinite variations of designs. Each set of design contains 56 cards, including the standard 52 cards, 2 joker cards, a cover design, and a backup card.
Here are some sample outputs:
While inspiration of the particular card design comes from various places, the idea of creating generative-art cards comes from Luke Patton and Luke’s project “Canvas Cards.” Luke creates a card cover design per week. It’s an awesome ongoing project, do check it out.
The Playing Card Generator is licensed under Attribution-NonCommercial-NoDerivs (CC BY-NC-ND). Feel free to download and print your own card for personal use. You can use #playingcardgenerator if you want to tag it on SNS.
I am planning to write more algorithms in the future. Stay tuned!
The Design Process
I started by generating a fixed dataset that represents a poker deck. I used the number 0,1,2,3 to represent four suits and 4 to represent special cards such as cover and jokers. Since each card is already associated with a number (e.g., Ace = 1, J=11, Q=12…), we are now dealing with two attributes: suit and card number. For example, Spade-Queen is 0–12, Diamond-3 is 3–3. The cover card is 4–15 and jokers are 4–13 and 4–14.
After deciding the data representation, I started the encoding rule design. For the first set of the algorithms(a.k.a, the polygon algorithm), I wanted to make something easy and obvious. So, each suit was mapped to a polygon with different numbers of sides.
The card number was then mapped to the number of polygons. For example, Diamond-3 would consist of 3 nested parallelograms. Cards with higher numbers tend to look better because of the complexity.
The particular nested design looked ok in black and white. If we printed it on physical card stock, we might be able to count. However, if we alter the color and stroke of these polygons, it becomes impossible to count the card number. Therefore, I decided to add a secondary encoding of the card number using dots.
The number of dots corresponds to the card number directly. e.g., Spade-Queen would have 12 dots. The location of the dot is entirely random. Connections between dots are also randomly generated.
Cover card and joker cards involve more randomness. Two jocker cards share the same shape design but have different dot and color scheme. The backup card is a blank card.
How I Got Here
Over the past years, I have been learning and playing with generative art: the art-creating procedure that relies on rules. As a data visualization researcher and designer, I spot many similarities between data visualization and generative art. The most essential overlap, in my opinion, is the idea of rules. In data visualization, we design encoding rules that map data into graphical attributes such as position, length, and color. In generative art, we create rules for each element within the canvas. In generative art, many rules rely on randomness (e.g., this dot connecting algorithm), which can also be viewed as a mapping between a uniformly-distributed data to some graphical attributes.
Let me tell you a short story about my first visualization-inspired generative art system. Last year, I participated in the UIST student innovation challenge and ended up designing a heartbeat doodling robot with my teammates Yue and Olivia. The idea is that you can track your heartbeat through a sensor, and our robot will create a piece of art from that data. You can see a short video about this project here.
At that time, I was pretty much consumed by endless hardware debugging that I didn’t reflect on what my team was creating (we secretly called this robot Heartbreaker, instead of its official name CardioDoodler). Months later, I realize that we actually created a hybrid of generative art and visualization. We were creating art with data by designing an unconventional encoding rule with randomness. While this not a new continent in the domain of visualization or generative art, it was mind-blowing to me. I finally saw the connection between generative art and visualization clearly. Also, I finally created a piece from scratch and realized that I wanted to create more.
As a result, I spent most of my procrastination quota on creating generative art systems like this. I might write more about them in the future.
Now, it’s time to go to the live version of the generator and play with it. You can refresh the page or click the “new design” button to get a new design variation.
