
Show HN: Pix.pe – Easily sharable pixel art - TheZenPsycho
http://pix.pe
======
chrisacky
Red Mage from Final Fantasy 1:

[http://pix.pe?E____H4___4ACSJSAKUJEYjk4AARAAA_AAk8gAISAA4_A4...](http://pix.pe?E____H4___4ACSJSAKUJEYjk4AARAAA_AAk8gAISAA4_A4HSBASBIBISSKRoFAJkkkbJP5VKRJS4H4ASpVqFIA_H4_AqPJBA____DYbAHYbbbbbbbYbLZLAYDAbADY_H4)

Mario from... Mario :

[http://pix.pe/#http://pix.pe?O_____c7_bbbb2O0jk0222t1Otk2k__...](http://pix.pe/#http://pix.pe?O_____c7_bbbb2O0jk0222t1Otk2k___223t9________8nk_JJ____JJJZJttNJttt5JJJZJJ______Jk_________kk8________t9_ttp2BGot1rOeb7_2_2u3____)

Mickey Mouse :

[http://pix.pe/#http://pix.pe?QX4AJBAISH_____AAAB_JO-2JJAAAIA...](http://pix.pe/#http://pix.pe?QX4AJBAISH_____AAAB_JO-2JJAAAIAH___slsl________8ktk_iV0t1Ryt93233-_32y2BK2tlsVq12kv8_______1u1l___8_BAABMN53pRCIAAAQS4_QQIBAAJ_P_)

Attempt at something cool. Bonus points if you actually understand what it is.

[http://pix.pe/?O____AH_________4_4_H4_____H_________________...](http://pix.pe/?O____AH_________4_4_H4_____H_____________________AA______H_HH4_4A_4HH4H4____________________A_______4_4___H__4_AH__________H4____#http://pix.pe?C____AH_________4_4_H4_____H_____________________AA______H_HH4_4A_4HH4H4____________________A_______4_4___H__4_AH__________H4____)

Comments: Would be good if you could somehow define your own color pallette.
Obviously you are limited in how much data you can encode in with your
available Tweet length... so not sure how plausible that would be. Still kinda
fun, just hard to make anything decent out of the available canvas size.

~~~
dmbass
_Obviously you are limited in how much data you can encode in with your
available Tweet length..._

All urls on Twitter are shortened with t.co to 22/23 characters (depending on
https) so the url is not a limit.

~~~
TheZenPsycho
Storing everything in the URL is a feature I just rolled out today. The HN
submission is in honour of that. You can of course post it without the
[http://pix.pe/](http://pix.pe/)? to twitter, paste that chunk of letters back
in, and it will work. Here is an example of how that looked:

[https://twitter.com/ZenSaiyuki/status/373400181338693632](https://twitter.com/ZenSaiyuki/status/373400181338693632)

Which is neat, and purist and all, but people didn't know what the "gibberish"
was, so making it a link is a compelling improvement, it would seem :)

I was really inspired by the twitter image compression challenge
[http://stackoverflow.com/questions/891643/twitter-image-
enco...](http://stackoverflow.com/questions/891643/twitter-image-encoding-
challenge)

------
libria
Pretty cool. Any chance you could include a 16x16 preview? You could even
dynamically update it as the favicon (e.g.,
[http://favris.info/](http://favris.info/)) which is supported in Chrome/FF.

~~~
TheZenPsycho
there is some chance.

------
8ig8
Happy Halloween

[http://pix.pe?IJJttttSJTdaStuttts2kkkgkkltttttttkkkkkktltttt...](http://pix.pe?IJJttttSJTdaStuttts2kkkgkkltttttttkkkkkktlttttlkkAgkkkkAAkkEkAAkkAEkkkkgkAEkkstkkstttttttttlslsttttttttttskAklttttt1tqSqKLJttttJL)

------
Lerc
This just screams challenge to me. You have a 16*16, 8 colour image in 768
bits.

So the question is, how much can the format be changed to allow for a wider
range of expressibility?

The obvious place to start is increasing the resolution by somehow reducing
the bits per pixel.

768/(16x16) = 3 (current resolution makes 3 bits per pixel)

768/(17x17) = 2.657

768/(18x18) = 2.370

768/(19x19) = 2.127

768/(20x20) = 1.920

768/(21x21) = 1.741

768/(24x24) = 1.333

768/(26x26) = 1.136

768/(32x32) = 0.75

Of course, once you get a higher resolution with fewer bits you lose the
ability to be able to make each individual pixel any colour you want. Once you
go below 1 bit per pixel you lose the ability to refer to pixels individually
altogether. Most pixel artists would take some degree of hit though, in fact
much of the beauty of pixel art is in massaging the restrictions.

A lot of 8 bit systems used 8x8 cells at 1 bit with a colour attribute byte to
bring it up to 1.125 bits per pixel. The spectrum used that to make things
like
[http://fc05.deviantart.net/images3/i/2004/116/3/d/ZX_Spectru...](http://fc05.deviantart.net/images3/i/2004/116/3/d/ZX_Spectrum_gallery_1997_2003.png)

You could quite easily support a 24x24 image in that form, but with only 3
cells across the colour restrictions would be a bit harsh.

My preference would be to try for 21x21 using 3x3 cells. Being restricted to
only 2 colours per cell is much less of a problem when the cell size is small.
A quick and easy approach would be a 2 byte per cell structure where the first
byte defined the foreground an background colours and the second byte defined
the pixels. That gets you a palette of 16 colours overall, any two in each
cell. It is marginally over the required limit (21x21 at 1.778bpp) though, so
would require a little more cleverness to eek out that extra little bit.
dropping back to an 8 colour palette would do it easily, but 1.778 is so close
to 1.741 that those bits can surely squeezed out from somewhere.

~~~
TheZenPsycho
Thanks. It did occur to me that I could get pretty close to a black and white
32x32 picture by replacing the 8 colors with 8 patterns. You'd have to make
impossible some patterns, but constraints breed creativity!

~~~
Lerc
I made a mode like this for a dcpu16 emulator as a mode proposal.
[http://fingswotidun.com/dcpu16/GraphicsMode1.png](http://fingswotidun.com/dcpu16/GraphicsMode1.png)

There's potential for extra data in the situation where the two colour
attributes are the same. Possibly have a second compliment palette where

    
    
         if A==B {
           colourA:=pallette[A]; 
           colourB:=compliment[A];
         }
    

That allows for an extra set of colour pairs, to help out in unusual cases.
You don't gain ability to set the bottom right pixel of each cell to the
compliment colour, so even though it gives you another 16 colours to play with
you get some interesting restrictions rewarding clever use.

------
potomak
I love this idea and your spec! What do you think about extending it to
include little animations?

I would like to apply it to Draw![1] pixel art editor.

If somebody want to help me you can fork the project at
[https://github.com/potomak/drawbang](https://github.com/potomak/drawbang)

[1] [http://drawbang.com/](http://drawbang.com/)

~~~
TheZenPsycho
I like the idea, and was secretly planning to do that eventually. And also I
remember drawbang! I thought up the original "pixtweet" around the same time
you first posted it to HN.

------
kristopher
My Attempt at Happy Mac [1]

Wants: 32pixels, a 1:1 pixel preview and favicon support!

[1]
[http://pix.pe/?C___A_4HH4HA_A_H4_H__H_4_4HA_A_H4_AH__4A_H___...](http://pix.pe/?C___A_4HH4HA_A_H4_H__H_4_4HA_A_H4_AH__4A_H___A4A__AH4H4A_____A_AAAA_A_A4H_AH4H4A__AHA___4_AH__4A_H4_A_A4H_H_4H44_H4_A_A4H44H_A___)

~~~
TheZenPsycho
Can you think of a way to fit 32x32 pixels reliably in under 128 base64
characters?

edit: hint: it's 768 bits, while 32x32=1024

~~~
kristopher
Yes, use DEFLATE[1] before you B64. Also, it does not hurt to up-vote all of
these useful comments!

[1]
[http://en.wikipedia.org/wiki/DEFLATE](http://en.wikipedia.org/wiki/DEFLATE)

~~~
TheZenPsycho
I tried deflate, and I was surprised, it actually worked in about 66% of the
cases I tried. The question remains what to do for those remaining 33%

------
pents90
"Oliphant Immortal" from Gurk III:
[http://pix.pe?Q_____A4_YEAHDDYcDbYacDbA4_H_______wGuAA_H4__H...](http://pix.pe?Q_____A4_YEAHDDYcDbYacDbA4_H_______wGuAA_H4__HAAcoCFwGwc2u2FwuGogYAGuoYgotaGoFAH4H4HACAICAIAFwAcAACAKA_H44ACUaYCHASAbCAQ4H4_AKAIA)

------
einarlove
You should look into using replacestate()[1] from History API[2] instead of
changing the hash on each pixel change. This will remove the problem of not
been able to use the back-button to get to the previous page (instead of the
previous pixel)

[1]: [http://stackoverflow.com/questions/17507091/replacestate-
vs-...](http://stackoverflow.com/questions/17507091/replacestate-vs-pushstate)

[2]: [https://developer.mozilla.org/en-
US/docs/Web/Guide/API/DOM/M...](https://developer.mozilla.org/en-
US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)

~~~
TheZenPsycho
Thanks for the advice. I use the backbutton as an undo stack. if you want to
get back to where you were before then you can open pix.pe in a new tab I
suppose.

Also, i would note that the backbutton is not per pixel. Each pixel event is
filtered through a debouncer, so it actually only updates the url if you are
inactive for about 200ms.

------
lifeformed
It's fun to type in sentences in the URL part, and watch the picture morph
around. Even a single letter repeated over and over gives cool patterns.

I wonder if there are any sentences that are also meaningful pictures?

~~~
TheZenPsycho
A friend of mine worked out that if you draw a picture, and leave "blank"
space (which is rendered in text as underscores) then you can carefully
replace the blanks with letters which appears as noise in the picture, but
otherwise doesn't disturb what you drew.

edit: e.g.
[http://pix.pe?Cttttt5tt9vt____P_5___J__v9_ttttttt9v9tttttkkk...](http://pix.pe?Cttttt5tt9vt____P_5___J__v9_ttttttt9v9tttttkkkkttVSkSiUSSP5_PP_5P_5v9vt_5qSSkkktt__Hacker_News__tttttttttt___P__ttP5__ttttttttttt)

------
corry
Neat! Suggestion: show a 'actual size' thumbnail of it. Those of us new to
pixel art have trouble visualizing what it looks like shrunk down to actual
pixels!

~~~
TheZenPsycho
Thanks! I like that idea.

------
throw-away-914
Was drawing obligatory lady finger and two potatoes, ended up with this.
[http://pix.pe/#http://pix.pe?QAHA____A4HA_____H4AAA4AAHA4H4A...](http://pix.pe/#http://pix.pe?QAHA____A4HA_____H4AAA4AAHA4H4AAHA4_A___A4AAAAAH___AAAA__AH4HAA_A4HA_______AAAA___4AAAAAAAA____AAA_______A__HAAAA_____A4HA___AAAA)

------
joeblau
Can someone make something cool and post it?

~~~
robinduckett
I'm not a creative man.

[http://pix.pe?Q_____________P5_J_PP_55J__P__________________...](http://pix.pe?Q_____________P5_J_PP_55J__P_____________________P______77P5__P5PNtNP_J5P________L_________J__J__P5PJ_P_55JNpNpJP__________P5____)

~~~
colinbartlett
I forked it:

[http://pix.pe?Q_____________P5_J_PP_55J__P__________________...](http://pix.pe?Q_____________P5_J_PP_55J__P_____________________P______Z_f5__P5PNtNP____J______JJ_________Z__J__P5PJ_P_55JNpNpJP__________P5____)

------
kwntm
I love how smooth this is on mobile, regarding touching and dragging. I've
been working on making UIs for simple art projects on mobile browsers and this
will be great to learn from. The palette option is fantastic, it's cool to
quickly see a drawing with different color renderings. Thanks for sharing!

~~~
TheZenPsycho
I worked hard on it, but sadly it totally breaks on android and windows phone.
I hope to at some point remedy this though it is difficult, since I don't have
access to testing on those easily.

If you are interested in this, I found hand.js which seems to do a good job of
solving my problem.. I plan to use it eventually.
[http://handjs.codeplex.com/](http://handjs.codeplex.com/)

------
TheZenPsycho
I used to call this pixtweet. Here's all the pictures I collected from the old
times.
[http://www.zenpsycho.com/allpixtweets.html](http://www.zenpsycho.com/allpixtweets.html)

edit: also note that "infinite" undo is available via the back button.

------
Kiro
Best part is writing some stuff in the box and see what it produces and how it
evolves as you type.

------
guynamedloren
Finally, a way to share all the pixel art I've been working on!!

Jokes aside, very cool project. Nice work :)

------
Youpinadi
Neat! If you want to go further:
[http://www.stickaz.com/en/studio](http://www.stickaz.com/en/studio) You can
draw your model (or import it) and buy real stickers.

------
ne0phyte
I found the easter egg but I'm not sure what exactly it does. At first I
thought it's one iteration of conways game of life but that's not it.
Enlighten me!

~~~
TheZenPsycho
Oh! well it's a failure mode. I have used an unconventional pixel order, in
order to improve the look of failure modes. I use a hilbert curve.

When you enter in an amount of text that is not exactly 129 base64url
characters, it takes out the non base64url characters, turns them into 0-7
numbers, and then 1-dimensionally stretches those until i get exactly 256
pixels- and lay those out along the hilbert curve.

------
midgetjones
This is cool. It would be nice to have a grid option, though.

------
beefsack
It might be worth considering encoding the URL data to something to compress
it a little bit more, perhaps base 64 or something.

~~~
TheZenPsycho
it is base64 already.

edit: in an older version I tried out compression. I quote from the pix.pe
page:

It turns out generic compression of any kind is very rarely helpful below a
certain message size. The size of the added overhead overtakes the characters
saved. Only about 10% of pictures were RLE compressible, and even then,
savings were tiny.

~~~
agf
I think it would benefit from simple arithmetic compression / huffman coding
if the number of colors used is small so the table can be small.

~~~
TheZenPsycho
You'd be surprised how ineffective such techniques are with such a small
message size.

------
sideproject
looks like each drawn pixel is being recorded in the URL, which means
considering all the combinations + permutations of colors and pixels, you can
draw (theoretically) the art just by modifying the URL! :) So maybe you can
create a randomizer that creates a picture.... :)

~~~
TheZenPsycho
yes, but it's easier to modify the text field.

------
jevin
I have just one suggestion: Make it possible to erase pixels by right
clicking.

Other than that, great work!

------
ehsanu1
Replace state over push state for this kind of history twiddling please.

------
alco
Try hitting the Back button in your browser after drawing for a while.

------
dc2k08
you should post this on r/pixelart

~~~
TheZenPsycho
Oh! maybe I'll wait til after I implement some of these feature requests.

------
OGC
why the hell aren't you shortening the URLs?

~~~
lttlrck
Because it would be half the fun?

