cards
This isn't about any particular card game, but rather about the process of how I opted to represent cards in p5 and React.
Initially, I was content to just use a square with a nunber in it. Then opted to at least make it at least the proportions of a real playing card.
That got me thinking about the user experience with the programs on my site. I wanted a more engaging visual element, and doing that also presents interesting graphic design, usability, and coding problems. And I wanted a reusable component I could use in card-related pages. So how can we improve the humble card above, and how do we implement it?
A reasonable starting point would be to display a card that looks like a traditional playing card:
display an image?
My first thought was to look online for card images, perhaps SVG since they are scalable. But I ran into difficulties when I wanted to use the SVG cards with p5.
I use p5js to build the interactive programs in my posts. p5 can load PNG and JPG images, but not SVG. Fine, I can export the images to PNG. I added the images to my local copy of the website, and the images worked fine in my p5 app. But when I deployed my website, it wasn't happy that the p5 script was trying to load files from disk. I started to work on fixing that, but by now, I was starting to rethink whether I wanted to use someone else's card images anyway. I wanted more control over the experience.
So here is the design trajectory. Let's do some iterative design…
a rectangle
A little online search revealed standard bridge and casino cards are 2.25 by 3.5 inches. Like real playing cards, we'll round the corners about 1/8".
This is a bit narrower than the three of hearts above, which I am guessing is modeled on the wider poker playing card.
first version
If I am only going to create one card design, I'd like it to be recognizable. I'll be coding the shapes on the cards, which is easy enough except for the face cards. Hmm. We'll cross that bridge later. The simplest of the four suits is diamonds, so let's start there. The three of diamonds below is drawn with p5, wrapped in a React component.
I wanted a typeface that looked like a classic playing card, and found a satisfactory font online named Card Characters. Loading the font via p5's loadFont(filePath) brought the same security problem with the hosting service that I'd had earlier with loading images. So I added the font to my css,
@font-face {
font-family: 'Card Characters';
src: local('Card Characters'), url('./CARDC___.TTF');
unicode-range: U+0000-00FF;
}
imported it into the React component (Card), and called p5's textFont('Card Characters') in the p5.setup() method. I enlarged the numbers a bit for readability.
supporting all ordinal values
Next up was to expand beyond just the three of Diamonds. That's p5 code drawing the heart shape, like it did the diamond shape. I used drawing commands because I imagined I might eventually try other shapes or animations.
Yes, I didn't implement faces for Jack, Queen, and King. Maybe later.
flipping
We need to be able to flip a card. Click on the card below.
rotation
One of the card games I have in mind will require a card to be rotated…