let currentfrImg = "CFrame1.png";

let yourImg;

let Finput;

let img;

let profile;

let c;

let pg;

let slider;

let picX = 250;

let picY = 250;

let f1;

let offset =125;

let xoffset =35;

function preload(){

  fimg = loadImage(currentfrImg)

}

function setup() {

  c = createCanvas(500, 500);

  createElement('label','Upload Photo').position(75+xoffset, 600+offset)

  Finput = createFileInput(handleFile);

  Finput.position(175+xoffset, 600+offset);

  createButton('Frame #1').position(0+xoffset,650+offset).mousePressed(changeFrame1);

  createButton('Frame #2').position(100+xoffset,650+offset).mousePressed(changeFrame2);

  createButton('Frame #3').position(200+xoffset,650+offset).mousePressed(changeFrame3);

  createButton('Frame #4').position(300+xoffset,650+offset).mousePressed(changeFrame4);

  createButton('Frame #5').position(400+xoffset,650+offset).mousePressed(changeFrame5);

  createButton('Save Photo').position(370+xoffset,580+offset).mousePressed(savePhoto);

  createElement('label','Resize Photo').position(50+xoffset, 550+offset)

  slider = createSlider(0, 700, 500,50).position(150+xoffset, 550+offset);

  slider.style('width', '80px');

  createElement('label','Choose Filter').position(250+xoffset, 550+offset)

  f1 = createElement('select', '<option value="none">None</option><option value="GRAY">Gray</option><option value="INVERT">Invert</option><option value="ERODE">Erode</option><option value="DILATE">Dilate</option>'); 

  f1.position(350+xoffset, 550+offset);

  createElement('label','CSTA Black Affinity Group').position(145+xoffset, 710+offset)

  createElement('label','Created by Portia Morrell').position(150+xoffset, 740+offset)

}

​

function draw(){

  clear()

  background(0,0)

  noStroke()

   let val = slider.value();

    if(img){

    imageMode(CENTER);

    image(img,picX,picY,val,val)

      if(f1.value() != "none"){

        switch(f1.value()){

          case 'GRAY':

          filter(GRAY);

          break;

          case 'OPAQUE':

          filter(OPAQUE);

          break;

          case 'INVERT':

          filter(INVERT);

          break;

          case 'ERODE':

          filter(ERODE);

          break;

          case 'DILATE':

          filter(DILATE);

          break;

        }

      }

  }

​

  imageMode(CENTER);

  profile = image(fimg,250,250,500,500);

}

​

function mouseDragged() {

  if(mouseX <= 500 && mouseY <= 500 && mouseX >=0 && mouseY >= 0){

    imageMode(CENTER);

    picX = mouseX

    picY =  mouseY

  }

}

function changeFrame1(){

  fimg = loadImage('CFrame1.png')

}

function changeFrame2(){

  fimg = loadImage('CFrame2.png')

}

function changeFrame3(){

  fimg = loadImage('CFrame3.png')

}

function changeFrame4(){

  fimg = loadImage('CFrame4.png')

}

function changeFrame5(){

  fimg = loadImage('CFrame5.png')

}

function savePhoto(){

 c = saveCanvas(c, 'myCrownProfile', 'png');

}

function handleFile(file) {

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

    img = createImg(file.data, '');

    img.hide()

  } else {

    img = null;

  }

}