Sounds obvious, but the Playing Card Generator creates playing card designs.

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:

  1. Introduction: A Playing Card Generator?
  2. The Design Process
  3. How I Got Here?

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.

CardioDoodler, a doodling robot that visualizes heartbeat data.

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.

--

--

--

Generative artist and HCI researcher. Here to make art.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Smart City Vigilance

Design is power and responsibility

Methodology of Visualization (Spring 2021)

Communicating with Accuracy and Inspiration at TEPCO with “Scenes”

My Air Force Anniversary and Day 9 of NSS | Thu Aug 19, 2021

Visual Foundation Weekly Retrospective (Week11)

Attitudes of Collaboration

Tall Buildings Are Leaving Cities in Darkness. These Architects Have a Radical Fix.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shiqing (Licia) He

Shiqing (Licia) He

Generative artist and HCI researcher. Here to make art.

More from Medium

Writing better microcopy for the login form

There are 2 rows of UI elements. At the top row, starting from the left side, there are a green tick, an outlined button that says ‘log in’, and a contained button that says ‘sign up’. At the bottom row, starting from the left side, there are a red X mark, an outlined button that says ‘sign in’, and a contained button that says ‘sign up’.

Communication Design: Project 3 Documentation

HTML Quick Notes

Building Confidence in Adobe XD