Use emoji in fonts in Processing

Processing Coding Questions
1

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 :slight_smile:

2

Can you use JavaFx; renderer FX2D?

3

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

image
image1151×48 3.82 KB

P2D:
image
image1154×55 4.72 KB

Original Text in notepad:
image

This is the same with emojis!

4

Try this format:

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();
}
5

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

6

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.

1 Like
7

Yes im using Windows :slight_smile:

1 Like
8

Hello @Noodlybanan,

See:

:)

9

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

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
emoji1248×998 230 KB

1 Like
10

Hello @Noodlybanan

I am using Windows 10 and Processing 4.3.

Update to my previous topic:

// 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
image1102×939 168 KB

References:

:)