6 ms·

Show HN: QR Pixel encodes pixel art in QR codes.

119 points by kbaker 15y ago

kbaker 15y ago
This is my side project I've been working on for a while now, and I've just gotten around to a v1.0 release. Questions and feedback highly appreciated! Leave a message here or email me at info@qrpixel.com.
- endianswap 15y ago
  The immediate feature that comes to mind is to be able to rotate the canvas that we're drawing on. I noticed that your logo (which is awesome) is actually in a different orientation than the drawing space.
  - kbaker 15y ago
    Unfortunately that feature got dropped from the MVP... it's definitely very high up on the list. You can edit the image afterward of course. Thanks for trying it out!
- mutagen 15y ago
  Very nice, this is very similar to an idea I had kicking around for QR codes. I was looking to smash a bitmap or pixel art into it and start adding extra characters into the URL to minimize the error rate, trying to find the closest unmodified QR code. Then just route that URL or create a rewrite rule to display the page you want. There's a possibility that a good code could be converged on but if the crypto is good enough it should be difficult. I haven't done any research at all though, I could be way off base.
- lambda 15y ago
  Your interface requires a 3-button mouse, which anyone on a Mac is not likely to have (especially on a laptop). Yes, you can get a right click by doing a two-finger tap, but that's pretty clumsy, and you can't draw with it because that turns into scrolling. You should probably just let people click on black, white, or grey buttons to select the current color.
  - laumars 15y ago
    Even on a PC - it was a complete nightmare. Opera kept interpreting my right-click movements as gestures and middle button as a request to scroll around the page. It was more than just a little frustrating because of this. That all said, layout of the site and idea itself is very good.
  - gus_massa 15y ago
    One possible solution: * If you click with the "left" button on a "grey" or "white" pixel, then you draw with a "black" color until you release the button. * If you click with the "left" button on a "black" pixel, then you draw with a "grey" color until you release the button. * If you click with the "right" button on a "grey" or "black" pixel, then you draw with a "white" color until you release the button. * If you click with the "right" button on a "white" pixel, then you draw with a "grey" color until you release the button.
- rhengles 15y ago
  Why doesn't it work on IE9?
rpledge 15y ago
This is exactly what I was looking for this morning! I even started getting a quote from a site that charges for this service. I'm assuming I can use the results for whatever I please?
- kbaker 15y ago
  Yes, you can use the resulting image for anything with no restriction. I don't care if you take out the little qrpixel blurb or want to modify it further. Really I am just looking to introduce a different method of encoding images in QR codes, to make 2d barcodes less ugly.
aith 15y ago
Great app. I remember reading how to do this on Hackaday.com You could offer a paid account that lets people automatically embed a QR code with custom logo on their site. This would be great for real estate and car sale sites - especially because the QR Code could be copied from page and put on the signs that use to advertise the house/car.
- kbaker 15y ago
  Yes, an API or some easier features to do multiple URLs may come at some point. This is a bit different from abusing the error correction as presented elsewhere - this actually encodes the image as data (padding actually) into the QR code so you get a larger area to use for the image and the code is still robust to damage. All readers that I have tested so far work fine with this method, however it is a tiny bit outside the official QR code spec.
aaronpk 15y ago
I'm curious how this is different from just sticking the painted pixels on top of the generated QR code. Are you somehow taking in to account the values of the painted pixels when choosing values for the rest of them?
- kbaker 15y ago
  Yes, this encodes the actual image into the QR code data, with error correction intact. This allows for a larger image area and you still get the benefits of error correction. There is a padding section between the data (roughly encoded in the right side) and the error correction (left side.) Most QR encoding methods make the padding section as small as possible to get the best printable result and smallest QR code. This makes the padding huge, thus the limit on URL length and automatic URL shortening, and uses these padding bits to encode the image. Of course it is a bit outside the spec doing it in this way, but it has worked with every reader I've tested so far as they don't verify the padding bits.
smitec 15y ago
Very cool project! I'm using it to try replicate some of my favicons into the QR code for the sites.
dmils4 15y ago
Awesome! This reminded me of a mashable article I read about a year ago : http://mashable.com/2011/04/18/qr-code-design-tips/ http://mashable.com/2011/04/18/qr-code-design-tips/ Kinda crazy that up to 30% of a QR code can be inaccurate, and it will still work.
- kbaker 15y ago
  This is a different method than using error correction that allows for more usable area (see details in other threads.) It still leaves 7% of the ECC intact so you can further modify the code after it is generated. I had to modify a few pixels still to embed another QR code inside a QR code (and have both scan!) http://designerqrcodes.wordpress.com/designer-qr-code-art-gallery/qrinqr/ http://designerqrcodes.wordpress.com/designer-qr-code-art-ga...
