Jukka Paananen

Map Quiz

What?

A game where you can test how many countries you can name on a world map. The list of countries doesn't strictly follow the list of countries recognized by the UN because it was a challenge to compile the data set from different Wikipedia articles and the map I had without too much manual labor, but it should be 99 % of the way.

The game accepts the official and colloquial names in English and colloquial names in Finnish and tolerates minor spelling mistakes, because this isn't a game about spelling or knowing that Brunei is officially the Nation of Brunei, the Abode of Peace. Acronyms (e.g. USA or UK) are not accepted because... the Wikipedia articles I used to compile the data set just didn't happen to include them.

Why?

I saw a video clip about interviewing people on the street and asking them to name countries on a map (and failing miserably), and wanted to see how well I could do myself. Unfortunately I couldn't find a suitable test or a game that would test both knowing the name and location of a country. Most just asked you to type out names for countries without knowing where they are, or asked you to place a given country on a map. I wanted to test both at the same time for extra challenge and to replicate what they did on the show, so I had to create my own.

How?

I started with an SVG map from mapsvg.com that had ISO 3166-1 alpha-2 country codes in it, compiled a table of country codes, official names, colloquial names, and whether a region belongs to another country (e.g. Greenland to Denmark). Then some JS for the functionality and a lot of CSS for that cherry on top with the animations and everything.

Google Tag Manager (GTM) Explorer

What?

A tool for parsing and exploring the GTM container configuration found in the gtm.js that gets loaded on pages that use GTM.

Why?

Sometimes you just want to check how other people use GTM, or maybe check something you have done yourself, but can't be bothered to log in. This tool lets you explore the published parts of a container if you know the ID for it.

How?

Mostly with JavaScript. A lot of it. Like thousands of lines of it.

three_point_circle_game

What?

A game about estimating where a circle should be placed to go through three given points. Gives you a score after five rounds, higher is better and 500 the maximum.

Why?

After I had the three_point_circle working, I showed it to some friends and one suggested I'd make a game out of it. So this is it.

How?

By drawing SVG elements with JavaScript, animated with CSS.

three_point_circle

What?

A visual demonstration about any three points being on the circumference of a single circle

Why?

One time, while staring at the knots in the wood on the wall of a sauna, I realized that no matter which three I chose, I could imagine a circle that they all landed on. After that I decided to create a simple visualization about that.

How?

By drawing SVG elements with JavaScript

Portfolio, first (public) iteration

What?

Basically just a portfolio for my web development stuff.

Why?

For a long time I've both known I should, and wanted to make a portfolio for my projects. It's way cooler than giving a dozen links to some shady directory listings. I also happened to come across a damn cool UI design in a game called Pako 2, and immediately knew that's what I want my website to look like. I had previously done some tests of that analog video color channel offset artifact (or maybe just optical chromatic aberration, close enough for this use), because I like the look of analog artifacts.

How?

With HTML and CSS. The blurred/artifact look is done with three text shadows. I originally generated the background gradient with the Color.js library I had created, because of course that's a thing you need a JS library for. Now it's just hard coded.

alphabet

What?

A game for practising the numerical positions of letters in the alphabet. The question is on the left side, and you enter your answer on the right. If the question is a letter, you enter the position of that letter. If it's a number, you enter the letter at that position in the alphabet. Once you enter the correct answer, the game advances automatically. If nothing happens, just try to guess again.

Why?

I'd been wanting to learn the positions of letters for a long time, and once I saw a Youtube video with some ASCII text in binary and wasn't able to translate it to text without counting up from A, I decided that the time had come.

How?

With 50 lines of JS, 2 DOM elements, and some CSS to taste.

A game about packing tetrominoes

What?

A game about packing falling tetrominoes and getting full lines. Out of principle, I'll just share this screenshot instead of the whole game, which may be a bit copyright-infringing.

Why?

I saw a video of a competition where they played a game similar to this, and it looked cool so I wanted to learn too. So I started searching, and couldn't really find a browser version that fit my taste, so I had to make my own.

How?

Mostly with JS. About 800 lines of it. The graphics are made with HTML and CSS. I used the "screen" blending mode in CSS, so I only needed two different sprites for the blocks, and the colors are just CSS, which is nice.

Color.js

What?

A JavaScript library for manipulating colors. Can handle pretty much all valid CSS colors as input, and the best feature is converting colors into the YPbPr color space for the best analog video artifacts.

Why?

I needed a way to handle colors programmatically, and convert them between different formats and color spaces, when I was writing some image manipulation algorithms. It's also handy for some UI stuff.

How?

With about 550 lines of JS. Just a simple object prototype without any closures or unnecessary complications. The programmer should be able to access anything in the library, especially since this is mostly for my personal use.