# Use emoji in fonts in Processing

**URL:** <https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685>\
**Category:** Coding Questions\
**Created:** [January 12, 2024, 7:58pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685 "2024-01-12T19:58:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [January 12, 2024, 7:58pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/1 "2024-01-12T19:58:04Z")

</div>

Hello, I have tried multiple fonts that support Emoji/Unicode characters, but i found that none of those seem to be working. Is there a way to display Emoji & Unicode in processing?

-Thanks for everyone who can contribute 🙂

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2024, 8:24pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/2 "2024-01-12T20:24:19Z")

</div>

Can you use JavaFx; renderer FX2D?

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [January 12, 2024, 8:28pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/3 "2024-01-12T20:28:58Z")

</div>

No sadly it doesn’t make a difference:  
FX2D:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/0/905c1a24ba9e29532100386ea52aff6d5ec712f7.png)  
P2D:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/8/688b06e99a3fe240b19037387d6bdab35fc4d383.png)

Original Text in notepad:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/d/6da4f65c8c98e2bd30d615cfb2c9d42d1e6b0ca5.png)

This is the same with emojis!

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2024, 8:30pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/4 "2024-01-12T20:30:06Z")

</div>

Try this format:

```auto
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

String unicodeToStr(String[] unicodeArray) {
  StringBuffer buffer = new StringBuffer();
  for (int i = 0; i < unicodeArray.length; i++) {
    int hexVal = Integer.parseInt(unicodeArray[i], 16);
    buffer.append(Character.toChars(hexVal));
  }
  return buffer.toString();
}

void setup() {
  size(1, 1, FX2D);
  Stage stage = new Stage();
  stage.setTitle("MusicalNotes_Unicode To String Demo");
  Pane pane = new Pane();
  // ****Musical Notation**** //
  String[] musicArray = {"2669", "266A", "266B", "266C", "266D", "266E", "266F"};
  String musicStr = unicodeToStr(musicArray);
  Text notes = new Text(30, 100, musicStr );
  notes.setFont(new Font(100));
  notes.setFill(Color.BLACK);
  pane.getChildren().add(notes);
  Scene scene = new Scene(pane, 680, 360, Color.WHITE);
  stage.setScene(scene);
  stage.show();
}

```

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [January 12, 2024, 8:33pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/5 "2024-01-12T20:33:51Z")

</div>

This code cannot be run, it says “you might be missing a library” even tho i have javafx installed!

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2024, 8:39pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/6 "2024-01-12T20:39:09Z")

</div>

Could be missing a module(sure wish the editorial team would add \_all the modules). I’ll see if I can come up with a work around. You can add a folder called ‘code’ to the sketch folder and install all the modules in there. I just need to see if I can locate them on my system. Could be something else, but this sounds familiar; Windows OS I presume?

**Addendum:**  
You should have a ‘javafx’ folder inside your /Documents/Processing folder. Inside the ‘javafx’ folder should be a folder called ‘library’. Inside that you should see a bunch of folders for the various operating systems. Pick the one that is for your system. Inside there is a folder called ‘modules’; open that and you should see seven .jar files. Copy all of those .jar files and paste them into the ‘code’ folder that you just created in your sketch folder. Hopefully this helps.

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [January 12, 2024, 8:44pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/7 "2024-01-12T20:44:14Z")

</div>

Yes im using Windows 🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 12, 2024, 9:00pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/8 "2024-01-12T21:00:47Z")

</div>

Hello @Noodlybanan,

See:

