Squarify!!!

Squarify!!! is a webpage that converts circles(ㅇ)to squares(ㅁ) in Hangul, the Korean alphabetic system.

Check out the demo here.

Circlesㅇ and squaresㅁ in Hangeul한글

For a beginner in Korean, the most noticeable characters in Hangeul(한글, the Korean alphabetic system), would be circles(ㅇ) and squares(ㅁ).

The circle character, which is called 이응(ㅇ, ieung) is a consonant that comes right before a vowel. The square character, named 미음(ㅁ, mieum) is also one of the most frequently used consonants. So it is not surprising to notice tons of circles and squares in any Korean text.

Since I read and wrote Hangeul from when I was young, I didn't realize that there are a lot of circles in the Korean alphabet. So when I bumped into these kind of questions I felt it was interesting to see the Korean alphabet in a geometric point of view. This is how I got inspired to make a mini project that converts all of the circles(ㅇ) into squares(ㅁ).

Utilizing libraries

Since Hangeul uses a combination system that creates a syllabic block from pieces of consonants and vowels, I needed to first disassemble Korean syllabic blocks into characters. For example: the word 이응 is consisted of 5 letters which is [ㅇ,ㅣ,ㅇ,ㅡ,ㅇ]. Thankfully, there is already an open source library called Hangul.js that does this job, so I utilized it.

I also wanted to show how the actual pronunciation would change after converting all of the circles into squares, so that you could understand how the conversion works without knowing how to read Hangeul. To solve this problem, I used Aromanize-js which does a good job for transliterating Korean characters to latin characters.

The code

You can see the actual commented code used to build this converter in this link.