jackreichert 15y ago
Cool project. Love the concept. One thing you may want to work in. While QR codes need to keep to a specific pixel size to keep the data right, the logos/image embedded IN the QR code does not. So you may want to allow an image, any image, to be uploaded and have your app resize and work the art into the rest of the QR code.
- kbaker 15y ago
  Thanks for trying it out! Right now this generates a QR code that is almost completely compliant with the QR code spec and should work with every QR code reader. Adding images would start to rely on the error correction which is set to Low for maximum image space so the QR code wouldn't be as robust. Also, I didn't want to get into uploading images/crop issues/resizing and the UI for that just yet as I am just working on this in my limited spare time, but this feature may come in a future version.
rafd 15y ago
It's difficult to draw white pixels with a (Macbook) touchpad. Allow for Ctrl+Click ?
- kbaker 15y ago
  Yikes... that is quite high on the todo list (add selector boxes for a "pen" to draw with) but unfortunately it didn't make it for this release.
- dylanpyle 15y ago
  Also, unfortunately makes re-drawing gray pixels (middle-click) impossible.
Rabidgremlin 15y ago
here is an Android app that does a similar thing (but with a fixed set of images and a much dumber algorithm ) https://market.android.com/details?id=com.rabidgremlin.android.mecodelite&hl=en https://market.android.com/details?id=com.rabidgremlin.andro...
dgarner 15y ago
Cool idea. I think it would be awesome to make it possible to automatically encode favicons in qr codes (pixel by pixel -> unit by unit). Here's also a webapp for some customization inspiration. code's color and even the unit shapes can be customized: http://www.patrick-wied.at/projects/qr-designer/ http://www.patrick-wied.at/projects/qr-designer/
user24 15y ago
It's a nice hack for sure, but I thought the reason it's possible is the redundancy built into the QR code algorithm. By hacking it in this way, aren't you reducing the resiliency of the QR codes and thus making them harder to read?

119 points by kbaker 15y ago

This is my side project I've been working on for a while now, and I've just gotten around to a v1.0 release. Questions and feedback highly appreciated! Leave a message here or email me at info@qrpixel.com.

endianswap 15y ago
The immediate feature that comes to mind is to be able to rotate the canvas that we're drawing on. I noticed that your logo (which is awesome) is actually in a different orientation than the drawing space.
- kbaker 15y ago
  Unfortunately that feature got dropped from the MVP... it's definitely very high up on the list. You can edit the image afterward of course. Thanks for trying it out!
mutagen 15y ago
Very nice, this is very similar to an idea I had kicking around for QR codes. I was looking to smash a bitmap or pixel art into it and start adding extra characters into the URL to minimize the error rate, trying to find the closest unmodified QR code. Then just route that URL or create a rewrite rule to display the page you want. There's a possibility that a good code could be converged on but if the crypto is good enough it should be difficult. I haven't done any research at all though, I could be way off base.
lambda 15y ago
Your interface requires a 3-button mouse, which anyone on a Mac is not likely to have (especially on a laptop). Yes, you can get a right click by doing a two-finger tap, but that's pretty clumsy, and you can't draw with it because that turns into scrolling. You should probably just let people click on black, white, or grey buttons to select the current color.
- laumars 15y ago
  Even on a PC - it was a complete nightmare. Opera kept interpreting my right-click movements as gestures and middle button as a request to scroll around the page. It was more than just a little frustrating because of this. That all said, layout of the site and idea itself is very good.
- gus_massa 15y ago
  One possible solution: * If you click with the "left" button on a "grey" or "white" pixel, then you draw with a "black" color until you release the button. * If you click with the "left" button on a "black" pixel, then you draw with a "grey" color until you release the button. * If you click with the "right" button on a "grey" or "black" pixel, then you draw with a "white" color until you release the button. * If you click with the "right" button on a "white" pixel, then you draw with a "grey" color until you release the button.
rhengles 15y ago
Why doesn't it work on IE9?

rpledge 15y ago

