# Using Emoji's on OSX

**URL:** <https://discourse.processing.org/t/using-emojis-on-osx/10349>\
**Category:** Coding Questions\
**Created:** [April 16, 2019, 12:59pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349 "2019-04-16T12:59:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [April 16, 2019, 12:59pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/1 "2019-04-16T12:59:40Z")

</div>

Is it possible to make something like this work:

```auto
void setup() {
  size(200, 200);
  char[] chars = Character.toChars(128149);
  textFont(createFont("AppleColorEmoji", 32, true, chars));
  textAlign(CENTER, CENTER);
  text(""+chars[0], width/2, height/2);
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 19, 2019, 6:07pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/2 "2019-04-19T18:07:29Z")

</div>

I recall a recent related discussion on getting OpenSansEmoji to work:

- [https://forum.processing.org/two/discussion/27835/opensansemoji-ttf-not-working-in-p3d](https://forum.processing.org/two/discussion/27835/opensansemoji-ttf-not-working-in-p3d)

I can see that AppleColorEmoji is there, is full of unicode, and has different codepoint contents than the default font. I just don’t know which specific codepoints you are looking for, and if they are representable (esp. if they are color).

Here is a sketch that scans through character indexes – on the default font and a loaded font.

```auto
PFont defaultFont;
PFont emoji;
int index=0;
int index2=0;
char[] chars;

void setup() {
  size(680, 340);
  chars = Character.toChars(128149);
  emoji = createFont("AppleColorEmoji", 32, true, chars);
  textSize(32);
  textAlign(CENTER, CENTER);
  defaultFont = g.textFont;
  frameRate(2);
}

void draw() {
  background(0);
  translate(32,32);
  textFont(defaultFont);
  charGrid(index, 10, 10, 32);
  translate(320,0);
  textFont(emoji);
  charGrid(index, 10, 10, 32);
  index+=100;
}

void charGrid(int index, int w, int h, float step){
  for (int j=0; j<h; j++) {
    for (int i=0; i<w; i++) {
      text(char(index), i*step, j*step);
      index++;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [April 22, 2019, 10:06am UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/3 "2019-04-22T10:06:28Z")

</div>

Yeah I need the colors as well, so it seems I should use something else then processing.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 22, 2019, 2:05pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/4 "2019-04-22T14:05:15Z")

</div>

So, according to this,

> **[It All Started With Emoji: Color Typography on the Web | CSS-Tricks](https://css-tricks.com/it-all-started-with-emoji-color-typography-on-the-web/)**
>
> “Typography on the web is in single color: characters are either black or red, never black and red …Then emoji hit the scene, became part of Unicode, and

  
there are four different recent standards that allow color emoji in font files – I suspect that none existed when Processing font support was developed.

SVG-in-Opentype  
COLR/CPAL  
SBIX  
CBDT/CBLC

If you could get the svg from opentype then you could get the color image – assuming the svg could be read by PShape. But you might still need to handle text size and kerning / leading.

Possible that emoji4j could help with that? Haven’t looked at it, but it seems like an external library that makes svg retrieval easy would be the first step. Or updating Processing core font components.

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [April 22, 2019, 4:32pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/5 "2019-04-22T16:32:16Z")

</div>

The processing core font could use some love anyway. TextWidth is so slow. I made a test sometime ago where I replaced it with just a float array for a lookup based on the char number and my sketch was running 10% faster.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 22, 2019, 5:17pm UTC](https://discourse.processing.org/t/using-emojis-on-osx/10349/6 "2019-04-22T17:17:59Z")

</div>

> [@clankill3r](#):
>
> I replaced it with just a float array for a lookup based on the char number and my sketch was running 10% faster

Maybe pull request that!