let symbols = "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾".split(' ');

​

let textArray = [];

let textString = '';

let transformedText = '';

​

let screen = null;

​

const heightInput = 140;

const charMargin = 40;

const charSize = 40;

let maxCharsPerRow = 0;

let maxRows = 0;

let adjustTop = 0;

​

let isEmojiSystem = false;

​

let monitorColor = null;

let monitorColorString = '#00FF00';

​

let blinkingVar = 0;

let blinkingVarRate = 20;

const flickerMargin = 3;

​

let shouldSave = false;

​

function setup() {

  screen = createCanvas(600, 600);

  maxCharsPerRow = (width - charMargin * 2) / charSize;

  maxRows = (height - heightInput - charMargin * 2) / charSize;

  textFont('Space Mono');

  textStyle(NORMAL);

}

​

function draw() {

​

  if (isEmojiSystem) {

    background('#2A3344')

    noStroke();

    fill('#E46A65');

    rect(0, 0, width, heightInput);

    monitorColor = color('#FFFFFF');

    adjustTop = 0;

  } else {

    background(0);

    monitorColor = color(monitorColorString);

    adjustTop = -20;

  }

​

  noStroke();

  textSize(18);

  textLeading(26);

​

  if( !shouldSave ){

    if (textString === '') {

      let alphaColor = monitorColor;

      alphaColor.setAlpha(100);

      fill(alphaColor);

      text("Type Something", charMargin, charMargin + 10);

    } else {

      fill(monitorColor);

      text(textString, charMargin, charMargin + 10);

    }

  }

​

  let rowNum = -1;

​

  for (let i = 0; i < textArray.length; i++) {

​

    let posx = charSize * i + charMargin;

    if (i % maxCharsPerRow === 0) {

      rowNum++;

    }

    posx = posx - (maxCharsPerRow * charSize) * rowNum;

    let posy = heightInput + charMargin + rowNum * charSize + adjustTop;

​

    if (isEmojiSystem) {

      switchCharacterToEmoji(textArray[i], posx, posy);

    } else {

      switchCharacterToSymbol(textArray[i], posx, posy);

    }

  }

  let jumperPosX = charMargin;

  let jumperPosY = charMargin - 6;

  for( let i = 0; i < textString.length; i++){

    jumperPosX +=11;

    if( i % 46 === 0 && i !== 0 ){

      jumperPosX = charMargin;

      jumperPosY += 26;

    }

    if( i === 46*2){

      jumperPosX -=11;

    }

  }

  // create cursor

  if( blinkingVar < blinkingVarRate && !shouldSave ){

    if (isEmojiSystem) {

      fill(255);

    }else{

      fill(monitorColorString);

    }

    rect(jumperPosX,jumperPosY,3,20);

  } else if( blinkingVar > blinkingVarRate*2 ){

    blinkingVar = 0;

  }

  blinkingVar++;

  if( shouldSave ){

    saveCanvas(screen, '⌧', 'png');

    shouldSave = false;

  }

  // create flickering

  if( !isEmojiSystem ){

    for( let i = 0; i < height / flickerMargin; i++ ){

      let flickerColor = color(monitorColorString);

      flickerColor.setAlpha(40);

      stroke(flickerColor);

      let posY = i + random(0,0.2) + flickerMargin/2;

      line(0,posY*flickerMargin,width,posY*flickerMargin);

    }

  }  

}

​

​

// function to change the grid on "space"

function keyPressed() {

  // switch between grids

  if (keyCode === BACKSPACE || keyCode === DELETE) {

    textArray = [];

    textString = '';

    transformedText = '';

  } else if (alphabet.includes(key.toLowerCase())) {

​

    if (textArray.length < maxCharsPerRow * maxRows + 6) {

      textArray.push(key);

      textString += key;

      if (textArray.length % 46 === 0) {

        textString += '\n';

      }

    }

  } else if (keyCode === DOWN_ARROW) {

    if( isEmojiSystem ){

      copyToClipboard(transformedText)

      console.log('copied to clipboard 📋');

    }else{

      shouldSave = true;

    }

  } else if (keyCode === ALT) {

    isEmojiSystem = !isEmojiSystem;

    console.log('isEmoji',isEmojiSystem)

  }

}

​

function switchCharacterToEmoji(char, x, y) {

​

  let index = alphabet.indexOf(char.toLowerCase());

  let newChar = symbols[index];

  transformedText += newChar;

​

  textSize(32);

  text(newChar, x, y + 20);

​

  // fill(200);

  // rect(x,y,charSize,charSize);

}

​

function switchCharacterToSymbol(char, x, y) {

​

  let index = alphabet.indexOf(char.toLowerCase());

  let binaryIndex = (index >>> 0).toString(2);

​

  let symbolSize = charSize - 5;

​

  // add missing 0s

  for (let i = binaryIndex.length; i < 6; i++) {

    binaryIndex = 0 + binaryIndex;

  }

  for (let i = 0; i < 6; i++) {

    if (parseInt(binaryIndex.charAt(i))) {

      stroke(monitorColor);

    }else{

      stroke(255,255,255,30);

    }

    switch (i) {

      case 0:

        line(x, y, x + symbolSize, y); // straight top

        break;

      case 1:

        line(x, y + symbolSize, x, y); // straight left

        break;

      case 2:

        line(x, y + symbolSize, x + symbolSize, y + symbolSize); // straight bottom

        break;

      case 3:

        line(x + symbolSize, y, x + symbolSize, y + symbolSize); // straight right

        break;

      case 4:

        line(x, y, x + symbolSize, y + symbolSize);

        break;

      case 5:

        line(x + symbolSize, y, x, y + symbolSize);

        break;

n

    }

  }

}

​

// Copied function from this website: 

// https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

function copyToClipboard(str) {

  const el = document.createElement('textarea');

  el.value = str;

  document.body.appendChild(el);

  el.select();

  document.execCommand('copy');

  document.body.removeChild(el);

};