+ emoji

+ web components

= art

@notwaldorf

✨✨emojineer✨✨

@punchesbears

right?

back to the art

art is hard

Renoir: Bal du moulin de la Galette

art is fun

sharing art is fun

jenn schiffer: make8bitart.com

jenn schiffer: selfie

jenn schiffer: var t;

mu-an chiou: megamoji

megamoji cat (by yours truly)

muster

give people better
brushes

give the web better
brushes

do better than divs

<nav>

the web has
semantics

<nav>

the web has
semantics

<input>

<video>

the web has
encapsulation

<input>

<video>

the web has
encapsulation

<input>

<video>

the web has
encapsulation

lol no

the web has
<emoji-brush>

= web components

+ encapsulation

+ semantics

      <a-presentation>
        <a-slide>
          <h1 class="title">awesome!</h1>
        </a-slide>
      </a-presentation>

awesome!

polymer 101

        <dom-module id="a-slide">
          <style>...</style>

          <template>
            <div class="content-wrapper">
              <content select=.title></content>
            </div>
          </template>

          <script>
            Polymer({
              is: 'a-slide'
            });
          </script>
        </dom-module>

        <dom-module id="a-slide">
          <style>...</style>

          <template>
            <div class="content-wrapper">
              <content select=.title></content>
            </div>
          </template>

          <script>
            Polymer({
              is: 'a-slide'
            });
          </script>
        </dom-module>

        <dom-module id="a-slide">
          <style>...</style>

          <template>
            <div class="content-wrapper">
              <content select=".title"></content>
            </div>
          </template>

          <script>
            Polymer({
              is: 'a-slide'
            });
          </script>
        </dom-module>

        <dom-module id="a-slide">
          <style>...</style>

          <template>
            <div class="content-wrapper">
              <content select=".title"></content>
            </div>
          </template>

          <script>
            Polymer({
              is: 'a-slide'
            });
          </script>
        </dom-module>

          <script>
            Polymer({
              is: 'a-presentation',

              properties: {
                currentSlide: {
                  type: Number,
                  value: 0,
                  notify: true
                }
              },

              attached: function() {...},
              next: function() {...},
              previous: function() {...}
            });
          </script>

          <script>
            Polymer({
              is: 'a-presentation',

              properties: {
                currentSlide: {
                  type: Number,
                  value: 0,
                  notify: true
                }
              },

              attached: function() {...},
              next: function() {...},
              previous: function() {...}
            });
          </script>

          <script>
            Polymer({
              is: 'a-presentation',

              properties: {
                currentSlide: {
                  type: Number,
                  value: 0,
                  notify: true
                }
              },

              attached: function() {...},
              next: function() {...},
              previous: function() {...}
            });
          </script>

          <script>
            Polymer({
              is: 'a-presentation',

              properties: {
                currentSlide: {
                  type: Number,
                  value: 0,
                  notify: true
                }
              },

              attached: function() {...},
              next: function() {...},
              previous: function() {...}
            });
          </script>

ok so back to the art

make art with
brushes

make apps with
components

input

⇢

<emoji-llate>

⇠

config

input

⇢

<emoji-llate>

⇠

config

input

⇢

<emoji-llate>

⇠

config

data is bindable!

    <input type="file" value="{{someFile}}">

    <emoji-llate>
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file"{{someFile}}"
        resolution"{{someResolution}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file="{{someFile}}"
        resolution="{{someResolution}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file="{{someFile}}"
        resolution="{{someResolution}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file="{{someFile}}"
        resolution="{{someResolution}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file="{{someFile}}"
        resolution="{{someResolution}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>

    <input type="file" value="{{someFile}}">

    <emoji-llate
        file="{{someFile}}"
        resolution="{{someResolution}}">
        hide-background="{{shouldHide}}">
    </emoji-llate>

    <paper-slider value="{{someResolution}}"></paper-slider>
    <paper-checkbox checked="{{shouldHide}}"></paper-checkbox>

          <html>
          <head>
            <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
            <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
            <link rel="import" href="bower_components/paper-slider/paper-slider.html">
            <link rel="import" href="emoji-llate.html">
          </head>
          <body unresolved>
            <template is="dom-bind" id="t">
              <input type="file" id="loader" on-change="munge">
              <paper-slider value="{{_value}}" pin snaps step=5 min=5 max=80</paper-slider>
              <paper-checkbox checked="{{_noBackground}}">hide background</paper-checkbox>

              <emoji-late id="go" resolution="{{_value}}" no-background="{{_noBackground}}">
                <div class="output"></div>
              </emoji-late>
            </template>
          </body>
          <script>
            t._value = 60;
            t._noBackground = false;

            t.munge = function(e) {
              go.file = e.target.files[0];
            }
          </script>
          </html>

ok so back to the art

= emojillator

+ pixellator

