
Show HN: I make my family postcards every year. Here's this year's. - flixic
http://postcards.lekevicius.com
======
gregschlom
It's interesting how a simple symmetry instantly transforms what would
otherwise be a bunch of random ugly lines into something beautiful.

Kaleidoscopic IFS fractals are also based on this concept. (8 axis symmetry +
some simple transformations), and look at the result:
[http://www.youtube.com/watch?v=renxaQZfsdk](http://www.youtube.com/watch?v=renxaQZfsdk)

~~~
judk
Yes, we see beauty in symmetry, so any junk becomes beautiful when arrayed in
a pattern, and the junk creator can feel proud of creating a work of art, when
in fact the aesthetic is mostly provided by the symmetry engine.

------
eugmill
Very nice. You should either open-source it or do a write up on how you made
it. As a newbie to web development, I'd love to read it.

~~~
flixic
It's open source! Use, remix, study and criticise!

[https://bitbucket.org/lekevicius/christmas-2013/](https://bitbucket.org/lekevicius/christmas-2013/)

------
ozh
Pretty fun :)

It's after clicking on "Gallery" that I understood you could draw on the
postcard, maybe a hint on the landing page would be nice

edit: oh, I get it. On my FF, the "family postcard draw it" thingie flashes
too fast.

edit: also, line breaks are not saved.

------
tannerc
This is excellent. Extremely simple and fairly intuitive, I wish I had heard
about it days sooner.

It's somewhat surprising to continuously encounter such (seemingly) simple
projects/proof-of-concepts like this that fulfill a need many of us didn't
realize we had. If you haven't yet, consider writing about how you came to the
idea for this particularly iteration and the process of creating it. I know
I'd enjoy reading something like that.

~~~
flixic
Thanks!

I do this every year. Last year, I experimented with Meteor.js and made a
Christmas forest: [http://kaledos.lekevicius.lt](http://kaledos.lekevicius.lt)
(sorry, in Lithuanian). Made that in about 10 hours - idea, design,
development. It's a fun thing.

This year I did the same. You couldn't have heard about it days sooner,
because it did not exist yesterday, just yesterday I wrote "rails new
christmas_2013". And I have no intention of maintaining it: next year it will
be another thing made in a day (:

~~~
lucaspiller
Very nice idea. Linksmų šventų kalėdų!

------
aestra
This reminds me so much of a toy I had when I was a kid, with a catchy
commercial...

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

commercial [http://www.youtube.com/watch?v=VoSECiRl-
pI&t=8m49s](http://www.youtube.com/watch?v=VoSECiRl-pI&t=8m49s)

------
ryanwatkins
Doesn't work in Chrome on a tablet. Start drawing zoomed to some a flipped
view of the backside and there is no space bar to tap without a text field.

Hacks for desktop only is understandable but increasingly a niche area to
target first.

~~~
flixic
"to target" and "first" (:

Well, it's a hack - for pretty much one day, mostly for our family friends. If
something doesn't work, really, I would have no problem saying "Oh, sorry,
just use Chrome on desktop. Merry Christmas!"

Really, tablets don't matter much here (:

------
charlesgarson
Isn't this a family Christmas card, rather than a postcard? Isn't a postcard
something you send back from a vacation?

~~~
jinushaun
No, a postcard is a very specific type of mail, which can have any image you
desire on the other side (vacation, Christmas, save the date, etc). The key
characteristics of a postcard is that you don't put them in an envelope and
you can send them using cheaper postcard stamps instead of more expensive
standard stamps.

------
kevining
Nice site! It seems like the initial instructions don't show up in Firefox
though. The drawing still works.

~~~
51Cards
Same here, in Firefox the instructions disappeared on load. Had to experiment
to see what it did. Cool otherwise.

------
TallboyOne
The gallery has my chuckling really hard

~~~
amcnett
My pre-click expectations were fully met.

~~~
aestra
Glad I wasn't the only one with that idea...

------
judk
It works on mobile, but please add an on page button to clear card, since I
don't have a space bar.

------
JoeAltmaier
Drops mouse=up event sometimes...IE 11.0.9600

------
frankdenbow
beautiful work! would love a breakdown on how you built this (I made a
postcard app a few years back picsicle.com)

~~~
flixic
You can check the source:
[https://bitbucket.org/lekevicius/christmas-2013](https://bitbucket.org/lekevicius/christmas-2013)

Basically, it's just a Rails app. No front-end framework, just jQuery. Canvas
is converted to base64, sent to server, server uploads to S3, user gets URL.
Very simply, one day hack.

------
gorhill
Very nice.

------
robodale
Hello, this is dog.

~~~
yincrash
what is with all the dog ones?

~~~
markHH
This is how to upload custom images to the gallery:

Using Google Chrome Inspector, you can find out the line that is triggered in
the Javascript code when the "SAVE" button is pressed (inspect the "SAVE"
button element, and it will tell you what part of the code is executed when
it's clicked). By looking at the code, you see that what happens is: the
previous HTML5 Canvas where you draw the snowflake is rendered into JPEG and
encoded in base64 (.toDataURL("image/jpeg")), then the data is appended to the
<form> element inside the "value" attribute of an <input> tag. Then, the form
is submitted via POST.

So if you set a DOM Breakpoint (using Chrome's Inspector) to watch for subtree
modifications of the <form>, you will catch it when the <input> tag is
appended. Then, you go take your own custom .jpeg, encode it into base64 (for
example here: [http://base64.wutils.com/encoding-online/image-to-
base64/](http://base64.wutils.com/encoding-online/image-to-base64/)), and then
paste your custom image data inside the the "value" attribute. Then you resume
the script, and the server will receive your custom image data, instead of the
original one.

