Blog Home

hqx Scaling in JavaScript

I recently came across the hqx Scaling Algorithm for upscaling pixel art images. hqx was originally developed for the ZSNES emulator to scale up each frame in realtime and is thus written in fast (read: ugly) C code.

I took the challenge to implement hqx in JavaScript for Biolab Disaster and I think the result looks great. The algorithm does an extremely nice job with "organic" structures such as all the rock tiles, but tends to make low contrast zones quite blurry.

hqx Test Page

hqx comes in three flavours: hq2x, hq3x and hq4x. All of these are implemented in the JavaScript version and you can directly test them with Biolab Disaster hqx (the links below the game).

The source for the JavaScript implementation of hqx is available on Github under the GNU LGPL.

Wednesday, December 29th 2010
— Dominic Szablewski, @phoboslab


#1 – John-Daniel Trask – Thursday, December 30th 2010, 04:01

Great work!

I saw an article on Hacker News referencing these techniques on Wikipedia and was very impressed by the options available I was unaware of.

What sort of performance impact were you seeing in JS?


P.S. I paid for a license of Impact the other day to play with over the holiday break. Colour me impressed with your work! :-)

#2panzi – Thursday, December 30th 2010, 04:12

hqx is the best but also slowest of all the algorithms in these emulators. Do you plan to implement SuperEagle, 2xSaI and Super2xSaI? These look much simpler to me. But anyway, why using such an algorithm when you develop the game? Why not use better sprites to start with?

#3 – Neil Highley – Thursday, December 30th 2010, 21:03

Is this going to be ported over to impactJS?

#4Dominic – Friday, December 31st 2010, 15:59

Nothing is stopping you from using it in the Impact engine right now.

For Biolab Disaster (and Impact in general) all images are scaled up only once at load time. So there's actually no difference at all, performance wise, when playing the game scaled with hqx compared to nearest neighbor.

@Panzi: excellent questions. For me, it was just a quick experiment to port the algorithm to JavaScript. The native resolution of Biolab Disaster's graphics is so low because less pixels means less work for the artist. Also, I like pixels :)

#5 – Ben – Thursday, January 6th 2011, 23:40

Your mother likes pixels!

#6 – J5 – Friday, June 8th 2012, 02:41

who can implement this algorithm in matlab and where can I find mathematical algorithm of hqx.

Post a Comment:

Comment: (Required)

(use <code> tags for preformatted text; URLs are recognized automatically)

Name: (Required)

Please type phoboslab into the following input field or enable Javascript. This is an anti-spam measure. Sorry for the inconvenience.