p5js中的Caesar Cipher [英] Caesar Cipher in p5js

问题描述

我是一个超级菜鸟，我正在尝试在p5js中创建一个Caesar密码，到目前为止，我设法编写了UI，但是现在我被卡住了，真不知道该如何前进请帮忙吗?

I'm a super noob, and I'm trying to make a Caesar cipher in p5js, so far I manage to code the UI, but now I'm stuck and don't really know how to move forward can someone please help?

我知道我需要用于循环，但是我不知道该怎么做?我真的很感谢所有帮助
谢谢

I know I need to use for loops, but I can't figure out how? I really appreciate all the help
Thanks

let inp;
let button;
let alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

function setup() {
  createCanvas(600, 600);
//  Type here your plain or encryted message
  inp = createInput();
  inp.position(20, 30);
  inp.size(550, 200);
  
//  Encrypted / Decrypted message
  inp = createInput();
  inp.position(20, 340);
  inp.size(550, 200);
  
//   Key
  inp = createInput();
  inp.position(20, 280);
  inp.size(200, 20);
  
  button = createButton("Encrypt");
  button.position(370, 260);
  button.size(100, 50);
  // button.mousePressed(encrypt);
  
  button = createButton("Decrypt");
  button.position(475, 260);
  button.size(100, 50);
  // button.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)
}

推荐答案

以下是完整版本的链接:

Here's a link to the completed version: https://editor.p5js.org/Samathingamajig/sketches/7P5e__R8M

但是我实际上会解释我所做的，以便您从中受益.

But I'll actually explain what I did so that you gain something from this.

1. 以种子值开头，是文本旋转多少的整数
2. 要进行加密，请为每个字母将种子添加到字母中.即A + 2 = C，B + 5 = G，等等.
3. 要解密，请为每个字母减去字母中的种子.即C-2 = A，G-5 = B，等等.

伪代码:

function encrypt():
  initial text = (get initial text)
  output = "" // empty string
  offset (aka seed) = (get the seed, make sure its an integer) mod 26
  for each character in initial:
    if character is in the alphabet:
      index = (find the index of the character in the alphabet)
      outputIndex = (index + offset + 26 /* this 26 isn't needed, but it's there to make the decrypt be a simple copy + paste, you'll see */ ) mod 26 /* force between 0 and 25, inclusive */
      output += outputIndex to character
    else:
      output += initial character
  (set the output text field to the output)

function decrypt():
  initial text = (get initial text)
  output = "" // empty string
  offset (aka seed) = (get the seed, make sure its an integer)
  for each character in initial:
    if character is in the alphabet:
      index = (find the index of the character in the alphabet)
      outputIndex = (index - offset + 26 /* when subtracting the offset, the character could be a negative index */ ) mod 26 /* force between 0 and 25, inclusive */
      output += outputIndex to character
    else:
      output += initial character
  (set the output text field to the output)

您的代码有一些其他更改:

为此，我对您的代码进行了其他一些更改:

Some other changes to your code:

Some other changes I made to your code that are required for this are:

• 具有所有按钮的全局数组和所有输入的全局数组.您一直覆盖该值，因此一次只能有一个引用，因此您将无法访问加密和解密函数中的值
• 更改了创建输入(文本字段)的顺序，以便垂直定义它们，这对于我们推入数组很有用
• 将字母变量设为字符串而不是数组，仍然可以执行 indexOf()， includes()， alphabet [i] 等带有一个字符串，并且定义看起来更简洁

• Have a global array of all buttons, and a global array of all inputs. You kept overriding the value so there was only one reference at a time, so you weren't able to access the values in the encrypt and decrypt functions
• Changed the order of creating the inputs (text fields), so that they are defined vertically, this is good for when we push to the array
• Made the alphabet variable a string rather than an array, you can still do indexOf(), includes(), alphabet[i], etc. with a string and the definition looks cleaner

这篇关于p5js中的Caesar Cipher的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！