My final ICM project – the emoji translator and mixer

For my final project, I made an emoji translator and mixer. The program converts user input into emojis instead of the user having to browse through tabs in order to find the right icon. It also lets the user create one animated icon to combine two emotions. Resources:

  • I used this list of 5000 words as a resource for the database to match words to icons.
  • After failing to use the Apple Color Emoji as a font, I got the icons as png files  from here and used that instead.

Libraries in use

  • Control P5 library for UI elements
  • gifAnimation library for gif animation
  • java.awt.Frame; to get a second  frame

video documentation emoji mixer from ziv schneider on Vimeo.     The code for translating user input into emojis in a 2nd window: import controlP5.*; import java.awt.Frame; import java.awt.BorderLayout; PFrame PFrame; secondApplet s; ControlP5 cp5; Table dataset; PImage img; PImage img2; float a; PFont f; PFont sf; public StringDict emojis; public String translated = “_______”; public String translated2 = “_______”; public String date = day() + “_” + hour() + “_” + minute(); void setup() { size(420, 370); frameRate(12); imageMode(CENTER); dataset = loadTable(“words_emoji.csv”, “header”); emojis = dataset.getStringDict(“WORD”, “EMOJI”); cp5 = new ControlP5(this); PFrame PFrame = new PFrame(); s = new secondApplet(); f = createFont(“Arial”, 16, true); sf = createFont(“Arial”, 10, true); ///textfield 1 cp5.addTextfield(“1”) .setPosition(20, 100) .setSize(190, 40) .setFont(createFont(“arial”, 20)) .setFocus(true); ///textfield 2 cp5.addTextfield(“2”) .setPosition(20, 180) .setSize(190, 40) .setFont(createFont(“arial”, 20)) .setAutoClear(true); ///clear button cp5.addBang(“clear”) .setPosition(20, 320) .setSize(40, 20) .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER); cp5.addSlider(“MIX”) .setId(1) .setPosition(20, 270) .setWidth(190) .setRange(2, 6) .setValue(3) .setNumberOfTickMarks(6) .setSliderMode(Slider.FIX); } void draw() { int indent = 20; textFont(f); fill(255); background(0); text(“Type two words.”, indent, 40); text(“Press return after each word.”, indent, 65); textFont(sf); text(translated, indent+13, 152); textFont(sf); text(translated2, indent+13, 232); } public void clear() { cp5.get(Textfield.class, “1”).clear(); cp5.get(Textfield.class, “2”).clear(); } void controlEvent(ControlEvent theEvent) { switch(theEvent.controller().id()){ case(1): a = (float)(theEvent.controller().value()); println(“a slider event A.”); break; } if (theEvent.isAssignableFrom(Textfield.class)) { if (theEvent.getName().equals(“1”)) { translated = theEvent.getStringValue(); } if (theEvent.getName().equals(“2”)) { translated2 = theEvent.getStringValue(); } } }   public class PFrame extends Frame { public PFrame() { setBounds(700, 320, 200, 200); s = new secondApplet(); add(s); s.init(); show(); } } import gifAnimation.*; public class secondApplet extends PApplet{ GifMaker gifExport; String path = “/Users/zivschnieder/Documents/Processing/two_frames/data/”; public void setup() { imageMode(CENTER); gifExport = new GifMaker(this, “emo”+date+”.gif”, 256); } void draw(){ background(0); images(); animateGif(); } public void images(){ float x = 0; float y = 0; float b = random(2, 8); if (emojis.hasKey(translated)) { String file = emojis.get(translated); PImage img = loadImage(path + file); img.loadPixels(); int dimension = img.width * img.height; for (int i = 0; i<dimension; i+=a) { img.pixels[i] = color(255, 0); } img.updatePixels(); image(img, width/2, height/2, img.width, img.height); } if (emojis.hasKey(translated2)) { String file = emojis.get(translated2); PImage img2 = loadImage(path+file); img2.loadPixels(); int dimension =img2.width * img2.height; for (int i = 0; i<dimension; i+=b) { img2.pixels[i] = color(255, 0);} // img2.updatePixels(); image(img2, width/2, height/2, img2.width, img2.height); } animateGif(); } public void animateGif(){ if (key == ‘1’) { gifExport.setRepeat(0); gifExport.setDelay(1); gifExport.addFrame(); println(“gifanimation”); } if (key == ‘0’) { gifExport.finish(); println(“stop”); } } }   Code for the mix and gif animation from two images: import gifAnimation.*; import controlP5.*; GifMaker gifExport; PImage img; PImage img2; PFont sf; ControlP5 cp5; public float a = 5; public float b = (random(3,6)); void setup() { String date = day() + “_” + hour() + “_” + minute(); println(date); gifExport = new GifMaker(this, “emo”+date+”.gif”); size(220, 220, P3D); frameRate(12); imageMode(CENTER); sf = createFont(“Arial”,8, true); cp5 = new ControlP5(this); cp5.addSlider(“MIX IT!”) .setId(1) .setPosition(20, 180) .setWidth(140) .setRange(2,6) .setValue(2) .setNumberOfTickMarks(6) .setSliderMode(Slider.FIX); } void draw() { background(0); float x = width/2; float y = height/2-20; float b = random(2, 8); loadPixels(); PImage img = loadImage(“emo419.png”); int dimension = img.width * img.height; for (int i = 0; i<dimension; i+=(b)) { img.pixels[i] = color(255, 0); } image(img, x, y, 128, 128); PImage img2 = loadImage(“emo408.png”); int dimension2 = img2.width * img2.height; for (int i = 0; i<dimension2; i+=(a)) { img2.pixels[i] = color(255, 0); } image(img2, x, y, 128, 128); updatePixels(); animateGif(); text(“press 1 for gif animation, 0 to stop.”, 3, 10); } void animateGif(){ if (key == ‘1’) { gifExport.setRepeat(0); // make it an “endless” animation // gifExport.setTransparent(0,0,0); // black is transparent gifExport.setDelay(0); gifExport.addFrame(); println(“gifanimation”); } if (key == ‘0’) { gifExport.finish(); println(“stop”); } } void controlEvent(ControlEvent theEvent) { switch(theEvent.controller().id()){ case(1): a = (float)(theEvent.controller().value()); println(“a slider event.”); break; } }

Leave a Comment.