+ emoji

canvas vs span

spans are copy pastable

👌

how 2 emojillate

1. render file in a (hidden) <img>

2. find the width/height ratio

3. resize our (hidden) canvas

4. pixellate it! (still hidden)

5. add pixel <divs> somewhere visible

annnnnd it's emojillated!

p.s. it's text!!

so we can make a gist

👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👪🚚😹👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸🙌🐥🚧🍶🌔🍶🚧🐥🐥👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸😹😹📈🌁⬜⬜⬜⬜🌁🚓📣👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸🌕🌛🐥🐥🐥🐥🐥🐥🐥👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸🙈⛅⬜⬜⬜⬜⬜⬜⬜⬜⬜📜🚚👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸🙌👢🚚😤😤😤😤😤😤🌕👑🐥👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸🚚🔳⬜⬜⬜⬜⬜⬜⬜👸⬜⬜⬜⬜🚚👸👸👸👸👸👸👸👸👸👸👸👸👸😢🙌😤⬜⬜⬜⬜⬜⬜⬜⬜👸🐺💂👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸😥🙌⬜⬜⬜⬜⬜⬜⬜⬜👸👸⬜⬜⬜🔏🐺👸👸👸👸👸👸👸👸👸👸👸😢🙌👸⬜⬜⬜⬜⬜⬜⬜⬜⬜👸👸📣💇👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸🌛📜⬜⬜⬜⬜⬜👸⬜⬜⬜⬜⬜⬜⬜⬜🔊😤👸👸👸👸👸👸👸👸👸👪🐴😤⬜⬜⬜👸👸👸👸👸👸👸👸👸👸👑👪👸👸👸👸👸👸👸
👸👸👸👸👸👸👸😓🚧⬜⬜👸⬜⬜⬜⬜⬜⬜⬜⬜⬜👸⬜⬜👟😤👸👸👸👸👸👸👸👸😥💂🚚⬜⬜⬜👸👸👸👸👸👸👸👸👸👸👸🌛📣👸👸👸👸👸👸👸
👸👸👸👸👸👸👸🌛😹⬜⬜👸⬜⬜⬜⬜⬜⬜⬜⬜👸👸👸⬜📠👑👸👸👸👸👸👸👸👸🌛👑👸⬜⬜👸👸👸👸👸👸👸👸👸👸👸👸👸😤🚚👸👸👸👸👸👸
👸👸👸👸👸👸👸🌛🌕⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜🚧😤👸👸👸👸👸👸👸🌛📣👸⬜⬜👸👸👸👸👸👸👸👸👸👸👸👸😥🌛🚚👸👸👸👸👸👸
👸👸👸👸👸👸👸🌛🌕⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜📜🚧👪👸👸👸👸👸👸👸👸📣😹👸👸👸👸👸👸👸👸👸👸👸👸👸👸🌛🐻👸👸👸👸👸👸👸
👸👸👸👸👸👸👸🌛🚚⬜⬜👸👸👸⬜⬜⬜⬜⬜⬜👸👸👸⬜🍨😹👸👸👸👸👸👸👸👸👸👸🍶👪👸👸👸👸👸👸👸👸👸👸👸👸😓🐎😤👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸🌛⬜⬜👸👸⬜⬜⬜⬜⬜⬜⬜⬜👸⬜⬜👟😤👸👸👸👸👸👸👸👸👸👸🌛📣👸👸👸👸👸👸👸👸👸👸👸👸🌛🐻👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸🌛📜⬜⬜⬜⬜⬜👸⬜⬜👸⬜⬜⬜⬜⬜🙏😤👸👸👸👸👸👸👸👸👸👸👸📣📣👸👸👸👸👸👸👸👸👸😥🌛🙌👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸🚚⬜⬜⬜⬜👸👸⬜⬜👸👸⬜⬜⬜⛅😹👸👸👸👸👸👸👸👸👸👸👸👸👸😥👑🌛🐻😤👸👸😓🐻🌛🐎👋👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸🌛🔍⬜⬜⬜👸👸⬜⬜👸👸⬜⬜🎂😹👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸😓😹🍦⭐🚧⭐🙌😓😓👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸📣🔊⬜⬜⬜⬜⬜⬜⬜⬜⬜🎂👳👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👪😓😥🈚👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸😓🚚🔏🍚⬜⬜⬜🎂📱📢😹👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸😥🍶🍦🌛🌛🍦😹😥👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸😓😥😥👪👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸
👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸👸

and spam slack

🎉🎉🎉

give the web
better brushes

Chris Joel: emoji word art

Chris Joel: meatscope.camera

help people make art

help people share art

@notwaldorf ✌︎

thanks!

Image credits: Oliviu Stoian, Ismael Ruiz, and Sergey Demushkin from the Noun Project. Chelsea LaSalle from the goodness of her heart.