let buttons = [];

let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

​

function setup() {

  createCanvas(600, 600);

    var area = createElement('textarea');

  area.elt.placeholder = 'hint text';

}

//  Type here your plain or encryted message

  inps.push(createInput());

  inps[0].position(20, 30);

  inps[0].size(550, 200);

//   Key

  inps.push(createInput());

  inps[1].position(20, 280);

  inps[1].size(200, 20);

//  Encrypted / Decrypted message

  inps.push(createInput());

  inps[2].position(20, 340);

  inps[2].size(550, 200);

  buttons.push(createButton("Encrypt"));

  buttons[0].position(370, 260);

  buttons[0].size(100, 50);

  buttons[0].mousePressed(encrypt);

  buttons.push(createButton("Decrypt"));

  buttons[1].position(475, 260);

  buttons[1].size(100, 50);

  buttons[1].mousePressed(decrypt);

  noStroke();

​

  // button.mousePressed(drawName);

}

​

function draw() {

  background(0)

  text("Type here your plain or encryted message", 20, 20);

  text("Encrypted / Decrypted message", 20, 330);

  text("Key", 20, 270);

  fill(255)

}

​

function encrypt() {

  const initial = inps[0].value().toUpperCase();

  const shift = int(inps[1].value()) % 26;

  let output = "";

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

    if (alphabet.includes(initial[i])) {

      output += alphabet[(alphabet.indexOf(initial[i]) + shift + 26) % 26];

    } else {

      output += initial[i];

    }

  }

  inps[2].value(output);

}

​

function decrypt() {

  const initial = inps[0].value().toUpperCase();

  const shift = int(inps[1].value());

  let output = "";

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

    if (alphabet.includes(initial[i])) {

      output += alphabet[(alphabet.indexOf(initial[i]) - shift + 26) % 26];

    } else {

      output += initial[i];

    }

  }

  inps[2].value(output);

}