Collin's Blog

Making a Font with Inkscape

2021-06-04T06:00:00+08:00

I'm writing this in my very own font. It's ugly, but it's mine. I created it.

I like learning new things. So I used building this font as a way to learn Inkscape a bit better.

I've been watching a lot of videos online to learn inkscape. The best tutorial series I've found is on a channel called Logos By Nick. He has a video where he makes a few letters in Inkscape. I used that video as the inspiration for the font.

First of all, let me say Inkscape is not the best tool for the job. The closed-source Glyphs app or Adobe Illustrator seem to be pretty popular tools for hobbyists and professionals. That said, I prefer using open source tools. Fontforge is another open source tool we will use as well for exporting, but because part of my goal is to get better at using Inkscape (I'm also using it for drawing some art as well). I'll stick to using that.

The glyphs:

A QUICK BROWN FOX JUMPS OVER THE LAZY DOG

a quick brown fox jumps over the lazy dog

0123456789

`~!@#$%^&*()-_=+[{]}|;:'",<.>/?

(As of publishing the special chars above are not finished so some will be using a fallback font)

Inksape oddities

The Inkscape SVG Font Editor

Create the document from: "File > New from Template > Typography Canvas"
Design each letter in a separate layer
Modify Glyph settings from "Text > SVG Font Editor"

I'm very greatful to the inkscape developers for this tool, but here I'm going to rant a bit about the SVG Font Editor UI. Hopefully if I have some free time later I'll be able to submit a patch that fixes some of these issues.

UI Gripe No. 1

The if there is only a single SVG font in use in the document it isn't auto selected when switching to the SVG Font tab. I had to constantly click to make sure that the current font was selected

UI Gripe No. 2

The scroll context of the glyph list is constantly lost whenever an action is performed. Like adding a new glyph, changing a glyph name, or adding strokes for a glyph. This means that if you have a long list of glyphs the process for creating a new glyph is cumbersome. You must:

Click the Add Glyph button
Scroll down to the newly created glyph
Rename the glyph (Scroll is reset)
Scroll backdown to the glyph
Remember that you need to select the stroke first
Select the stroke you want to add
Re-select the font (Scroll is reset, again)
Scroll backdown to the glyph
Click the Get curves from selection... button

This process is time consuming especially if you drew all of the paths first and then try to add them as glyphs all at once.

Again if any developers happen to read this I don't want these gripes to offend. It's more a list of UI improvements. Potentially for myself to implement if I get the time or feel ambitious enough.

#!/usr/bin/fontforge
Open("ricarda.svg")
Generate("ricarda.otf")

Improvements

This font is still a work in progress. I'll update this page as I improve it. Here's a list of things I'd like to change / fix.

Finish implementing ascii special characters
Figure out x-height issue with fallback glyphs (This may also fix the strikethrough issue)
Redo Upper K (not wide enough),
Make Upper Q's tail more curly
lower case r isn't readble enough - looks like i
glyphs gy69 (Add a bit more whitespace between the curve and the loop)
rework existing punctation

I set it as the default font in my OS settings for a while as a way of dogfooding. I disabled it for now because I'd get weird crashes occasionally and sometimes text wouldn't display in certain text boxes. The most annoying thing right now is when the fallback font and my current font are misaligned.

Other font ideas

When I first started learning Chinese I had a moment where if I read some signs without my glasses on I thought they were written in Chinese Characters. I want to design a font inspited by that.

Receipt Lottery Ticket

2021-06-04T05:50:00+08:00

When I learned that receipts are lottery tickets in Taiwan, I wondered if you could win the lottery by making a bunch of small purchases. This obviously wouldn't work, right? I don't think these thoughts are that uncommon either. I have a friend who told me they would sometimes split up their purchases so that they would get more receipts. How do we figure out how much a lottery ticket should be worth?

Expected value. You just multiply the chances of winning by how much you'll win.

There are 8 digits in a receipt lottery ticket. Therefore your odds of winning are 1 in a hundred million.

So we can multiply the amount of each prize by it's probability to get the expected value of a receipt for a given prize. You can then add up all of the individual expected values for each prize to get the total expected value of the receipt.

I've made a table below for doing these calculations for each prize amount.

Prize	Winning Amount (NTD)	# to match	# of Tickets	Expected Value of Prize
Special	$10,000,000	8	1	0.1
Grand	$2,000,000	8	1	0.02
Regular	$200,000	8	3	0.006
2^nd	$40,000	7	30 - 3 = 27	0.0108
3^rd	$10,000	6	300 - 30 = 270	0.027
4^th	$4,000	5	3000 - 300 = 2700	0.108
Subtotal	0.2718
5^th	$1,000	4	30000 - 3000 = 27,000	0.27
6^th	$200	3	300000 - 30000 = 270,000	0.54
Additional	$200	3	X * 100,000	0.2 * X
Total	1.2818

Note the X in the Additional row is a variable. Some months there are multiple additional prizes and some there are none.

But wait — that's before tax. There's a 20% lottery tax that's applied to receipts that win more than $1000 NTD. Therefore the expected value actually becomes $1.25444 NTD after taxes.

Can you make money by buying stuff just for the receipt?

In theory yes. In practice probably not. I searched for the lowest cost item I could find at 7-11. It is a $2 NTD funeral envelope. My theory is 7-11 is offering it essentially at-cost as an act of good will. Even that item isn't priced low enough. For this type of scheme to work you'd you'd have to find an item for sale for $1 NTD.

You could make some money by making lots of $1 NTD purchases (about $ 0.2 NTD per receipt). But once you price in the time and effort spent making the purchases as well as checking all of the receipts it's probably not worth it.

The cool thing is if you have hundreds of tickets piled up you should scan them. You can think of each one worth about $1.2 NTD. So what are you waiting for? Check your receipts. You can even check them by using apps to scan them.

QR Code Seal Stamp

2021-03-18T00:00:00+08:00

QR codes and official seals are two things that are ubiquitous here in Taiwan. Usually they are of similar size and shape. What if there was a way to combine the two into one?

We'll you can! — But it involves controlling the data within the QR code. Someone else did some research for how to get this sort of stuff to work before me. They didn't do it in the context of Chinese Seals, but nonetheless I was able to take some of their ideas and put them to good use.

How it works

If you start with a url like https://example.com/page# then you can embed junk data at the end of the url that is actually the image data when it gets encoded to the url. This works because everything after the pound symbol will be ignored by the site. So basically the Seal QR Code would look something like:

https://example.com/path#12341234123901203490234...

One insight from [1] is that if the section part is only numbers then we will be able to control the pixels in the final QR code much easier. This is because the QR standard allows mixing the encoding mode. If we switch to it's numeric encoding mode then we'll have control of all of the bits, while still decoding to a valid url.

Designing a Seal

There are some parts of a QR code that must be a certain color. So I've intentionally placed the strokes over the QR code timing pattern in order to make the most of the space available. For this to work with my design, I had to flip my characters upside down. The data in a QR Code is encoded bottom-to-top and right-to-left in a strange zig-zag pattern. Also the error correction bits are placed immediately after the data. Therefore because I want it to still decode to a valid url and because of error correction I'm restricted from placing pixels in the left or right portions of the qr code.

Mapping Pixels

Finally I have the pixel data we just have to figure out how to translate the pixel cordinates and data into the data we can append to the url. There are rules for determining how the pixels map, but I ran into issues wrapping my brain around how to deal with the alignment sections. Instead of spending more hours working on this part I ended up writing code that brute forced generating qr codes chaning one bit of the input each time and finds the (x,y) cordinate of changed module. Running this only takes about 10 seconds and I saved the mapping data in a file that I load when generating qr codes in the future.

Masking

The QR code generator algoithm includes a masking step which can change based off of the data encoded. We have to reverse this part in order for the data we are encoding to correspond to the pixel data. I used a qrcode generator library that allows fixing the mask pattern. So we've gotten to this point:

Now I need to flip the data and export it in a format that I can use for 3D printing. Luckily someone else already did the part for generating it as 3D printing file. I just had to flip the x-axis. I also wonder at this point if this is something that a master seal carver could also carve. Having an ornate seal with some cool designs on the handle would also be nice.

Prototyping

I asked my friend who is really into 3D printing to work on a QR Code stamp prototype. I asked him to print a prototype of a normal QR Code first. The only problem is that the stamp isn't actually scannable. If I go back and fill in some of the blochy parts with a pen then it's actually able to scan.

Final Design

(Updated Apr 11) After 2 more iterations here is my final design. I modified the back of the stamp face to have a lip which can wrap around the handle of a real stamp. The best part is that it works really well.

The stamp looks best and properly scans when you stamp it when using a silicon backing. I use my laptop cover. Anyway I'm pretty happy about how this project turned out. I'm planning on making a couple for my friends and maybe possibly selling some if people are interested in having custom ones made.

References

Future Work

What if when signing important documents you didn't use your seal, but a some sort of digital signature? It would be really cool to extend what I have made here into generating digital signatures for documents. For example you could have the stamp be a digitally signed hash of an image of the document.

Taiwan Immigration Stats

2021-01-13T00:00:00+08:00

I recently started taking a data visualization course. In order to practice learning D3, a data visualization tool, I deceided to show Taiwan's immmigration statistics and Covid-19's impact on it. What I have here is a bit buggy, but still worth sharing at it's current state. The orange is the number of entries, blue is number of exits, and green is the net (entries - exits) for the given period (day, month).

Taiwan Immigration Stats

Start:
End:
By:

Future Work

Fix interaction bugs in the above graph
Investigate descrepency between government daily immigration stats and monthly stats

References

Official Daily Immigration Stats