​

let rectMask;

​

let ratio;

​

let xPos = 0;

​

let transparentColor;

​

let curSize;

​

let chosenX, chosenY, chosenSize;

​

let chosen = false;

​

let pics = [];

​

let input;

​

let uploaded = false;

​

let assignedFirst = false;

​

let imageIndex = 0;

​

// function preload(){

//    myImg = loadImage('dan2.png'); 

​

// }

​

function setup() {

  rectMode(CORNER);

  frameRate(30);

  input = createFileInput(handleFile, "yes");

  input.position(0, 0);

  imageMode(CORNER);

  // noStroke();

​

}

​

​

function handleFile(file) {

  input.remove();

​

  //print(file);

  pics.push(loadImage(file.data));

  //lateSetup();

​

  if (!assignedFirst) {

    assignedFirst = true;

​

​

    myImg = loadImage(file.data, imageLoaded);

​

​

  }

}

​

function imageLoaded() {

​

  createCanvas(myImg.width, myImg.height);

​

  // myImg.resize(width / 2, 0);

​

  ratio = myImg.width / myImg.height;

  print(ratio);

​

  transparentColor = color(0, 0);

​

  curSize = myImg.width / 5;

​

  uploaded = true;

  chosen = false;

}

​

function lateSetup() {

  print("LATESETUP");

​

  //input.remove();

​

​

}

​

function draw() {

​

  if (uploaded) {

​

    background(0, 0);

​

    strokeWeight(2);

​

    if (!chosen) {

      image(myImg, 0, 0);

      fill(color(200, 0));

​

      if (keyIsDown(UP_ARROW)) {

        curSize += 4;

​

      }

​

      if (keyIsDown(DOWN_ARROW)) {

        curSize -= 4;

      }

​

      rect(mouseX, mouseY, curSize, height/2);

​

    }

  }

}

​

function nextImage() {

​

  imageIndex++;

  myImg = pics[imageIndex];

  imageLoaded();

​

}

​

function keyPressed() {

​

​

  if (keyCode === RIGHT_ARROW) {

    chosenX = mouseX;

    chosenY = mouseY;

    chosenSize = curSize;

​

    // chosen = true;

​

    // clear();

​

    makeMask();

    print(pics);

    // nextImage();

  }

​

  //   if(keyCode === UP_ARROW){ ]

  //     curSize+=7;

  //   }

​

  //   if(keyCode === DOWN_ARROW){

  //     curSize-=7;

  //   }

​

}

​

function makeMask() {

//   rectMask = createGraphics(myImg.width, myImg.height);

​

//   rectMask.fill('(rgba(0,0,0,1)');

​

​

//   rectMask.rect(mouseX, mouseY, curSize, height/2);

​

//   myImg.mask(rectMask);

​

//   image(myImg, 0, 0);

​

//   //Use GET to find and get a small png that's just the circle we want

​

//   //TODO: resize back to original size then map where the circle should be

​

//   let finalImage;

  // push() 

  let curX = mouseX+2;

  let curY = mouseY+2;

  let curW = curSize -4;

  let curH = (height/2)-2;

  // translate(curX + curW/2,curY + curH/2)

  rotate(PI/2)

  // imageMode(CENTER);

​

  finalImage = get(curX,curY,curW,curH);

​

  finalImage.save("squared", "png");

  // pop()

​

​

}