# Emoji Playing Cards JavaFX

**URL:** <https://discourse.processing.org/t/emoji-playing-cards-javafx/43095>\
**Category:** Gallery\
**Created:** [October 30, 2023, 1:50am UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095 "2023-10-30T01:50:04Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [October 30, 2023, 1:50am UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095/1 "2023-10-30T01:50:04Z")

</div>

The following source code will create emoji playing cards.

```auto
//https://stackoverflow.com/questions/11145681/how-to-convert-a-string-with-unicode-encoding-to-a-string-of-letters/54285760#54285760
//https://unicode.org/charts/PDF/U1F0A0.pdf

import javafx.scene.canvas.*;
import javafx.*;
import javafx.application.*;
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;
import javafx.scene.text.TextAlignment;

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("Emoji PlayingCards_Unicode To String Demo");
  Pane pane = new Pane();
  
  // ****Spades**** //
  String[] spadeArray = {"1F0A1", "1F0A2", "1F0A3", "1F0A4", "1F0A5", "1F0A6", "1F0A7", "1F0A8", "1F0A9", "1F0AA", "1F0AB", "1F0AD", "1F0AE"};
  String spadeStr = unicodeToStr(spadeArray);
  Text spades = new Text(30, 100, spadeStr );
  spades.setFont(new Font(100));
  spades.setFill(Color.BLACK);
  pane.getChildren().add(spades);
  
  // ****Hearts**** //
  String[] heartArray = {"1F0B1", "1F0B2", "1F0B3", "1F0B4", "1F0B5", "1F0B6", "1F0B7", "1F0B8", "1F0B9", "1F0BA", "1F0BB", "1F0BD", "1F0BE"};
  String heartStr = unicodeToStr(heartArray);
  Text hearts = new Text(30, 200, heartStr);
  hearts.setFont(new Font(100));
  hearts.setFill(Color.RED);
  pane.getChildren().add(hearts);

  // ****Diamonds**** //
  String[] diamondArray = {"1F0C1", "1F0C2", "1F0C3", "1F0C4", "1F0C5", "1F0C6", "1F0C7", "1F0C8", "1F0C9", "1F0CA", "1F0CB", "1F0CD", "1F0CE"};
  String diamondStr = unicodeToStr(diamondArray);
  Text diamonds = new Text(30, 300, diamondStr );
  diamonds.setFont(new Font(100));
  diamonds.setFill(Color.RED);
  pane.getChildren().add(diamonds);

  // ****Clubs**** //
  String[] clubArray = {"1F0D1", "1F0D2", "1F0D3", "1F0D4", "1F0D5", "1F0D6", "1F0D7", "1F0D8", "1F0D9", "1F0DA", "1F0DB", "1F0DD", "1F0DE"};
  String clubStr = unicodeToStr(clubArray);
  Text clubs = new Text(30, 400, clubStr );
  clubs.setFont(new Font(100));
  clubs.setFill(Color.BLACK);
  pane.getChildren().add(clubs);
  
  // ****Joker and Back of Card**** //
  String[] JokerAndBackArray = {"1F0A0", "1F0CF"};
  String JokerAndBackStr = unicodeToStr(JokerAndBackArray);
  Text jokerAndBack = new Text(30, 500, JokerAndBackStr );
  jokerAndBack.setFont(new Font(100));
  jokerAndBack.setFill(Color.BLACK);
  pane.getChildren().add(jokerAndBack);

  Scene scene = new Scene(pane, 980, 560, Color.WHITE);
  stage.setScene(scene);
  stage.show();
}

```

**Output:**

 ![cards2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/b/4ba6c900a2b826bca40416902483f96057a75ea3.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 30, 2023, 7:44am UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095/2 "2023-10-30T07:44:41Z")

</div>

Great!

Can you please add the Joker?

In simplified version…

And maybe a back side of a card?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 30, 2023, 2:09pm UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095/3 "2023-10-30T14:09:39Z")

</div>

Impressive.

Very cool code.

The code is not complete, I guess?

What is the difference between stage and scene conceptually?

---

<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:** [October 30, 2023, 4:31pm UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095/4 "2023-10-30T16:31:36Z")

</div>

See edit; joker and backside of card included.

---

<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:** [October 30, 2023, 4:32pm UTC](https://discourse.processing.org/t/emoji-playing-cards-javafx/43095/5 "2023-10-30T16:32:39Z")

</div>

> [@Chrisir](#):
>
> The code is not complete, I guess?

I’m not sure what you mean by this? It should be a runnable demo.

> What is the difference between stage and scene conceptually?

The following is a quotation from “Learn JavaFX 17” by Sharan and Spath:

Similar to a stage in the real world, a JavaFX stage is used to display a scene. A scene has visuals–such as text, shapes, images, controls, animations, and effects–with which the user may interact, as in the case with all GUI-based applications.