This is exactly what I was looking for this morning! I even started getting a quote from a site that charges for this service. I'm assuming I can use the results for whatever I please?

kbaker 15y ago
Yes, you can use the resulting image for anything with no restriction. I don't care if you take out the little qrpixel blurb or want to modify it further. Really I am just looking to introduce a different method of encoding images in QR codes, to make 2d barcodes less ugly.

aith 15y ago

Great app. I remember reading how to do this on Hackaday.com You could offer a paid account that lets people automatically embed a QR code with custom logo on their site. This would be great for real estate and car sale sites - especially because the QR Code could be copied from page and put on the signs that use to advertise the house/car.

kbaker 15y ago
Yes, an API or some easier features to do multiple URLs may come at some point. This is a bit different from abusing the error correction as presented elsewhere - this actually encodes the image as data (padding actually) into the QR code so you get a larger area to use for the image and the code is still robust to damage. All readers that I have tested so far work fine with this method, however it is a tiny bit outside the official QR code spec.

aaronpk 15y ago

I'm curious how this is different from just sticking the painted pixels on top of the generated QR code. Are you somehow taking in to account the values of the painted pixels when choosing values for the rest of them?

kbaker 15y ago
Yes, this encodes the actual image into the QR code data, with error correction intact. This allows for a larger image area and you still get the benefits of error correction. There is a padding section between the data (roughly encoded in the right side) and the error correction (left side.) Most QR encoding methods make the padding section as small as possible to get the best printable result and smallest QR code. This makes the padding huge, thus the limit on URL length and automatic URL shortening, and uses these padding bits to encode the image. Of course it is a bit outside the spec doing it in this way, but it has worked with every reader I've tested so far as they don't verify the padding bits.

smitec 15y ago

Very cool project! I'm using it to try replicate some of my favicons into the QR code for the sites.

dmils4 15y ago

Awesome! This reminded me of a mashable article I read about a year ago : http://mashable.com/2011/04/18/qr-code-design-tips/ http://mashable.com/2011/04/18/qr-code-design-tips/ Kinda crazy that up to 30% of a QR code can be inaccurate, and it will still work.

kbaker 15y ago
This is a different method than using error correction that allows for more usable area (see details in other threads.) It still leaves 7% of the ECC intact so you can further modify the code after it is generated. I had to modify a few pixels still to embed another QR code inside a QR code (and have both scan!) http://designerqrcodes.wordpress.com/designer-qr-code-art-gallery/qrinqr/ http://designerqrcodes.wordpress.com/designer-qr-code-art-ga...

jackreichert 15y ago

Cool project. Love the concept. One thing you may want to work in. While QR codes need to keep to a specific pixel size to keep the data right, the logos/image embedded IN the QR code does not. So you may want to allow an image, any image, to be uploaded and have your app resize and work the art into the rest of the QR code.

kbaker 15y ago
Thanks for trying it out! Right now this generates a QR code that is almost completely compliant with the QR code spec and should work with every QR code reader. Adding images would start to rely on the error correction which is set to Low for maximum image space so the QR code wouldn't be as robust. Also, I didn't want to get into uploading images/crop issues/resizing and the UI for that just yet as I am just working on this in my limited spare time, but this feature may come in a future version.

rafd 15y ago

It's difficult to draw white pixels with a (Macbook) touchpad. Allow for Ctrl+Click ?

kbaker 15y ago
Yikes... that is quite high on the todo list (add selector boxes for a "pen" to draw with) but unfortunately it didn't make it for this release.
dylanpyle 15y ago
Also, unfortunately makes re-drawing gray pixels (middle-click) impossible.

Rabidgremlin 15y ago

here is an Android app that does a similar thing (but with a fixed set of images and a much dumber algorithm ) https://market.android.com/details?id=com.rabidgremlin.android.mecodelite&hl=en https://market.android.com/details?id=com.rabidgremlin.andro...

dgarner 15y ago

Cool idea. I think it would be awesome to make it possible to automatically encode favicons in qr codes (pixel by pixel -> unit by unit). Here's also a webapp for some customization inspiration. code's color and even the unit shapes can be customized: http://www.patrick-wied.at/projects/qr-designer/ http://www.patrick-wied.at/projects/qr-designer/

user24 15y ago

It's a nice hack for sure, but I thought the reason it's possible is the redundancy built into the QR code algorithm. By hacking it in this way, aren't you reducing the resiliency of the QR codes and thus making them harder to read?