emojimorse

sketch.js

/**
 * Author: Oliver Steele
 *
 * Graphic design adapted from image on
 * https://www.offgridweb.com/preparation/morse-code-dits-dahs-dots-and-dashes/
 */
const DOT_COLOR = "orange";
const DASH_COLOR = "#4CACE9";

let rowStrings = [
  "ET",
  "IANM",
  "SURWDKGO",
  "HVF L PJBXCYZQ  ",
  "54 3   2       16       7   8 90",
];

// Source: https://home.unicode.org/emoji/emoji-frequency/
let emojiFreqs = [
  "😂 ❤️",
  "😍 🤣",
  "😊 🙏 💕 😭 😘",
  "👍 😅 👏 😁 ♥️ 🔥 💔 💖 💙 😢 🤔 😆 🙄 💪 😉 👌 🤗", // skip ☺️
  "💜 😔 😎 😇 🌹 🤦 🎉 ‼️ 💞 ✌️ ✨ 🤷 😱 😌 🌸 🙌 😋 💗 💚 😏 💛 🙂 💓 🤩 😄 😀 🖤 😃 💯 🙈 👇 🎶 😒 🤭 ❣️",
];

let includeEmoji = false;
let rows;

function setup() {
  createCanvas(windowWidth - 10, windowHeight - 10);
  noLoop();
}

function draw() {
  let emoji = includeEmoji ? emojiFreqs.join(" ").split(/\s+/g) : [];
  rows = [
    ["START"],
    ...rowStrings.map((s) =>
      s.split("").map((c) => (c === " " ? emoji.shift() : c))
    ),
  ];

  background(255);
  fill(200);
  textFont("Helvetica");
  textAlign(RIGHT, BOTTOM);
  textSize(20);
  text("osteele.com", width, height - 16);
  textSize(12);
  text("Graphic design adapted from offgridweb.com", width, height);

  if (!includeEmoji) {
    textAlign(CENTER, BASELINE);
    text("Click to add emoji", width / 2, 40);
  }

  textFont("Arial Black");
  textAlign(CENTER, BASELINE);
  noStroke();
  textSize(30);
  let th = textAscent() * 0.8;

  push();
  fill(DASH_COLOR);
  translate(width / 4, 40);
  text("DOT", 0, 0);
  text("•", 0, 25);
  translate(-textWidth("DOT") / 2 - 5, 0);
  triangle(0, 0, 0, -th, -35, -th / 2);
  fill(DASH_COLOR);
  pop();

  push();
  fill(DOT_COLOR);
  translate((width * 3) / 4, 40);
  text("DASH", 0, 0);
  text("–", 0, 22);
  translate(textWidth("DASH") / 2 + 5, 0);
  triangle(0, 0, 0, -th, 35, -th / 2);
  pop();

  rows.forEach((row, j) => {
    row.forEach((c, i) => {
      // parent row, column and label
      let iʹ = floor(i / 2);
      let jʹ = j - 1;
      let cʹ = (rows[jʹ] || [])[iʹ];
      // left child
      let iʹʹ = 2 * i;
      let rowʹʹ = rows[j + 1] || [];
      let { x, y } = getCenter(i, j);
      let { x: xʹ, y: yʹ } = getCenter(iʹ, jʹ);
      fill(0);
      if (!c && (rowʹʹ[iʹʹ] || rowʹʹ[iʹʹ + 1])) {
        c = "•-".charAt(i & 1);
        fill([DASH_COLOR, DOT_COLOR][i & 1]);
      }
      text(c, x, y);
      if (c && j > 0) {
        let w = textWidth(c);
        let wʹ = textWidth(cʹ || "");
        let s = sign(xʹ - x);
        fill(s < 0 ? DOT_COLOR : DASH_COLOR);
        let x0 = xʹ - (s * wʹ) / 2;
        let x1 = x + (s * w) / 2;
        arrow(x0, yʹ + 5, sign(x0 - x1) === s ? x1 : x, y - 25, !(i & 1));
      }
    });
  });
}

function mousePressed() {
  includeEmoji = !includeEmoji;
  redraw();
}

function windowResized() {
  resizeCanvas(windowWidth - 10, windowHeight - 10);
  redraw();
}

function arrow(x0, y0, x1, y1, dashed) {
  let ll = dist(x0, y0, x1, y1); // line length
  let sl = ll - 10; // stem length
  let hw = 5; // line half-width
  let pts = [
    [0, hw],
    [sl, hw],
    [sl, hw + 5],
    [ll, 0],
  ];
  push();
  translate(x0, y0);
  rotate(atan2(y1 - y0, x1 - x0));
  noStroke();
  beginShape();
  pts.forEach(([x, y]) => vertex(x, y));
  pts.reverse().forEach(([x, y]) => vertex(x, -y));
  endShape();
  if (dashed) {
    fill(255);
    for (let x = 10; x < sl; x += 10) {
      rect(x, -hw, -2, 2 * hw);
    }
  }
  pop();
}

const sign = (x) => (x < 0 ? -1 : x > 0 ? 1 : 0);

const getCenter = (i, j) => {
  let rowCount = rows.length;
  return {
    x: map((i + 0.5) * 2 ** (rowCount - j), -1, 2 ** rowCount + 1, 0, width),
    y: min(100 + 80 * j, map(j, 0, rowCount - 0.5, 100, height)),
  };
};