Name: Nishra Ranpura

  Critical Computation

  MFA Design and Technology

​

Assignment 5: Anti-Surveillance Tool | Anti-Censorship Machine

​

Design process, Assignment reflections, and additional information can be found in the below Portfolio link:

https://cc-portfolio-nishra.glitch.me/p5.html

*/   

​

let img, dimg, imgW, imgH, newW, newH;

let colorArr = [];

let encryptButton, decryptButton;

function preload() {

  encryptUploadButton = createFileInput(encryptFile); // Input Image to be Encrypted

  encryptUploadButton.position(130, 250);

  encryptUploadButton.style('color', color(0, 0, 0, 0));

  decryptUploadButton = createFileInput(decryptFile); // // Input Image to be Decrypted

  decryptUploadButton.position(390, 250);

  decryptUploadButton.style('color', color(0, 0, 0, 0));

  heading = loadFont('Pixeled.ttf');

  body = loadFont('GOTHIC.TTF');

}

​

function setup() {

  createCanvas(600, 600);

  pixelDensity(1);

  background(240);

  fill(0);

  textAlign(CENTER);

  textFont(heading);

  textSize(15);

  text('A N T I   C E N S O R S H I P   M A C H I N E', width/2, 55);

}

​

function draw() {

  noLoop(); // to retain the ombre pattern

  if (img) {

    encryptImgUpdate();  // Upload Image to be Encrypted, display image, show next steps

  }

  if (dimg) {

    deryptImgUpdate();   // Upload Image to be Decrypted, display image, show next steps

  }  

  instructions();

}

​

function instructions() {

  background(0, 150);

  noStroke();

  fill(0, 170);

  rectMode(CENTER);

  rect(width/2, height/2, width, 120);

  // need to convert this using for loop and array

  rect(width/2, height/2 - 100, width, 40);

  rect(width/2, height/2 - 100 - 50, width, 20);

  rect(width/2, height/2 - 100 - 50 - 30, width, 10);

  rect(width/2, height/2 - 100 - 50 - 30 - 20, width, 5);

  rect(width/2, height/2 - 100 - 50 - 30 - 20 - 15, width, 5);

  // need to convert this using for loop and array

  rect(width/2, height/2 + 100, width, 40);

  rect(width/2, height/2 + 100 + 50, width, 20);

  rect(width/2, height/2 + 100 + 50 + 30, width, 10);

  rect(width/2, height/2 + 100 + 50 + 30 + 20, width, 5);

  rect(width/2, height/2 + 100 + 50 + 30 + 20 + 15, width, 5);

  fill(255);

  textAlign(CENTER);

  textSize(12);

  textFont(body);

  text('Upload an image to Encrypt', 175, 295);

  text('(600px x 600px)', 175, 315);

  text('Upload same Encrypted image to Decrypt', 435, 295);

  text('(600px x 600px)', 435, 315);

}

​

// To display image to be encrypted (restrictions - 600 x 600px only / working on more flexible methods) 

function encryptImgUpdate() {

  newW = 600;

  newH = 600;

  image(img, 0, 0, newW, newH);

  // An attempt to use this Anti-Surveillance tool for different image sizes

  // if (img.height < img.width) {

  //       newW = 600;

  //       newH = parseInt((img.height*600)/img.width);

  //       //img.position(0,0);

  //       image(img, 0, 0, newW, newH);

  //     }

  //     else if (img.height > img.width) {

  //       newW = parseInt((img.width*600)/img.height);

  //       newH = 600;

  //       //img.position(0,0);

  //       image(img, 0, 0, newW, newH);

  //     }

  //     else {

  //       newW = 600;

  //       newH = 600;

  //       //img.position(0,0);

  //       image(img, 0, 0, newW, newH);

  //     }

}

​

// To display the uploaded image to be Encrypted and present further steps

function encryptFile(file){

  if (file.type === 'image') {

    img = loadImage(file.data, 

                    function(){

                      encryptImgUpdate();

                      resizeCanvas(newW, newH);

                    });

    encryptButton = createButton('Encrypt');  // Buton that encrypts and saves the encrypted image

    encryptButton.position(135, 327);

    encryptButton.size(80,20);

    encryptButton.style('border', 'none');

    encryptButton.style('border-radius', '50px');

    encryptButton.style('background-color', '#e3e3e3')

    encryptButton.style('color', 'black');

    encryptButton.style('font-size', 5);

    encryptButton.mousePressed(encrypt);

  }

}

​

// To display image to be decrypted (restrictions - 600 x 600px only, it depends on the image that is encrypted before, and doesnot work otherwise / working on more flexible methods) 

function deryptImgUpdate() {

  newW = 600;

  newH = 600;

  image(dimg, 0, 0, newW, newH);

}

​

// To display the uploaded image to be Decrypted and present further steps

function decryptFile(file){

  if (file.type === 'image') {

    img = null;

    dimg = loadImage(file.data, 

                    function(){

                      deryptImgUpdate();

                      resizeCanvas(newW, newH);

                    });

    decryptButton = createButton('Decrypt');  // Buton that decrypts and saves the decrypted image

    decryptButton.position(395, 327);

    decryptButton.size(80,20);

    decryptButton.style('border', 'none');

    decryptButton.style('border-radius', '50px');

    decryptButton.style('background-color', '#e3e3e3')

    decryptButton.style('color', 'black');

    decryptButton.style('font-size', 5);

    decryptButton.mousePressed(decrypt);

  }

}

​

// Encrypts and saves the image

function encrypt() {

  img.loadPixels();

  for (let x = 0; x < newW; x++) {

    for (let y = 0; y < newH; y++) {

      let index = x + y * newW

      colorArr[index] = img.get(x, y); 

    }

  }

  let newArr = shuffle(colorArr);

  for (let x = 0; x < newW; x++) {

    for (let y = 0; y < newH; y++) {

      let index = x + y * newW;

      img.set(x, y, newArr[index]);      

    }

  }

  img.updatePixels();

  console.log('Saving Encrypted Image')

  save(img);

}

​

// Decrypts and saves the image

function decrypt() {

  dimg.loadPixels();

  for (let x = 0; x < newW; x++) {

    for (let y = 0; y < newH; y++) {

      let index = x + y * newW;

       dimg.set(x, y, colorArr[index]);

    }

 }

  console.log('Saving Decrypted Image');

  dimg.updatePixels();

  save(dimg); 

}

​