emoji paint

[forresto]

🌚🌘🌗🌖🌝🌔🌓🌒🌚

🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞
🌞🌚🌚🌚🌚🌚🌚🌚🌚🌚
🌞🌚🌞🌞🌞🌞🌞🌞🌞🌚
🌞🌚🌞🌚🌚🌚🌚🌚🌞🌚
🌞🌚🌞🌚🌞🌞🌞🌚🌞🌚
🌞🌚🌞🌚🌚🌚🌞🌚🌞🌚
🌞🌚🌞🌞🌞🌞🌞🌚🌞🌚
🌞🌚🌚🌚🌚🌚🌚🌚🌞🌚
🌞🌞🌞🌞🌞🌞🌞🌞🌞🌚
🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚

At the risk of taking the emoji thing too far...

How hard would it be to analyze the pixels in a set of emoji and make some kind of data structure that we could search to find a closest match? Then we could make a graph that

1. chooses a random 36x36 square of a source image
2. finds the closest emoji
3. draws that character to that position in the destination canvas
4. repeat as long as you like

I'd be interested to see how it would look, choosing different palettes of emoji, etc.

[forresto]

So, this works in Firefox at least. The only question is how to do the pixel classification / search in # 2.

context.font = "50px verdana";
chars = ["🌚","🌘","🌗","🌖","🌝","🌔","🌓","🌒"];
for (var i=0; i<1000; i++) {
  context.fillText(chars[Math.floor(Math.random()*chars.length)], Math.random()*500, Math.random()*500);
}

[forresto]

emojiStringToArray = (str) ->
  split = str.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/);
  arr = []
  for char in split
    unless char is ""
      arr.push char
  return arr

Needed because "😴😄😃⛔🎠🚓🚇".length == 13 because ⛔ length is one, the rest are two. Woof 🐶

[forresto]

Tangential: art typing doesn't have to stick to a grid either:

[forresto]

This made me laugh

[automata]

😍

To use JSFeat to extract (and cache) features from each emoji and compare that with a random square from original image?