4 ms·
Show HN: Pix.pe – Easily sharable pixel art
- joeblau 13y agoCan someone make something cool and post it?
- robinduckett 13y agoI'm not a creative man. http://pix.pe?Q_____________P5_J_PP_55J__P_____________________P______77P5__P5PNtNP_J5P________L_________J__J__P5PJ_P_55JNpNpJP__________P5____ http://pix.pe?Q_____________P5_J_PP_55J__P__________________...
- colinbartlett 13y agoI forked it: http://pix.pe?Q_____________P5_J_PP_55J__P_____________________P______Z_f5__P5PNtNP____J______JJ_________Z__J__P5PJ_P_55JNpNpJP__________P5____ http://pix.pe?Q_____________P5_J_PP_55J__P__________________...
- chrisacky 13y agoRed Mage from Final Fantasy 1: http://pix.pe?E____H4___4ACSJSAKUJEYjk4AARAAA_AAk8gAISAA4_A4HSBASBIBISSKRoFAJkkkbJP5VKRJS4H4ASpVqFIA_H4_AqPJBA____DYbAHYbbbbbbbYbLZLAYDAbADY_H4 http://pix.pe?E____H4___4ACSJSAKUJEYjk4AARAAA_AAk8gAISAA4_A4... Mario from... Mario : http://pix.pe/#http://pix.pe?O_____c7_bbbb2O0jk0222t1Otk2k___223t9________8nk_JJ____JJJZJttNJttt5JJJZJJ______Jk_________kk8________t9_ttp2BGot1rOeb7_2_2u3____ http://pix.pe/#http://pix.pe?O_____c7_bbbb2O0jk0222t1Otk2k__... Mickey Mouse : http://pix.pe/#http://pix.pe?QX4AJBAISH_____AAAB_JO-2JJAAAIAH___slsl________8ktk_iV0t1Ryt93233-_32y2BK2tlsVq12kv8_______1u1l___8_BAABMN53pRCIAAAQS4_QQIBAAJ_P_ http://pix.pe/#http://pix.pe?QX4AJBAISH_____AAAB_JO-2JJAAAIA... Attempt at something cool. Bonus points if you actually understand what it is. 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____ http://pix.pe/?O____AH_________4_4_H4_____H_________________... 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.
- martin-adams 13y agoDunno, some life-form out of the Game of Life?
- 14113 13y agoI suspect it's a glider generator? https://en.wikipedia.org/wiki/Glider_(Conway%27s_Life) https://en.wikipedia.org/wiki/Glider_(Conway%27s_Life)
- martin-adams 13y agoLove it, I just redrew it into this: http://www.julianpulgarin.com/canvaslife/ http://www.julianpulgarin.com/canvaslife/ And it is a glider, effortlessly walking across my digital screen.
- xaro 13y agoThe first one is Megaman?
- Alterlife 13y agoThe last one looks like a hummingbird, or perhaps some form of alien from a game. In any other context this would probably be silly, but given the limitations... Beautifully done. This is how sports work!
- dmbass 13y agoObviously 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 13y agoStoring 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-encoding-challenge http://stackoverflow.com/questions/891643/twitter-image-enco...
- corry 13y agoNeat! 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 13y agoThanks! I like that idea.
- midgetjones 13y agoThis is cool. It would be nice to have a grid option, though.
- TheZenPsycho 13y agoI 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.
- OGC 13y agowhy the hell aren't you shortening the URLs?
- lttlrck 13y agoBecause it would be half the fun?
- sideproject 13y agolooks 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 13y agoyes, but it's easier to modify the text field.
- Kiro 13y agoBest part is writing some stuff in the box and see what it produces and how it evolves as you type.
- potomak 13y agoI 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 13y agoI 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.
- beefsack 13y agoIt might be worth considering encoding the URL data to something to compress it a little bit more, perhaps base 64 or something.
- TheZenPsycho 13y agoit 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 13y agoI 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 13y agoYou'd be surprised how ineffective such techniques are with such a small message size.
- cataflam 13y agoBase64 doesn't compress, it's a way of encoding binary data with just ASCII characters. It takes roughly 1/3 more space than the original data.
- guynamedloren 13y agoFinally, a way to share all the pixel art I've been working on!! Jokes aside, very cool project. Nice work :)
- alco 13y agoTry hitting the Back button in your browser after drawing for a while.
- libria 13y agoPretty 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 13y agothere is some chance.
- kwntm 13y agoI 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 13y agoI 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/
- Youpinadi 13y agoNeat! 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.
- kristopher 13y agoMy 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___A4A__AH4H4A_____A_AAAA_A_A4H_AH4H4A__AHA___4_AH__4A_H4_A_A4H_H_4H44_H4_A_A4H44H_A___ http://pix.pe/?C___A_4HH4HA_A_H4_H__H_4_4HA_A_H4_AH__4A_H___...
- StavrosK 13y ago1:1 preview please. I have no idea what half of these are.
- TheZenPsycho 13y agoCan 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 13y agoYes, 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 13y agoI 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%
- lifeformed 13y agoIt'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 13y agoA 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_ttttttt9v9tttttkkkkttVSkSiUSSP5_PP_5P_5v9vt_5qSSkkktt__Hacker_News__tttttttttt___P__ttP5__ttttttttttt http://pix.pe?Cttttt5tt9vt____P_5___J__v9_ttttttt9v9tttttkkk...
- TheZenPsycho 13y agoa robot made of the word "ROBOT" G_____________ROBO_ROB_ROBO_______ROBOT______ ROBOT______RBOT__________ROBO______ROBOT_____ _ROBOT_______ROBO_BOT_OBOT_____________
- jevin 13y agoI have just one suggestion: Make it possible to erase pixels by right clicking. Other than that, great work!
- pents90 13y ago"Oliphant Immortal" from Gurk III: http://pix.pe?Q_____A4_YEAHDDYcDbYacDbA4_H_______wGuAA_H4__HAAcoCFwGwc2u2FwuGogYAGuoYgotaGoFAH4H4HACAICAIAFwAcAACAKA_H44ACUaYCHASAbCAQ4H4_AKAIA http://pix.pe?Q_____A4_YEAHDDYcDbYacDbA4_H_______wGuAA_H4__H...
- 8ig8 13y agoHappy Halloween http://pix.pe?IJJttttSJTdaStuttts2kkkgkkltttttttkkkkkktlttttlkkAgkkkkAAkkEkAAkkAEkkkkgkAEkkstkkstttttttttlslsttttttttttskAklttttt1tqSqKLJttttJL http://pix.pe?IJJttttSJTdaStuttts2kkkgkkltttttttkkkkkktltttt...
- ne0phyte 13y agoI 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 13y agoOh! 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.
- ehsanu1 13y agoReplace state over push state for this kind of history twiddling please.
- einarlove 13y agoYou 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-pushstate http://stackoverflow.com/questions/17507091/replacestate-vs-... [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/M...
- TheZenPsycho 13y agoThanks 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.
- throw-away-914 13y agoWas drawing obligatory lady finger and two potatoes, ended up with this. http://pix.pe/#http://pix.pe?QAHA____A4HA_____H4AAA4AAHA4H4AAHA4_A___A4AAAAAH___AAAA__AH4HAA_A4HA_______AAAA___4AAAAAAAA____AAA_______A__HAAAA_____A4HA___AAAA http://pix.pe/#http://pix.pe?QAHA____A4HA_____H4AAA4AAHA4H4A...
- Lerc 13y agoThis 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_Spectrum_gallery_1997_2003.png http://fc05.deviantart.net/images3/i/2004/116/3/d/ZX_Spectru... 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 13y agoThanks. 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 13y agoI 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.
- dc2k08 13y agoyou should post this on r/pixelart
- TheZenPsycho 13y agoOh! maybe I'll wait til after I implement some of these feature requests.