Change color on correct output

84 Views Asked by At

I would like the color of the 3 blinking red lights to change to green once I get a corrected encrypted or decrypted message (either when a user puts a number between 1 and 26 in the key filed and presses encrypt/decrypt or when he gets an output different from a sequence of "undefined"). Is this possible? If so, how do I do it? Thanks


let inps = [];
let buttons = [];
let alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let backImage;

function preload (){
  backImage = loadImage('images/back.jpg')
}

function setup() {
  
  createCanvas(600, 600);
  
//  Type here your plain or encryted message
  inps.push(createElement('textarea'));
  inps[0].position(20, 70);
  inps[0].size(550, 150);
  inps[0].style('background', '#3C3C3B');
  inps[0].style('color', '#ffffff');
  
  
//   Key
  inps.push(createInput(' Insert number from 1 to 26'));
  inps[1].position(20, 290);
  inps[1].size(200, 20);
  inps[1].style('background', '#3C3C3B');
  inps[1].style('color', '#ffffff');
  
//  Encrypted / Decrypted message
  inps.push(createElement('textarea'));
  inps[2].position(20, 370);
  inps[2].size(550, 150);
  inps[2].style('background', '#3C3C3B');
  inps[2].style('color', '#ffffff');

  
  buttons.push(createButton('Encrypt'));
  buttons[0].position(370, 275);
  buttons[0].size(100, 50);
  buttons[0].mousePressed(encrypt);
  
  buttons.push(createButton('Decrypt'));
  buttons[1].position(475, 275);
  buttons[1].size(100, 50);
  buttons[1].mousePressed(decrypt);
  
  noStroke();

}

function draw() {
  background(backImage);
  fill(255)
  text('Type here your plain or encryted message', 20, 60);
  text('Encrypted / Decrypted message', 20, 360);
  text('Key', 20, 280);
  light()
  blinkRed()
  // blinkGreen()
}

function light(){
  for (let x = 0; x < 3; x++){
     noStroke();
     fill(255)
     ellipse(25*x+510, 30, 20);
}
}
function blinkRed(){
  for (let i = 0; i < 3; i++){
    noStroke();
     if(frameCount % 60 < 30) {
    fill(50);
    } else {
    fill(255,0,0)
  } 
    ellipse(25*i+510, 30, 15);
  }
}
// function blinkGreen(){
//   for (let i = 0; i < 3; i++){
//     noStroke();
//      if(frameCount % 60 < 30 && buttons[0].mousePressed) {
//     fill(50);
//     } else {
//     fill(0,255,0)
//   ellipse(25*i+510, 30, 15);
//   }
//   }
// }


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);
}
0

There are 0 best solutions below