> [@Musical Notation Symbols?](https://discourse.processing.org/t/musical-notation-symbols/43483/9):
>
> Hello @bachrock, Find a suitable font (web search found the ones below) with music notes. I did a bit of searching for insight on how to display Unicode characters with Processing and Java to achieve this. This works with Processing 4.3 Java: PFont myFont; import java.lang.Character.\*; void setup() { size(1100, 1000); background(244); // Uncomment the following two lines to see the available fonts //String[] fontList = PFont.list(); //printArray(fontList); //myFont = c…

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2024, 4:52am UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/9 "2024-01-13T04:52:52Z")

</div>

A technique demonstrated in the recent thread referenced above is probably going to be a lot simpler than trying to use JavaFx:

```auto
import java.lang.Character.*;

void setup() {
  size(700, 600);
  background(244);
  textFont(createFont("Wingdings", 44));
  int init = 0x1F600;
  for (int i = 0; i < 80; i++) {
    String s = new String(Character.toChars(init+i));
    text(s, 60 + 60*(i%10), 100 + 60*(i/10)); // rows and columns
  }
}

```

**Output:**

 ![emoji](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/1/81e2e7953f8b6b67f9355b847937d464c5bd2a46.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 14, 2024, 11:48pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/10 "2024-01-14T23:48:12Z")

</div>

Hello @Noodlybanan

I am using Windows 10 and Processing 4.3.

Update to my previous [topic](https://discourse.processing.org/t/musical-notation-symbols/43483/9):

```auto
// Display unicode emojis
// glv
// 2024-01-13
// v1.0.0

//Reference:
// https://stackoverflow.com/questions/5585919/creating-unicode-character-from-its-number

PFont myFont;
import java.lang.Character.*;

int fontStart;

void setup() 
  {
  size(1100, 900);
  background(244);

  // Uncomment the following two lines to see the available fonts 
  //String[] fontList = PFont.list();
  //printArray(fontList);
 
  myFont = createFont("Segoe UI Emoji", 36);
  textFont(myFont);
  textAlign(CENTER, BOTTOM);
  fill(0);
  fontStart = 0x1F300;
  println(hex(fontStart));
  }
   
void draw()
  {
  background(244); 
  
  if (frameCount%60 == 0)
    {
    fontStart += 200;
    if (fontStart>0x1FA95) fontStart = 0x1F300;
    println(hex(fontStart));
    }

  for(int i=0; i<200; i++)
    {
    int cp = fontStart+i;  
      
    // Works:  
    //char [] uc = Character.toChars(cp);
    //String s = new String (uc);
    
    // Works:
    //String s = new String(Character.toChars(cp)); // Above in one line
      
    // Works:
    String s = Character.toString(cp);
    
    text(s, i%20*50+70, (i/20)*80+100); // display grid
    }
  }

```

Output:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/9/5939e39f5712b54712e8436894f3b755cf6875d2.png)

References:

- [java - Creating Unicode character from its number - Stack Overflow](https://stackoverflow.com/questions/5585919/creating-unicode-character-from-its-number)
- [Emoji - Wikipedia](https://en.wikipedia.org/wiki/Emoji)
- [GitHub - googlefonts/noto-emoji: Noto Emoji fonts](https://github.com/googlefonts/noto-emoji?tab=readme-ov-file)

`:)`

---

<div class="post-metadata">

**Author:** ![afk](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@afk](https://discourse.processing.org/u/afk)\
**Post date:** [August 18, 2024, 7:14am UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/12 "2024-08-18T07:14:30Z")

</div>

Hi, I try this code on windows 11 with intellij idea, only got the grey output.  
Is this a difference between the OS I use?  
Is it colorful on mac?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/f/dfdff2540034471b00348d3e0559e5b41d6bad20.png)

Here is the code & pom.xml

```java
import processing.core.PApplet;

public class VerifyConfig extends PApplet {
    @Override
    public void settings() {
        super.settings();
        size(1000, 1000,FX2D);
    }

    @Override
    public void setup() {
        textFont(createFont("Segoe UI Emoji", 22));
        text("hello, world☺", 50, 150);

        textFont(createFont("Wingdings", 44));
        int init = 0x1F600;
        for (int i = 0; i < 80; i++) {
            String s = new String(Character.toChars(init+i));
            text(s, 60 + 60*(i%10), 100 + 60*(i/10));  
        }
    }

    public static void main(String[] args) {
        PApplet.runSketch(new String[]{"test"}, new VerifyConfig());
    }
}

```

```xml
    <properties>
        <maven.compiler.source>21</maven.compiler.source>
        <maven.compiler.target>21</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <repositories>
        <repository>
            <id>jitpack</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>com.github.micycle1</groupId>
            <artifactId>processing-core-4</artifactId>
            <version>4.3.3</version>
        </dependency>
    </dependencies>

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 18, 2024, 1:17pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/13 "2024-08-18T13:17:35Z")

</div>

To see the output correctly on a mac you don’t need the FX2D renderer:

```auto
void setup() {
 // size(1000, 1000,FX2D);
  size(1000, 1000);
  textFont(createFont("Segoe UI Emoji", 22));
  text("hello, world☺", 50, 650);

  textFont(createFont("Wingdings", 44));
  int init = 0x1F600;
  for (int i = 0; i < 80; i++) {
    String s = new String(Character.toChars(init+i));
    text(s, 60 + 60*(i%10), 100 + 60*(i/10));
  }
}

```

**Output:**

 ![Screenshot 2024-08-18 at 8.10.53 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/9/b90230c83330eaf4631a372ae95b5398c4c1286f.png)

With this warning:

 ![Screenshot 2024-08-18 at 8.13.08 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/e/8e1263c5c0835332c4c8a4dfab8348b11ec54b8b.png)

---

<div class="post-metadata">

**Author:** ![afk](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@afk](https://discourse.processing.org/u/afk)\
**Post date:** [August 18, 2024, 2:08pm UTC](https://discourse.processing.org/t/use-emoji-in-fonts-in-processing/43685/14 "2024-08-18T14:08:43Z")

</div>

thanks. it’s colorful on windows now.  
After I remove the `FX2D`, and change from Oracle build to Jetbrains build [21.0.3b509.11 · JetBrains/JetBrainsRuntime](https://github.com/JetBrains/JetBrainsRuntime/releases/tag/jbr-release-21.0.3b509.11)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/a/dad70ce91373ba0688fefa6cfd86207ba927efa1.png)

```java
    @Override
    public void settings() {
        super.settings();
        size(1000, 1000);
    }

    @Override
    public void setup() {
        fill(0);
        textFont(createFont("Segoe UI Emoji", 50));
        int init = 0x1F600;
        for (int i = 0; i < 80; i++) {
            String s = new String(Character.toChars(init+i));
            text(s, 60 + 60*(i%10), 100 + 60*(i/10)); // rows and columns
        }
    }

```