

Letter-heads - pmcpinto
http://simurai.com/projects/letter-heads/

======
kartikkumar
Interesting idea but I was totally caught off-guard by the automatic tweet
posted when I clicked on the little birdy in the middle. Really not cool.
Deleted the tweet immediately. At least let someone know you're going to be
posting a tweet so that they can decide if they're game.

~~~
simurai
Sorry. In the middle used to be a font switcher, but it didn't turn out that
well, so I replaced it with a custom tweet button. Yeah, maybe it would be
less intrusive to move it to the bottom.

Edit: done!

~~~
kartikkumar
Awesome! Thanks for taking my tip on-board! Other than my initial reaction to
the tweet, compliments on a pretty sweet idea!

------
samwillis
Clever idea.

I think it's based on the artwork [1] of Tim Noble and Sue Webster [2] who
create images using the silhouette from scultures made from rubbish.

1:
[http://en.wikipedia.org/wiki/File:Miss_Understood_and_Mr_Mea...](http://en.wikipedia.org/wiki/File:Miss_Understood_and_Mr_Meanor,_1997.jpg)

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

~~~
bhauer
The creator [1] says it's inspired by Kumi Yamashita.

[1] [http://simurai.com/projects/2011/03/11/letter-
heads/](http://simurai.com/projects/2011/03/11/letter-heads/)

~~~
samwillis
Yep, so it is.

[http://www.kumiyamashita.com/portfolio/profile/](http://www.kumiyamashita.com/portfolio/profile/)

------
IgorPartola
Pro tip: looks like refreshing the page gives you different faces.

I wonder if these are pre-compiled or is there some algorithm at play that
makes these dynamically?

~~~
FreeFull
You don't have to refresh the page, you can just click again to get a
different face.

------
jack_hanford
Very interesting! Would love to read about how you did this.

~~~
simurai
The source is on GitHub to check out:
[https://github.com/simurai/simurai.github.io/tree/master/pro...](https://github.com/simurai/simurai.github.io/tree/master/projects/letter-
heads)

To create the head shapes, the position and rotation of each letter is defined
with CSS transforms (see heads.css). To get the right values, it's mostly
trial and error. But to make it a bit easier, I created a little helper script
that let me drag/rotate each letter with the mouse and then copy the value to
be used for those CSS transforms.

------
bhauer
[2011]

------
fcatalan
Seems like a genetic algorithm would be a great fit to produce a letter
arrangement given a target silhouette

------
kwaimind
Just when you thought you knew it. BAM...something new!

------
rel
Worked surprisingly well on mobile!

------
npatten
Very cool!

------
ishi
Extremely well done!

------
jnardiello
_mind-blowing_

